Seleccionar página

En este post vamos a ver las opciones de personalización que incluye la plantilla Astra en relación al menú principal de la web.

También vamos a ver algo que creo es muy interesante, que es las opción que tenemos en la plantilla Astra para añadir al final del menú un elemento especial como un botón, un widget o un texto.

Desde la versión 3.0 de Astra, la plantilla incorpora lo que se denomina como un header builder o maquetador de cabeceras que permite una personalización de la cabecera muy superior a la que teníamos con versiones anteriores. Tengo un tutorial específico sobre el header builder o maquetador de cabeceras de Astra. Desde este enlace puedes ir al post: Maquetador de cabeceras de Astra
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

 

 

 

En primer lugar te incluyo el vídeo en el cual podrás ver todas las opciones de personalización del menú principal con la plantilla Astra Pro. Más abajo, tienes todas las opciones de personalización clasificadas y desglosadas:

 

CURSO DE LA PLANTILLA ASTRA: CURSO ASTRA

 

 

➡️ 1.- Añadir un botón, barra búsqueda, texto o widget al header o cabecera con la plantilla Astra PRO

 

Para acceder a las opciones de personalización del menú principal de la plantilla Astra, iremos a la administración de WordPress y a: “Apariencia > Personalizar”.

A continuación, navegaremos hasta: “Cabecera > Menú Primario”.

El primer apartado de opciones que nos encontramos se denomina: “MENÚ” y en él encontraremos los siguientes campos de personalización:

 

✔️i.- Desactivar menú: esta opción sirve para mostrar u ocultar el menú principal de la web con la plantilla Astra.

✔️ii.- Último elemento del menú: esta opción permite añadir al final del menú, alguno de los siguientes elementos:

a.- Ninguno: no añade al menú ningún elemento

b.- Buscar: añade un icono con forma de lupa para poder realizar búsquedas en la web. Debajo, verás un apartado denominado: “Estilo de búsqueda” que permite añadir diferentes maneras de mostrar la barra de búsqueda al hacer clic sobre el icono.

c.- Botón: añade un botón o llamada a la acción al final del menú con la plantilla Astra. Algo muy empleado en páginas web. Más abajo encontraremos opciones para personalizar el texto del botón y su enlace. También podremos elegir que el botón se muestre según el diseño global que hayamos establecido o crear un diseño personalizado para el botón.

d.- Texto / HTML: con esta opción podremos añadir texto plano o HTML al final del menú.

e.- Widget: con esta opción puedes añadir un área de widget al final del menú. El área de widget asociado se denomina “Cabecera” (búscala en Apariencia > widgets)

 

añadir botón en el menú o header de la plantilla Astra pro

Añadir botón al menú de la plantilla Astra

 

 

➡️ 2.- Diseño del submenú con la plantilla Astra PRO

 

El siguiente apartado se denomina “SUBMENÚ”, en él encontrarás opciones de personalización del submenú que se despliega desde el menú principal con la plantilla Astra y encontrarás los siguientes apartados:

  • ✔️ i.- Animación del contenedor: aquí podrás establecer el movimiento con el que aparece el submenú cuando ponemos el ratón sobre un elemento del menú principal que tenga subelementos.
  • ✔️ ii.- Borde del contenedor: desde aquí podremos establecer un borde perimetral al submenú. Podremos establecer el grosor de cada uno de los bordes. Si no queremos borde debemos poner 0
  • ✔️ iii.- Color de borde: aquí estableceremos el color de ese borde cuyo espesor establecimos en el apartado anterior.
  • ✔️ iv.- Divisor del submenú: si marcamos esta opción estableceremos una línea horizontal para separar cada uno de los ítems del submenú.

 

QUIERO ASTRA PRO

 

 

 

➡️ 3.- Opciones del menú móvil con la plantilla Astra

 

Vamos a ver en este apartado las opciones que tiene la plantilla Astra para la personalización del menú principal en dispositivos móviles.

Este apartado se denomina: “MENÚ MÓVIL” y en él encontramos los siguientes puntos:

 

  • ✔️ i.- Punto de ruptura del menú: en este apartado podremos establecer a que anchura de pantalla cambia el menú tipo escritorio a menú desplegable con icono tipo hamburguesa, con la plantilla Astra Pro.
  • ✔️ ii.- Etiqueta del menú: aquí podemos establecer un texto para que se muestre junto al icono tipo hamburguesa. Por ejemplo, “Menú”.
  • ✔️ iii.- Estilo del menú: podremos establecer desde aquí el tipo de movimiento que realiza el menú cuando se despliega en el móvil al hacer clic en el icono tipo hamburguesa.
  • ✔️ iv.- Estilo del botón conmutador: Opciones de diseño del icono tipo hamburguesa de la plantilla Astra.
  • ✔️ v.- Color del botón conmutador: color del icono tipo hamburguesa.
  • ✔️ vi.- Radio de borde: radio de curvatura de las esquinas del botón que incluye en su interior icono tipo hamburguesa.
  • ✔️ vii.- Destino del desplegable: aquí podremos seleccionar si cuando hacemos clic en la parte de texto de un ítem de menú que despliega un submenú, se despliega o no el submenú. En cualquier caso, si hacemos clic en el icono que aparece en la parte derecha siempre se desplegará el submenú.
  • ✔️ viii.- Borde para los elementos del menú: con esta opción podremos establecer un borde perimetral y su grosor, a cada ítem del menú en dispositivos móviles.
  • ✔️ ix.- Color del borde: aquí podremos establecer el color del borde anterior.

 

personalizar menú en móvil de plantilla astra

Opciones de Astra para personalización del menú en móviles

 

 

➡️ 4.- Colores, tipografía y espaciado del menú principal con Astra Pro.

 

A continuación, tenemos 3 apartados en los que podremos personalizar colores, tipos de letra y márgenes del menú principal de la plantilla Astra.

 

 

4.1.- Colores Menú principal Astra Pro

 

En el apartado “COLORES” podremos establecer los diferentes colores del menú principal y submenú de Astra, como: color textos /enlaces menús, color de fondo del menú, imagen de fondo del menú, color hover fondo, color hover enlaces menú, color ítem activo fondo y enlace, etc.

 

 

4.2.- Tipos de letra Menú principal Astra Pro

 

En el apartado “TIPOGRAFÍA” podremos personalizar diferentes aspectos de la fuente del menú principal y submenú, como: tipo de fuente, tamaño fuente menú, grosor fuente menú, acciones de transformación y altura de línea.

 

 

4.3.- Márgenes menú principal plantilla Astra

 

Desde el apartado de “ESPACIADO” podremos establecer márgenes perimetrales a los ítems del menú principal y submenú, con la plantilla Astra.

  • Desde “Espacio del menú” podremos establecer un margen perimetral a cada ítem del menú principal.
  • Desde “Espacio del submenú” podremos establecer un margen perimetral a cada ítem del submenú con Astra.

 

QUIERO ASTRA PRO

 

Compártelo ya!!
Curso gratis de wordpress y divi

▷LLÉVATE EL CURSO WORDPRESS Y DIVI GRATIS

Aprende a crear una página web con Wordpress y Divi

22 vídeos gratis

Consentimiento

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