Cómo optimizar el módulo de menú de Divi con 5 preajustes globales (descarga GRATUITA)

Los menús son una parte vital de cualquier sitio, por lo que tiene sentido dedicar un poco más de tiempo y esfuerzo para asegurarse de que se muestren correctamente. En Divi , podemos crear menús personalizados rápidamente usando el módulo Menú de Divi, que proporciona muchas de las opciones de estilo que necesitamos. Pero siempre ayuda a agilizar el proceso de diseño del encabezado de su sitio web preparando algunos ajustes preestablecidos globales de menú de antemano. Esto le permitirá implementar un marco de estilo de menú personalizado con un clic de un botón para que pueda pasar más tiempo ajustando el diseño para que coincida con la marca de su sitio web. Por ejemplo, si desea un menú centrado con un logotipo y enlaces que parezcan botones, puede usar un ajuste preestablecido global para implementar ese marco con un solo clic. Esto le ahorra tiempo y energía valiosos.

En este tutorial, vamos a compartir 5 ajustes preestablecidos globales de módulos de menú que puede usar al crear sus encabezados Divi personalizados. Además de la descarga gratuita que incluye los 5 ajustes preestablecidos, lo guiaremos a través del proceso de creación de esos ajustes preestablecidos desde cero.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Para usar estos ajustes preestablecidos globales de menú en su encabezado global, primero debe importar el diseño (con sus ajustes preestablecidos) a la Biblioteca Divi de la siguiente manera:

  1. Ve a Divi > Biblioteca Divi.
  2. Haga clic en el botón importar/exportar en la parte superior de la página.
  3. Seleccione la pestaña Importar en la ventana emergente de portabilidad
  4. Elija el archivo JSON de diseño que se va a importar
  5. Seleccione Importar ajustes preestablecidos
  6. Haga clic en el botón Importar

Luego vaya al generador de temas y edite el encabezado global. Agregue un módulo de menú donde desee que esté el logotipo y use los ajustes preestablecidos para diseñar y colocar el menú en consecuencia.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo has hecho, instala y activa el tema Divi .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
  3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Creación de 5 preajustes globales del módulo de menú en Divi

Para nuestro primer ajuste preestablecido global de estilo de menú, vamos a diseñar un menú que tenga enlaces de botones del mismo ancho para que el menú se vea simétrico. Incluso incluiremos estados de desplazamiento que coincidan con el estado activo de los enlaces de los botones de menú.

Para crear este primer ajuste preestablecido global de menú, agregue una fila de una columna a la sección normal.

Luego agregue un módulo de menú a la fila.

Abra la configuración del menú y agregue un menú al módulo.

Luego agregue el logotipo del sitio como contenido dinámico al módulo también.

En la pestaña de diseño, actualice lo siguiente:

  • Estilo: Centrado

  • Fuente del menú: Poppins
  • Peso de la fuente del menú: Negrita
  • Estilo de fuente del menú: TT
  • Tamaño del texto del menú: 14 px (escritorio), 24 px (tableta y teléfono)
  • Espaciado entre letras del menú: 0,15 em
  • Altura de la línea del menú: 1,3 em (escritorio), 1,8 em (tableta y teléfono)

  • Altura máxima del logotipo: 60 px

  • Margen: 0px inferior

En la pestaña Avanzado, agregaremos algunos estilos de enlace de menú personalizados para que aparezcan como botones.

Enlace de menú CSS

Agregue el siguiente CSS personalizado al enlace del menú:

En el escritorio…

01
02
03
04
05
min-width: 10em;
padding: 1em !important;
justify-content:center;
background: #f8f8f8;
border-radius: 10px;

En vuelo estacionario…

01
02
03
background: #333333;
color: #ffffff;
opacity: 1;

Enlace de menú activo CSS

01
02
03
background: #333333;
color: #ffffff;
opacity: 1;

CSS del logotipo del menú

01
margin-bottom: 10px;

Estilo 1 Resultado

Aquí esta el resultado final…

Adición del estilo de menú 1 como preajuste global

Sección duplicada

Antes de agregar el estilo de menú como un ajuste preestablecido global, duplique toda la sección que contiene el módulo de menú para que podamos usar los estilos del menú para impulsar el siguiente diseño.

Crear un nuevo ajuste preestablecido a partir de los estilos actuales

Para agregar el ajuste preestablecido global, abra la configuración del módulo de menú original que creamos y haga clic en el enlace desplegable Ajuste preestablecido.

Seleccione Crear nuevo ajuste preestablecido a partir de estilos actuales.

Asigne un nombre al nuevo ajuste preestablecido («Enlaces de botones centrados con logotipo»), luego guarde el ajuste preestablecido.

#2 – Logotipo centrado en línea con enlaces de botón

Para crear el segundo ajuste preestablecido global del menú, abra la configuración del módulo de menú duplicado del diseño anterior.

En la pestaña de diseño, actualice el estilo:

  • Estilo: Logotipo centrado en línea

Debido al CSS personalizado heredado del estilo del módulo anterior, los enlaces del menú mantienen el diseño del botón mientras que el logotipo descansa perfectamente en el centro. El estilo de enlace de botón personalizado permite que los enlaces de menú mantengan un bonito diseño simétrico.

En la pestaña Avanzado, actualice el CSS del logotipo del menú de la siguiente manera:

01
margin-bottom: 0px;

Estilo 2 Resultado

Aquí esta el resultado final.

Adición del estilo de menú 2 como preajuste global

Sección duplicada

Antes de agregar el estilo de menú como un ajuste preestablecido global, duplique toda la sección que contiene el módulo de menú (estilo 2) para que podamos usar los estilos del menú para impulsar el próximo diseño.

Crear un nuevo ajuste preestablecido a partir de los estilos actuales

Para agregar el ajuste preestablecido global, abra la configuración del módulo de menú original para el estilo 2 que creamos y haga clic en el enlace desplegable Ajuste preestablecido.

Seleccione Crear nuevo ajuste preestablecido a partir de estilos actuales.

Asigne un nombre al preajuste («Logotipo centrado en línea con enlaces de botones») y guarde el preajuste.

#3 – Menú espaciado de VW totalmente centrado con etiqueta móvil

Para el siguiente estilo de menú, vamos a diseñar un menú centrado de ancho completo sin un logotipo que tenga un texto de menú de tamaño y espaciado con una unidad de longitud vw para que se escale con el ancho del navegador. También tendrá una etiqueta de «menú» sobre el icono de la hamburguesa en el móvil.

Para crear el preajuste global del tercer menú, necesitaremos una fila de ancho completo. Abra la configuración de la fila que contiene el menú duplicado y actualice lo siguiente:

  • Ancho del canalón: 1
  • Ancho: 100%
  • Ancho máximo: 100%

Abra la configuración del módulo de menú y elimine el logotipo.

En la pestaña de diseño, actualice el estilo:

  • Estilo: Centrado

Luego, actualice el tamaño del texto con la siguiente unidad de longitud VW para que el tamaño del texto se adapte al ancho del navegador.

  • Tamaño del texto del menú: 1.5vw (escritorio)

Para crear una etiqueta de «menú» para el menú móvil, podemos agregar algo de CSS personalizado al elemento Before Psuedo en la pantalla de la tableta de la siguiente manera:

Antes de CSS

01
02
03
04
05
06
07
content: "MENU";
font-family: poppins;
font-size:12px;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, -100%);

Tenga en cuenta que la familia de fuentes se establece en «poppins» para que coincida con la fuente utilizada por los enlaces del menú. Deberá actualizar esto si está utilizando una fuente diferente.

NOTA: Esto puede mostrarse o no en el constructor visual. Es posible que deba cargar la página en vivo para ver el resultado.

A continuación, agregaremos algunos espacios adicionales y bordes de enlace de menú al pasar el mouse. Continúe agregando el siguiente CSS personalizado:

Enlace de menú CSS (escritorio):

01
02
03
04
05
06
min-width: 10em;
justify-content:center;
text-align:center;
padding: .3em;
margin-bottom: 8px;
border: 1px solid transparent;

Enlace de menú CSS (desplazamiento):

01
02
03
color: #333;
border: 1px solid #333;
opacity:1;

Enlace de menú activo CSS:

01
02
03
color: #333;
border: 1px solid #333;
opacity:1;

Estilo 3 Resultado

Adición del estilo de menú 3 como preajuste global

Sección duplicada

Antes de agregar el estilo de menú como un ajuste preestablecido global, duplique toda la sección que contiene el módulo de menú (estilo 3) para que podamos usar los estilos del menú para impulsar el siguiente diseño.

Crear un nuevo ajuste preestablecido a partir de los estilos actuales

Para agregar el estilo 3 como un ajuste preestablecido global, abra la configuración del módulo de menú original para el estilo 3 que creamos y haga clic en el enlace desplegable Ajuste preestablecido.

Seleccione Crear nuevo ajuste preestablecido a partir de estilos actuales.

Asigne un nombre al ajuste preestablecido («Menú espaciado de VW completamente centrado con etiqueta móvil») y guarde el ajuste preestablecido.

#4 – Menú espaciado a la derecha con etiqueta móvil

Para crear el ajuste preestablecido global del cuarto menú, necesitaremos actualizar el diseño de la columna de la fila con un diseño de 0un cuarto tres cuartos. Esto imitará un diseño de encabezado personalizado que incluirá un módulo de menú a la derecha y un lugar separado para una imagen de logotipo en la columna izquierda.

Asegúrate de que el menú esté en la columna de la derecha. Luego abra la configuración del menú y actualice las opciones de Elementos para mostrar el ícono del carrito de compras y el ícono de búsqueda.

En la pestaña de diseño, actualice el estilo:

  • Estilo: Alineado a la izquierda

A continuación, actualice los siguientes estilos de enlace y alineación de texto:

  • Color del enlace activo: #ac3cf7
  • Tamaño del texto del menú (escritorio): 14px
  • Alineación de texto: Derecha

Ahora que nuestro icono de hamburguesa en el móvil estará en el lado derecho, necesitaremos ajustar la ubicación de la etiqueta del menú en el móvil. Luego, agregaremos un CSS de enlace de menú para asegurarnos de que los enlaces estén espaciados y alineados en el lado derecho de la columna/fila.

Agregue el siguiente CSS personalizado:

Antes de CSS (tableta)

01
02
03
04
05
06
07
08
content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
right:6px;
transform: translateY(-100%);

Enlace de menú CSS:

01
02
03
04
min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Estilo 4 Resultado

Aquí está el resultado final de nuestro menú alineado a la derecha. Agregué un fondo gris claro a la fila para que pueda ver mejor la alineación.

Adición del estilo de menú 4 como preajuste global

Sección duplicada

Antes de agregar el estilo de menú como un ajuste preestablecido global, duplique toda la sección que contiene el módulo de menú (estilo 4) para que podamos usar los estilos del menú para impulsar el próximo diseño.

Crear un nuevo ajuste preestablecido a partir de los estilos actuales

Para agregar el estilo 4 como un ajuste preestablecido global, abra la configuración del módulo de menú original para el estilo 4 que creamos y haga clic en el enlace desplegable Ajuste preestablecido.

Seleccione Crear nuevo ajuste preestablecido a partir de estilos actuales.

Asigne un nombre al ajuste preestablecido («Menú espaciado a la derecha con etiqueta móvil») y guarde el ajuste preestablecido.

#4 – Menú espaciado a la izquierda con etiqueta móvil

Para crear este ajuste preestablecido global del cuarto menú, necesitaremos actualizar el diseño de la columna de la fila con un diseño de 0un cuarto tres cuartos. Esto imitará un diseño de encabezado personalizado que incluirá un módulo de menú a la izquierda y un lugar separado para una imagen de logotipo (o CTA) en la columna derecha.

Abra la configuración del menú y actualice la alineación del texto para los enlaces del menú:

  • Alineación de texto: Izquierda

Luego, debemos ajustar la etiqueta del menú móvil para que quede sobre el navegador de hamburguesas en el lado izquierdo. Y al agregar la «dirección: rtl» en la tableta, nos aseguraremos de que los íconos móviles también se alineen a la izquierda en el móvil.

En la pestaña Avanzado, actualice el siguiente CSS personalizado:

Antes de CSS (tableta):

01
02
03
04
05
06
07
08
content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
left:6px;
transform: translateY(-100%);

Elemento principal (tableta):

01
direction:rtl;

Enlace de menú CSS:

01
02
03
04
min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Aquí esta el resultado final.

Resultados finales

Pensamientos finales

Aunque el estilo exterior de estos módulos de menú es básico, el diseño del marco interno del diseño del menú es extremadamente útil para impulsar el proceso creativo. Además, tener un ajuste preestablecido global con estos marcos solo acelerará aún más el proceso. Siéntase libre de explorar más formas de personalizar el módulo de menú y agregar ajustes preestablecidos únicos para sus próximos proyectos.

Espero escuchar de usted en los comentarios.

¡Salud!