Seleccionar página

Desde la versión 3.0 del tema Astra, la plantilla incorpora un header builder o constructor de cabeceras, que se ha venido a traducir como: “Maquetador de cabeceras”.

De esta manera las opciones de personalización de Astra del header que había disponibles en versiones de Astra 1.0 y 2.0 ya no están disponibles y han sido sustituidas por el maquetador de cabeceras de Astra.

Si quieres ver un poco las opciones de personalización del header en versiones anteriores puedes echar un vistazo a este post: Cómo personalizar el header o cabecera y áreas de menú con la plantilla Astra Pro

QUIERO ASTRA PRO

 

CURSO DE LA PLANTILLA ASTRA: Quiero Más información

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

Vídeo tutorial del maquetador de cabeceras de Astra – header builder

 

 

 

Elementos del Maquetador de Cabeceras de Astra – Elementos del header builder de Astra

 

Para acceder al maquetador de cabeceras de Astra debes ir a: “Apariencia > personalizar > Maquetador de cabeceras”.

 

En la parte izquierda de la interface:

Arriba: ahí te irán apareciendo los elementos que vayas añadiendo a la cabecera. Si haces clic sobre uno de ellos irás a las opciones de personalización de dicho elemento.

Abajo: Opciones de personalización de la cabecera como por ejemplo-> Cabecera fija o flotante y cabecera transparente

 

En la parte derecha de la interface:

Arriba: Pantalla de previsualización de los cambios que vayas haciendo con el maquetador de cabeceras

Abajo: mesa de trabajo donde se muestran las 3 barras que conforman la cabecera de Astra. Haciendo clic en los signos “+” puedes añadir elementos.

Los elementos los puedes desplazar haciendo clic sobre ellos y arrastrando.

 

maquetador de cabeceras de astra - header builder

 

 

Cómo añadir elementos a la cabecera de Astra con el header builder

 

Para añadir un elemento a alguna de las 3 barras de cabecera de Astra, simplemente tienes que situarte sobre la barra que quieras y hacer clic en el signo más correspondiente a la zona donde quieras incluir el elemento.

 

Podrás elegir entre los siguientes elementos. Una vez añadido un elemento podrás personalizar su diseño haciendo clic sobre él con el botón izquierdo del ratón:

 

Button: para añadir un botón personalizable a la cabecera. Puedes añadir hasta 2 botones distintos.

Divider: línea de división para separar elementos en formato horizontal o vertical. Tienes hasta 3 elementos de este tipo.

HTML: texto formateado con un editor de texto. Tienes hasta tres elementos de este tipo.

Menu principal: menú creado desde “apariencia > menus” asociado a la zona principal.

Menú secundario: menú creado desde “apariencia > menus” asociado a la zona de barra secundaria.

Menu 3: Menú que se puede asociar a otra zona. Desde “Apariencia > personalizar > menus” verás que incluso se pueden utilizar otras muchas zonas.

Buscar: elemento tipo barra de búsqueda o icono de búsqueda.

Logotipo: imagen de logo para la cabecera.

Social: iconos de redes sociales en los que estás presente. Se pueden añadir diferentes redes sociales y personalizar la url y el diseño.

Carrito: en el caso de que utilices Woocommerce podrás añadir el elemento carrito de la tienda online.

Widget: permite añadir widgets a la cabecera. Los widgets disponibles lo tienes en “apariencia > widgets”

QUIERO ASTRA PRO

 

elementos a añadir a la cabecera con astra

 

 

Opciones de diseño de las barras de la cabecera de Astra

 

Para ver las opciones de personalización y diseño de cada una de las 3 barra de la cabecera que muestra el header builder de Astra has de ir al esquema de las 3 barras que aparece en la parte inferior derecha de la pantalla y hacer clic en el icono tipo engranaje de la barra correspondiente.

 

configurar diseño barras cabecer con astra header builder

 

 

Header sticky o cabecera flotante con Astra

 

Para que cuando hagas scroll la cabecera no se pierda. Es decir, para poner la cabecera flotante has de hacer clic en la opción “cabecera fija” que tienes en la parte inferior izquierda de la pantalla.

A continuación, podrás seleccionar que barras quieres que queden fijas cuando se haga scroll.

 

 

Header transparente o cabecera transparente con Astra

 

Las opciones para poner la cabecera transparente las tienes justo encima de las opciones de la cabecera flotante.

En la parte inferior izquierda haz clic en “Cabecera transparente” para personalizar las opciones de configuración.

 

 

Cabecera o header para móviles con Astra

 

Para personalizar el diseño de la cabecera del tema Astra has de hacer clic en el icono tipo “móvil” que hay en la parte inferior izquierda de la pantalla.

Verás 3 iconos, haz clic en el tipo “móvil” para que se abra el maquetador de cabeceras de Astra para tabletas y móviles.

El funcionamiento es el mismo que el del maquetador de cabeceras tipo escritorio que te he mostrado en los anteriores apartados del post. La principal diferencia es que este maquetador tiene una nueva zona denominada: “Off Canvas”. Esta zona representa la parte que se muestra cuando se hace clic en el icono tipo hamburguesa.

QUIERO ASTRA PRO

 

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO DIVI (33 Clases)
3.- CURSO DISEÑADOR WEB FREELANCE (10 Clases)
4.- CURSO MEMBERSHIP SITE (14 Clases)
5.- CURSO ELEMENTOR (14 Clases)
6.- CURSO ASTRA PRO (17 Clases)
7.- CURSO BLOOM + MAILCHIMP (7 Clases)
8.- CURSO SEO (19 Clases)
9.- CURSO BLOG WORDPRESS (32 Clases)
10.- CURSO WOOCOMMERCE (39 Clases)
11.- CURSO FLATSOME WORDPRESS (36 Clases)
12.- CURSO COLORES WEB (9 Clases)
13.- CURSO ANALYTICS (10 Clases)
14.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
15.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com