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 al preparar algunos ajustes preestablecidos globales del menú de antemano. Esto le permitirá implementar un marco de estilo de menú personalizado con un clic de un botón para que pueda dedicar más tiempo a ajustar 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 parecen botones, puede usar un ajuste preestablecido global para implementar ese marco con un solo clic. Esto le ahorra un tiempo y una energía valiosos.

En este tutorial, vamos a compartir 5 preajustes globales del módulo de menú que puede usar al crear sus encabezados Divi personalizados. Aparte 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 crearemos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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

1. Vaya a Divi> Biblioteca Divi.
2. Haga clic en el botón de importación / exportación 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 ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

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

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

# 1 - Enlaces de botones centrados con logotipo

Para nuestro primer ajuste preestablecido global de estilo de menú, vamos a diseñar un menú que tenga enlaces de botones de igual 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ú: 14px (escritorio), 24px (tableta y teléfono)
• Espaciado de letras del menú: 0.15em
• Altura de la línea del menú: 1.3em (escritorio), 1.8em (tableta y teléfono)

• Altura máxima del logotipo: 60 px

• Margen: 0px inferior

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

Enlace de menú CSS

Agregue el siguiente CSS personalizado al enlace del menú:

En el escritorio ...

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

En vuelo estacionario…

background: #333333;
color: #ffffff;
opacity: 1;

CSS de enlace de menú activo

background: #333333;
color: #ffffff;
opacity: 1;

Menú Logo CSS

margin-bottom: 10px;

Resultado del estilo 1

Aquí esta el resultado final…

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

Sección duplicada

Antes de agregar el estilo del menú como un ajuste preestablecido global, duplique toda la sección que contiene el módulo del menú para que podamos usar los estilos del menú para iniciar 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 Preestablecido.

Seleccione Crear nuevo ajuste preestablecido a partir de estilos actuales.

Asigne un nombre al nuevo ajuste preestablecido ("Enlaces de botones centrados con logotipo") y, a continuación, guarde el ajuste preestablecido.

# 2 - Logotipo centrado en línea con enlaces de botones

Para crear el segundo menú preestablecido global, 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:

margin-bottom: 0px;

Resultado del estilo 2

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 iniciar 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 para el estilo 2 que creamos y haga clic en el enlace desplegable Preestablecido.

Seleccione Crear nuevo ajuste preestablecido a partir de estilos actuales.

Asigne un nombre al ajuste preestablecido ("Logotipo centrado en línea con enlaces de botones") y guarde el ajuste preestablecido.

# 3 - Menú espaciado 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 tiene un texto de menú que está dimensionado y espaciado con una unidad de longitud vw para que se adapte al ancho del navegador. También tendrá una etiqueta de "menú" sobre el icono de la hamburguesa en el móvil.

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

• Ancho de la canaleta: 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

content: "MENU";
font-family: poppins;
font-size:12px;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, -100%);

Observe que la familia de fuentes está configurada en "poppins" para que coincida con la fuente que utilizan los enlaces del menú. Deberá actualizar esto si está utilizando una fuente diferente.

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

A continuación, vamos a agregar un espacio adicional y bordes de enlace de menú al pasar el mouse. Continúe agregando el siguiente CSS personalizado:

Enlace de menú CSS (escritorio):

min-width: 10em;
justify-content:center;
text-align:center;
padding: .3em;
margin-bottom: 8px;
border: 1px solid transparent;

Enlace de menú CSS (desplazarse):

color: #333;
border: 1px solid #333;
opacity:1;

CSS de enlace de menú activo:

color: #333;
border: 1px solid #333;
opacity:1;

Resultado del estilo 3

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 iniciar 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 Preestablecido.

Seleccione Crear nuevo ajuste preestablecido a partir de estilos actuales.

Asigne un nombre al ajuste preestablecido (“Menú espaciado VW centrado completo 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 0ne-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 de la izquierda.

Asegúrese 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 enlaces y alineación de texto:

• Color de 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)

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
right:6px;
transform: translateY(-100%);

Enlace de menú CSS:

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

Resultado del estilo 4

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 iniciar el siguiente 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 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 0ne-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 de la 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 se ubique 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 dispositivo móvil.

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

Antes de CSS (tableta):

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
left:6px;
transform: translateY(-100%);

Elemento principal (tableta):

direction:rtl;

Enlace de menú CSS:

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 externo 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 preajuste global con estos marcos solo acelerará el proceso aún más. No dude en explorar más formas de personalizar el módulo de menú y agregar ajustes preestablecidos únicos para sus próximos proyectos.

Espero tener noticias tuyas en los comentarios.

¡Salud!