Crear menú vertical con Wordpress

Cómo crear un menú vertical en WordPress con Astra

Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on twitter
Twitter

En ocasiones, ya sea por una cuestión de diseño o por una necesidad estructural de la web necesitamos alternativas a la típica estructura de menú. Una de esas opciones es la de estructurar nuestro menú de forma vertical. En este post os explicaremos cómo crear un menú vertical en WordPress con Astra Pro y el plugin Ultimate addons for Elementor.

Crear menu vertical con WordPress

Para llevar a cabo esta tarea necesitaremos 3 plugins. Os dejamos los enlaces a continuación:

Una vez instalados y activados necesitaremos activar el módulo de diseños personalizados de Astra pro. Para ello nos vamos a personalizar/opciones de Astra y activamos dicho módulo.

También necesitaremos activar el widget Canvas-off de ultimate addons for Elementor. Para ello nos vamos a ajustes/ UAE y activamos el widget comentado.

Partiendo de la base de que ya tenemos una estructura de menú creada, lo primero que vamos a realizar es ocultar dicho menú. Desde nuestro administrador de WordPress nos vamos a apariencia/personalizar/cabecera/menú primario. Veremos que la primera opción nos permite ocultar el menú (recuadro rojo de la imagen).

Para evitar que en la versión móvil nos aparezca el típico menú de hamburguesa y el que vamos a crear en el apartado menú móvil, en la sección punto de ruptura del menú le daremos un valor de 0 (recuadro azul de la imagen). Publicamos los cambios.

Ocultar menu principar en WordPress con Astra

Lo que haremos a continuación será insertar nuestro botón de menú bajo el logo de la web. Para ello utilizaremos una de las herramientas de personalización que hacen que Astra pro sea una de nuestras plantillas favoritas, los hooks. En este post no vamos a entrar en detalle en como funcionan los hooks, para una buena compresión sobre cómo funcionan date una vuelta por nuestro post CÓMO UTILIZAR LOS HOOKS DE LA PLANTILLA ASTRA.

Desde nuestro administrador nos vamos a apariencia/diseños personalizados y creamos un diseño que lo titularemos menú vertical.

Antes de diseñar el contenido definiremos los ajustes del diseño por lo que nos iremos al final de la página y modificaremos los ajustes como los de la siguiente imagen.

Menu vertical wordpress ajustes hooks Astra pro

Seguimos diseñando lo que sera nuestro menú vertical. Para ello, desde la misma página clicamos sobre el botón de editar con Elementor y una vez nos cargue el maquetador buscamos el widget OFF-CANVAS y lo insertamos en nuestro contenido y personalizamos:

  1. Content type: Seleccionamos la opción menú y acto seguido el menú que queremos que aparezca.
  2. Width: Definimos el ancho del menú vertical.
  3. Position: Si queremos que el menú aparezca a la izquierda o a la derecha.
  4. Appear efect: Definimos el efecto de transición con el que queramos que aparezca el menú
  5. Overlay color: Definimos el color del overlay. En el caso de no querer ningún color borramos el que viene predefinido.
  6. Button text: Definimos el texto del botón. En nuestro caso pondremos menú.
  7. Alignment: La alineación del botón. En nuestro caso lo centraremos.
  8. Size: Definimos el tamaño del botón.

Una vez definidos estos parámetros unicamente nos faltara personalizarlo a las necesidades de cada uno. Esto lo realizaremos desde el apartado estilo del mismo widget.  Verificamos que nuestro diseño se adapta a las diferentes resoluciones de pantalla y publicamos nuestro diseño personalizado y ya tenemos acabado nuestro menú vertical.

Puedes ver todo los pasos para crear un menú vertical en WordPress con Astra Pro y Ultimate addons for Elementor en el siguiente video.

Compártenos en tu red social favorita
Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on twitter
Twitter
Como añadir un timeline en Wordpress

Cómo crear un timeline en tu WordPress

Índice de contenidos Qué es un timeline Empecemos por lo más básico, ¿qué es un timeline? Un timeline es una representación visual de una serie de sucesos ordenados cronologicamente dentro de una linea de tiempo con el fin de facilitar al usuario el orden de

Crear menú vertical con Wordpress

Cómo crear un menú vertical en WordPress con Astra

Share on facebook Facebook Share on linkedin LinkedIn Share on whatsapp WhatsApp Share on twitter Twitter En ocasiones, ya sea por una cuestión de diseño o por una necesidad estructural de la web necesitamos alternativas a la típica estructura de menú. Una de esas opciones

Cómo crear perfiles de usuariosen Wordpress

Cómo crear perfiles de usuarios en WordPress

Share on facebook Facebook Share on linkedin LinkedIn Share on whatsapp WhatsApp Share on twitter Twitter Una de las situaciones más comunes en las que nos podemos encontrar teniendo una página web es que la gestión de ella misma sea llevada por un grupo de

Suscríbete a nuestro blog

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Ir arriba