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
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE INSTALAR PLANTILLA ASTRA Y ADDON ASTRA PRO
- Vídeo tutorial del maquetador de cabeceras de Astra - header builder
- Elementos del Maquetador de Cabeceras de Astra – Elementos del header builder de Astra
- Cómo añadir elementos a la cabecera de Astra con el header builder
- Opciones de diseño de las barras de la cabecera de Astra
- Header sticky o cabecera flotante con Astra
- Header transparente o cabecera transparente con Astra
- Cabecera o header para móviles con Astra
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.
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
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.
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
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
