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.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE PERSONALIZAR MENÚ ASTRA PRO + BOTÓN
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:
➡️ 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 al menú de la plantilla Astra
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
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.
Opciones de Astra para personalización del menú en móviles
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.
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.
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.
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
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
