Cómo personalizar Astra: Tutorial del tema Astra

Estás leyendo la publicación: Cómo personalizar Astra: Tutorial del tema Astra

En mi publicación, te muestro cómo instalar y personalizar el tema Astra en WordPress.

El tema Astra es un tema popular de WordPress. Se carga rápido y es compatible con dispositivos móviles.

Astra se ha descargado más de 1 millón de veces y tiene una puntuación de revisión de cinco sobre cinco.

El tema Astra es adecuado para un blog, una cartera personal, un sitio web comercial o una tienda de WooCommerce.

Vamos a empezar.

se.

Instalar Astra en WordPress

Puede instalar Astra desde la biblioteca de temas de WordPress o cargar el archivo de instalación.

Instale Astra desde la biblioteca de temas de WordPress

Pase el mouse sobre Apariencia y haga clic Temas.

Hacer clic Agregar nuevo.

Tipo Astra.

El tema Astra aparece a la izquierda.

Pase el mouse sobre el tema y haga clic en Instalar.

Una vez instalado, puede activar el tema para su sitio web o utilizar el Vista previa en vivo enlace para ver el contenido de su sitio en Astra.

Cargue los archivos de instalación del tema Astra en WordPress

Ir a www.wpastra.com (*Enlace de pago) y haga clic en Descargar ahora.

Debajo de las tablas de comparación hay un enlace de descarga para el Tema de WordPress gratuito de Astra.

Para obtener los archivos de instalación, proporcione su nombre y dirección de correo electrónico para suscribirse.

Puedes darte de baja en cualquier momento.

Hacer clic Suscríbete y Descarga.

Una vez que se complete la descarga, regrese a su panel de administración de WordPress.

Pase el mouse sobre Apariencia y haga clic Temas.

Hacer clic Agregar nuevo.

Hacer clic Subir tema.

Hacer clic Elija el archivo.

Seleccione el archivo de instalación y haga clic en Abierto.

Hacer clic Instalar ahora.

Después de una breve espera, recibirá un mensaje de confirmación de instalación completa.

Una vez finalizada la instalación, tiene tres opciones.

Puede ver el contenido de su sitio sin activar Astra en su sitio web.

Puede activar Astra en su sitio web.

Regrese a la página de temas instalados.

Cómo Instalar el tema Astra en WordPress Video Tutorial

Tutorial de personalización del tema Astra

Puede personalizar Astra antes de activarlo en su sitio web.

Pase el mouse sobre el tema Astra y haga clic en Vista previa en vivo.

Aquí están las opciones de personalización.

La primera opción es actualizar a Astra Pro.

Para una comparación de la versión gratuita de Astra versus la versión Pro de Astra, vaya a www.wpastra.com/precios (*Enlace de pago).

Astra Global

Global le permite seleccionar la configuración predeterminada en su sitio web.

Personaliza la tipografía, los colores, el diseño y los botones.

Si usa un generador de páginas, algunas de estas configuraciones están deshabilitadas.

Tipografía

Hacer clic Tipografía.

Preajustes

Tiene seis familias de fuentes para sus encabezados y cuerpo de texto.

Pase el mouse sobre cada uno para obtener más detalles sobre las familias de fuentes.

Fuente base

Fuente básica le permite editar los valores predeterminados.

Haga clic en el icono del lápiz para realizar ediciones.

Fuente del cuerpo es el texto del párrafo de su sitio web.

Hacer clic Fuente de encabezados Para editar.

Fuente de encabezado

Fuente de encabezado le permite personalizar los encabezados.

H1 Font es el título de las publicaciones de tu blog. Las fuentes H2 a H6 son subtítulos dentro del contenido de su publicación de blog.

Haga clic en el icono del lápiz para editar.

Margen inferior del párrafo

El Margen inferior del párrafo es el espacio entre los bloques de párrafo y el siguiente bloque.

Para cambiar la configuración predeterminada, mueva el control deslizante hacia la izquierda o hacia la derecha.

La ventana de vista previa le muestra el espaciado.

Para volver a la configuración predeterminada, haga clic en el icono de restauración.

Subrayar enlaces de contenido

Subrayar enlaces de contenido le permiten subrayar enlaces internos y externos en su sitio.

Recomiendo habilitar esta opción. Ayuda a resaltar los enlaces en su sitio web.

Tutorial de video personalizado de Global On Astra

Constructor de cabecera Astra

Hacer clic Generador de encabezados desde el menú del personalizador.

En la página siguiente, personalice el Elementos y el Diseño.

Puede editar usando el personalizador o usando la ventana de vista previa.

Esta sección tiene mi logo a la izquierda. Mi menú y el botón de llamada a la acción están a la derecha.

Aquí está mi sitio web.

Título y logotipo del sitio

La primera opción es Título y logotipo del sitio.

El Título del sitio y logotipo La opción le permite cargar su logotipo y configurar un título para que aparezca en la sección de encabezado de su sitio web.

General

Cargue su logotipo. Tiene la opción de cargar un logotipo para dispositivos retina.

A continuación, establezca el ancho de su logotipo.

A continuación, agregue un título de sitio y un eslogan a su encabezado.

El mosaico de su sitio aparece junto a su logotipo.

Deshabilite las opciones de título y eslogan para tener solo un logotipo en su encabezado.

Hacer clic Icono del sitio para agregar un favicon a su sitio web.

El Icono del sitio aparece en las pestañas del navegador.

Diseño

Haga clic en el Diseño pestaña para agregar espaciado.

Ingrese un número para determinar qué tan lejos desea que su logotipo se encuentre en el borde de su sitio web.

Botón

Use la opción Botón para agregar una llamada a la acción a su encabezado.

General

En mi sitio web, el Botón aparece a la derecha.

🔥 Recomendado:  Las 10 mejores aplicaciones de alerta de existencias bajas de Shopify para usar en 2023

Agregue el texto del botón, la URL de destino y la relación del vínculo.

Las etiquetas de relación más comunes son Seguir y No seguir.

En mi sitio web, el Botón aparece a la derecha.

Diseño

Utilizar el Diseño pestaña para personalizar el aspecto de la Botón.

Menú Primaria

Menú Primaria le permite personalizar el aspecto del menú de navegación.

General

Hacer clic Configurar menú desde aquí para personalizar su menú actual.

Puede usar este enlace para crear un nuevo menú o seleccionar otro como su menú principal.

Editar Ancho para cambiar la configuración predeterminada.

En mi sitio web, el menú aparece a la derecha.

Diseño

Utilizar el Diseño pestaña para personalizar el aspecto del Menú.

Encabezado transparente

En mi sitio web, estoy usando una imagen transparente.

General

Puede optar por habilitar el encabezado transparente en los dispositivos seleccionados.

Puedes subir una imagen y editar el ancho.

Diseño

Usar Diseño para personalizar el Encabezado transparente.

Agregar elementos al generador de encabezados

Clickea en el Generador de encabezados secciones para agregar bloques.

Seleccione el bloque que desea agregar.

Pan rallado Astra

Seleccionar Migaja de pan desde el menú de personalización.

Las migas de pan permiten a sus visitantes rastrear su camino a la página actual.

General

Posición del encabezado

La posición predeterminada para las migas de pan es Ninguno. Haga clic en el Posición menú para cambiar esta configuración.

Después de activar Migas de panlos visitantes pueden ver cómo llegaron a la publicación actual del blog.

Migaja de pan aparece en la parte superior de la página. Utilice el menú para seleccionar su posición preferida.

En mi ejemplo, seleccioné Antes del título.

La ruta de navegación aparece en la parte superior izquierda de la pantalla.

estoy en el Acerca de página. visité el Hogar página primero.

Separador

Para personalizar el Migaja de panseleccione uno de los iconos.

El último icono te permite elegir tu diseño.

Para elegir su diseño, haga clic en el último icono e ingrese el Unicode.

Alineación

Usar Alineación para posicionar el Migaja de pan a la izquierda, al centro o a la derecha.

En mi sitio web, el Migaja de pan está a la izquierda.

Configuración de pantalla

Elige las páginas que quieres mostrar Migas de pan.

Características del Astra Pro

Actualizar a Astra Pro le permite personalizar todo en su sitio web.

Compre Astra Pro hoy.

Diseño

Usar Diseño para personalizar el Migaja de pan.

Fuente de contenido

Usar Fuente de contenido para personalizar el texto en el Migaja de pan.

Colores

Haga clic en el círculo gris para cambiar el Migaja de pan colores.

Espaciado

Usar Espaciado para establecer el espacio de píxeles alrededor del Migaja de pan.

Personalice las migas de pan en Astra Video Tutorial

Blog / Archivo de Astra

La primera opción es establecer el ancho del contenido en las páginas de la lista de publicaciones del blog.

El valor predeterminado es 1200. Utilice Costumbre cambiar.

Próximo, Estructura de la publicación y Meta le permite configurar la información que se muestra.

Puedes mover los bloques para cambiar el orden. Al hacer clic en el ícono del ojo, se elimina ese elemento.

Publicar Contenido le permite mostrar algunas oraciones de su publicación o toda la publicación.

Tipografía es el tamaño del texto del título de la categoría y el título de la publicación del blog.

Publicación de blog única de Astra

Elegir Blog desde el menú del personalizador.

A continuación, seleccione Publicación única.

General

Disposición del contenedor

El Disposición del contenedor La opción le permite configurar el estilo de visualización de las publicaciones de su blog.

Haz clic en el estilo que prefieras. Las opciones son Predeterminado, En caja, Ancho completo/Contenido, Contenido en caja y Ancho completo/Extendido.

Diseño de la barra lateral

Puede establecer el estilo con el Diseño de la barra lateral opción si tiene la barra lateral habilitada para las publicaciones de su blog.

Puede seleccionar Predeterminado, Sin barra lateral, Barra lateral derecha o Barra lateral izquierda.

Ancho del contenido

El Ancho del contenido el valor predeterminado es 1200 píxeles.

Puedes cambiar esto con el Costumbre opción. Ingrese su ancho requerido.

Estructura

El Estructura La opción le permite configurar la información que se muestra en sus publicaciones.

Puedes mover el Estructura y Meta bloques hacia arriba o hacia abajo para cambiar el orden.

Para ocultar un elemento, haga clic en el icono del ojo.

En mi ejemplo, seleccioné ocultar la imagen destacada.

Cambié el título del blog para que se muestre antes de la imagen destacada en este ejemplo.

Artículos Relacionados

El Artículos Relacionados La opción le permite mostrar otras publicaciones en la parte inferior de cada publicación de blog.

Recomiendo habilitar esta opción para alentar a los visitantes a permanecer en su sitio web.

Una vez habilitado, puede personalizar cómo Artículos Relacionados mostrar en su sitio web.

Puede personalizar el título, la alineación del título, la cantidad de publicaciones relacionadas, el diseño de la columna de cuadrícula, la consulta de publicaciones, la estructura de la publicación y la metainformación.

La última opción para personalizar en Artículos Relacionados es Habilitar extracto de publicación.

Puede establecer cuántas palabras se muestran para cada publicación relacionada cuando esta opción está habilitada.

Diseño

Fuente del título de la publicación/página

El Fuente del título de la publicación/página La opción le permite establecer el tamaño del texto para su título.

🔥 Recomendado:  Cómo reparar el error 404 de la página de inicio de Magento 2
Artículos Relacionados

Puedes personalizar el Artículos Relacionados sección aquí si habilita Artículos Relacionados.

Espaciado entre publicaciones

El Espaciado entre publicaciones La opción le permite establecer el espacio entre el contenido de su blog y otras secciones.

Cuando se selecciona el icono de enlace, los valores son iguales. Cuando no está marcado, puede establecer valores para cada casilla.

Personalizar publicaciones de blog individuales en Astra Video Tutorial

Elegir barra lateral desde el menú del personalizador.

Diseño predeterminado

El Diseño predeterminado La opción controla la posición de la barra lateral de su sitio web.

Puede tener la barra lateral a la derecha, a la izquierda o sin barra lateral.

Seleccione su posición preferida.

El barra lateral La opción también está en el Blog opción en el personalizador.

Si ha establecido una posición predeterminada en el Blog opción, esta barra lateral la opción no cambiará.

Ancho de la barra lateral

Establece el ancho de tu barra lateral con esta opción.

Selecciona el Pie de página Constructor pestaña del menú del personalizador.

El Pie de página Constructor La opción le permite personalizar la sección inferior de su sitio web.

Elementos

Puede personalizar el área del pie de página utilizando los elementos.

Seleccione la parte a editar.

Este widget personaliza el texto de derechos de autor de su sitio web.

También puede editar el área de pie de página desde los bloques de pie de página.

Haga clic en el widget para editar.

Diseño

Cambie el color y agregue espacio al área del pie de página con el Diseño opción.

Imagen de color de fondo

Para cambiar el Imagen de color de fondo del área del pie de página, haga clic en el círculo gris y seleccione su color preferido.

Espaciado

Utilizar el Relleno opción para establecer el espacio entre el área del pie de página y los elementos circundantes.

Utilizar el Margen opción para establecer el espacio a la izquierda y a la derecha de la Pie de página.

Para introducir valores diferentes en cada cuadro, haga clic en el icono de enlace.

Menús Astra

Selecciona el Menús opción del menú del personalizador.

Tengo tres menús en mi sitio web. Ellos son Sobre nosotros, Conectar, y Menú Primaria.

Esta área está en blanco si no tiene ningún menú en su sitio.

Menú de edición

Haga clic en el menú para editar. seleccioné el Sobre nosotros menú.

Mueva las pestañas hacia arriba o hacia abajo para reordenar.

Para agregar elementos al menú, haga clic en + Agregar elementos. A continuación, seleccione las pestañas de la lista.

Cuando termine, seleccione Agregar elementos de nuevo para eliminar la lista.

Ubicación del menú

El tema Astra tiene cinco áreas para crear un menú.

Mi Sobre nosotros El menú está en el área de pie de página de mi sitio web. Para cambiar esto, puedo marcar una de las casillas.

Borrar Menú

Hacer clic Borrar para eliminar un menú.

Crear nuevo menú

Hacer clic Crear nuevo menú para hacer un nuevo menú para su sitio web.

Asigne un nombre al menú, seleccione una ubicación y luego haga clic en Próximo.

Seleccione elementos de la lista para agregarlos a su nuevo menú.

Una vez completado, borre la lista y publique su menú.

Mi nuevo menú aparece en la parte superior de mi sitio web.

Ver ubicaciones del menú

Hacer clic Ver todas las ubicaciones para ver dónde colocar los menús en su tema.

En Astra, hay cinco ubicaciones.

Puede asignar un menú a cualquiera o todas las ubicaciones.

Haga clic en el menú y asigne uno de la lista.

Puede editar o crear menús.

Personalice los menús en el video tutorial del tema Astra

Widgets de Astra

Selecciona el Widgets pestaña del menú del personalizador.

Sin área de widgets

Recibe este mensaje cuando edita una página sin áreas de widgets disponibles.

Navegue a una página que tenga áreas de widgets.

Área de widgets

Mi publicación de muestra tiene un área de widgets en la barra lateral.

Haga clic en la pestaña para editar.

Una vez abierto, puedo ver los widgets en la barra lateral.

Haga clic en un widget para editar.

Cambié el título de este widget.

La vista previa en vivo le muestra sus ediciones.

Eliminar un widget

Para eliminar un widget, haga clic en los tres puntos y seleccione Eliminar.

Agregar un widget

Haga clic en el ícono más para agregar un widget.

Seleccione un widget de la lista.

El nuevo widget aparece en la parte inferior.

Recomiendo crear un Widget de grupo. A Widget de grupo mantiene sus artículos juntos.

Quiero agregar un widget de publicación reciente a mi barra lateral.

Primero, crea un grupo.

En el nuevo Widget de grupocrea un nuevo bloque.

Quiero crear un título, así que necesito un Título bloquear.

Escribo mi encabezado y presiono enter.

Para mostrar mis últimas publicaciones, necesito un últimas publicaciones bloquear.

Ahora puedes ver mis últimas publicaciones.

La vista previa en vivo muestra mi nuevo widget. El título y las publicaciones se mantienen juntos en el grupo.

Realice sus ediciones y coloque el widget. Quiero que este widget esté en la parte superior.

Usa las flechas para mover la posición.

Una vez que complete sus ediciones, publique sus cambios.

Puedo ver el nuevo widget cuando voy a mi sitio web.

Personalizar widgets en Astra Video Tutorial

Configuración de la página de inicio de Astra

Selecciona el Configuración de la página de inicio pestaña del menú del personalizador.

🔥 Recomendado:  Cómo configurar cuentas de clientes de Magento 2 [2023]

Opciones de visualización de la página de inicio

Tienes dos opciones para tu página de inicio. Puede mostrar sus últimas publicaciones de blog o elegir una página que haya creado.

Tus últimas publicaciones

Cada vez que publica una nueva publicación de blog, se muestra en su página de inicio.

Tengo esta opción configurada en mi sitio web. Mi última publicación fue mi artículo sobre Personalización de widgets en Astra.

Esta publicación está ahora en mi página de inicio.

Cuando seleccionas el Tus últimas publicaciones opción, sus publicaciones aparecen en la página de inicio automáticamente después de la publicación.

Una página estática

El Página estática La opción le permite asignar una página como su página de inicio.

También debe seleccionar una página para las publicaciones de su blog.

Cuando eliges el Página estática WordPress necesita saber dónde mostrar las publicaciones del blog después de la publicación.

Use el menú para asignar una página de inicio y una página de blog.

Puede elegir entre las páginas publicadas. Si no ve su página en la lista, verifique que haya publicado su página de inicio como una página, no como una publicación.

Para las publicaciones de su blog, publique una página llamada Blog. WordPress comenzará a publicar su contenido en el Blog página.

No es necesario agregar contenido a esta página. WordPress comenzará a publicar su contenido en el Blog página.

Seleccionar Blog del menú.

Agregar nueva página

Si no ha creado un Página principal o Blog página, seleccione la Agregar nueva página enlace.

Cree sus páginas y regrese a esta configuración para asignar sus páginas.

Después de elegir su Página principal y Blog páginas, vaya a la opción Menús para configurar su navegación.

Personalizar la configuración de la página de inicio en Astra Video Tutorial

CSS adicional

CSS adicional le permite agregar código para cambiar el estilo del tema.

Por ejemplo, puede agregar código para cambiar el color predeterminado de los enlaces en las publicaciones de su blog.

Pegue su código CSS en el cuadro.

Active y publique sus personalizaciones

Una vez que tengas el tema como quieras. Es hora de activarlo y hacerlo vivir en su sitio web.

Hacer clic Activar y publicar.

Cuadro comparativo de funciones de Astra Free y Astra Pro

Astra Pro tiene muchas más funciones que la versión gratuita. Para ver una comparación, visite wpastra.com/astra-free-vs-pro/ (*Enlace de pago).

Conclusión

El tema Astra WordPress es uno de los temas de WordPress más populares. Es fácil de personalizar y tiene muchas características excelentes.

Si eres nuevo en los blogs, Astra es una excelente opción. Es fácil de personalizar y carga rápido.

Astra es un tema receptivo que ajusta suavemente su diseño según el tamaño de la pantalla y la resolución del dispositivo del visitante.

El tema Astra se ha descargado más de un millón de veces y tiene una puntuación de revisión de 5 sobre 5.

Para obtener más información sobre el tema de WordPress de Astra, consulte mi artículo El tema de WordPress de Astra.

¿Cómo se compara Astra con otros temas de WordPress? Echa un vistazo a mi tema Astra WordPress frente a otros temas: ¿cuál es mejor? artículo para saber más.

Espero que hayas encontrado mi artículo informativo. Si tiene alguna pregunta, déjela a continuación.

Tabla de Contenido