Seis consejos para un mejor menú móvil Divi + plantilla de encabezado gratis descargar

✏️ 2020-05-15 | Divi, Divi | 0 Comentarios

✅ Funciona con Divi 4 (Generador de temas) ✅ Funciona con Divi 3 (Personalizador de temas) ✅ No se requieren plugins ✅ No hay JavaScript o codificación extensa
Skribent: Victor Duse
Por Victor Duse

La actualización Divi 4 con el Generador de temas ha abierto nuevas posibilidades de diseño para el menú móvil de Divi, pero con algunos trucos CSS simples puedes hacer que el menú de hamburguesas sea aún mejor. También proporcionamos una plantilla de encabezado gratuita que puede cargar en Divi Generador de temas. Probado con Divi 4.4.7.

Antes (menú predeterminado de Divi)

Antes (menú predeterminado de Divi)

Después (con los seis fragmentos CSS)

Después (con los seis fragmentos CSS)

Empezar

1. Agregue texto a la izquierda del icono de hamburguesa

2. Cambie el icono de colapso a X cuando esté abierto

3. Elimine la línea de borde superior del menú móvil

4. Centre alinear elementos de enlace del menú móvil

5. Haga que el menú móvil sea ancho completo

6. Haga que el menú móvil tenga altura completa

Todos los fragmentos de CSS en un solo lugar

BONUS: Descarga una plantilla de encabezado gratuita

Hemos creado un diseño de encabezado que puede importar en el Generador de temas (Divi Theme Builder). El diseño contiene las seis mejoras del artículo del artículo + una barra superior con iconos de redes sociales e información de contacto con el número de teléfono + dirección de correo electrónico.

Descargue la plantilla de encabezado

  1. Introduzca su dirección de correo electrónico a continuación para suscribirse a nuestro boletín de noticias. (Nunca recibirá boletines informativos duplicados.)
  2. Descargue el archivo zip que contiene la plantilla de encabezado
  3. Extraiga el archivo zip en su disco duro.
  4. Importe el archivo divimundo-menu-template.json en > el área Agregar encabezado del Generador de temas.
  5. Ajuste el diseño y utilícelo libremente. El código CSS se coloca en un módulo de código Divi en el diseño. La forma más fácil de encontrarlo es utilizando el modo Wireframes en el constructor Divi.

El boletín contiene consejos, guías y ofertas y se envía aproximadamente cada dos meses. Puede darse de baja en cualquier momento. Nunca venderemos ni compartiremos su dirección de correo electrónico. Tu dirección de correo electrónico se almacena en Mailchimp.

1. Añadir texto a la izquierda del icono del menú de hamburguesas

Aunque las tres barras que conforman el llamado menú de hamburguesas han existido durante mucho tiempo, puede ser apropiado aclarar que el ícono contiene un menú que se puede expandir.

Tenga en cuenta que el icono de hamburguesa debe estar alineado a la derecha para que el texto aparezca correctamente.

Paso a paso

  1. Inicie sesión en WordPress y vaya a Divi > Personalizador de temas > CSS adicional
  2. Pegue el siguiente código CSS:
/* Text left of hamburger in Theme Builder */

.et_mobile_nav_menu:before  {
content: 'MENÚ';
position: absolute;
right: 40px;
}

/* Text left of hamburger in Divi 3 */

#et_mobile_nav_menu:before  {
content: 'MENÚ';
position: absolute;
right: 33px;
bottom:30px;
}

3. Puede cambiar el texto MENÚ a lo que desee, pero sea breve.

4. Guarda.

El resultado:

¿Utilizando el encabezado Divi 3 y mostrando el icono de búsqueda? Para evitar la superposición de contenido, simplemente oculte el icono de búsqueda en Divi > Personalizador de temas > Cabecera y navegación.

2. Cambie el icono de la hamburguesa de colapso a X cuando esté abierto

El hecho de que el icono de hamburguesa, con sus tres líneas, se convierta en una X cuando se expande el menú móvil es estándar en la mayoría de los temas y aplicaciones de WordPress, pero, curiosamente, no en Divi. Afortunadamente, solo se requieren un par de líneas de CSS para arreglar esto y mejorar la experiencia del usuario (UX) para los visitantes de su sitio web.

Paso a paso

  1. Inicie sesión en WordPress y vaya a Divi > Personalizador de temas > CSS adicional
  2. Pegue el siguiente código CSS:
/* X icon in expanded mobile menu */

.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}

3. Solo agregue color:#000; antes de la última etiqueta } para cambiar el color del icono. Reemplace #000 (negro) con el color de su elección.

4. Guarda.

El resultado:

3. Retire la línea de borde superior del menú móvil

La línea azul en la parte superior del menú móvil es una pista clara de que su sitio web está hecho, pero si no desea que su menú se vea como Divi. Pero si no desea que su menú móvil se parezca al de los demás, puede eliminar esta línea.

Paso a paso con Divi 3

  1. Inicie sesión en WordPress y vaya a Divi > Personalizador de temas > CSS adicional
  2. Pegue el siguiente código CSS:
/* Remove the top line in the mobile menu*/

.et_mobile_menu {
border-top:0px;
}

2. Guarda.

Paso a paso con Divi 4

El fragmento de CSS anterior hará el trabajo perfecto también con los encabezados Divi 4 creados en el Generador de temas. Pero si prefiere usar Divi Builder en lugar de agregar CSS personalizado, eso es posible en el Generador de temasr.

  1. Abra el Generador de temas
  2. Abra su plantilla de Agregar encabezado
  3. Haga clic en la rueda dentada para editar el Módulo de menú
  4. Vaya a la pestaña Diseño > Enlaces al menú desplegable y cambie Color de línea del menú desplegable a rgba(0,0,0,0)
  5. Guarda

Esto le dará a la línea una opacidad cero, haciéndola invisible.

 

El resultado:

La línea superior tiende a superponerse al menú móvil cuando se utiliza el Generador de tema. Al esconder la línea, no tienes que preocuparte por eso.

4. Alinear al centro los elementos de enlace del menú móvil

Las líneas breves de texto tienden a verse mejor cuando se alinean al centro en dispositivos móviles. No es posible alinear al centro los enlaces del menú móvil con la configuración del constructor Divi o del Personalizador de temas, pero un par de líneas de CSS resolverán el problema, tanto en Divi 3 como en Divi 4.

Paso a paso

  1. Inicie sesión en WordPress y vaya a Divi > Personalizador de temas > CSS adicional
  2. Pegue el siguiente código CSS:
/* Center-align moble menu items */

/* Centrera menylänkar */

.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important;
}

2. Guarda.

 

El resultado:

5. Haga que el menú móvil sea ancho

Este es un ajuste que recomiendo que todos implementen: deje que el menú móvil llene el 100% del ancho del dispositivo en lugar de colgar como una tira delgada.

Paso a paso

  1. Inicie sesión en WordPress y vaya a Divi > Personalizador de temas > CSS adicional
  2. Pegue el siguiente código CSS:
/* Make mobile menu fullwidth */

.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

2. Guarda.

El resultado:

6. Haga que el menú móvil sea de altura completa

Una vez que tenga el menú móvil de ancho completo en su lugar, el siguiente paso es lógico: dejar que el menú móvil llene toda la altura de la pantalla móvil. También agregaremos algo de relleno (50 px) a la parte superior.

Paso a paso

  1. Inicie sesión en WordPress y vaya a Divi > Personalizador de temas > CSS adicional
  2. Pegue el siguiente código CSS:
/* Make the mobile menu full height */

.et_mobile_menu {
min-height:100vh;
padding-top:50px !important;
}

2. Guarda.

El resultado:

Usamos min-height en lugar de la height absoluta para evitar que el contenido se recorte del menú móvil.

Todos los fragmentos CSS en un solo lugar

Aquí están los seis fragmentos de CSS reunidos en un solo lugar.

Paso a paso

  1. Inicie sesión en WordPress y vaya a Divi > Personalizador de temas > CSS adicional
  2. Pegue el siguiente código CSS:
/* Text left of hamburger in the Theme Builder */
.et_mobile_nav_menu:before  {
content: 'MENÚ';
position: absolute;
right: 40px;
}

/* Text left of hamburger in Divi 3 */
#et_mobile_nav_menu:before  {
content: 'MENÚ';
position: absolute;
right: 33px;
bottom:30px;
}

/* X icon in expanded mobile menu */
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}

/* Remove the top line in the mobile menu*/
.et_mobile_menu {
border-top:0px;
}

/* Center-align moble menu items */

.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important;
}

/* Make mobile menu fullwidth */
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

/* Make the mobile menu full height */
.et_mobile_menu {
min-height:100vh;
padding-top:50px !important;
}

2. Guarda.

El resultado:

¿Sabías que el tráfico de Internet móvil superó el tráfico de Internet de las computadoras de escritorio en 2016?

Dos trucos más para un mejor menú móvil

Aquí hay dos entradas de blog de Temas Elegantes que te llevarán al menú móvil al siguiente nivel. Pruebe a fondo si los combina con los fragmentos de código CSS en este artículo, ya que podría haber conflictos de diseño.

Free Divi plugin con 20 estilos adicionales de menú de hamburguesa

Crea un menú anidado de colapso móvil con el Generador de temas (Divi Theme Builder)

 

Artículos Relacionados

0 comentarios

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.