Cómo optimizar el módulo de menú del menú Div con 5 preajuste global (descarga gratuita)

Los menús son una parte vital de cualquier sitio, por lo que es lógico pasar un tiempo y un esfuerzo adicional para asegurarse de que se muestren correctamente. En Div, podemos construir rápidamente menús personalizados utilizando el menú Div, que ofrece muchas de las opciones de estilo que necesitamos. Pero siempre ayuda a optimizar el proceso de diseño de su sitio web, pre-preparando un preset de menú global. Esto le permitirá implementar un marco de estilo de menú personalizado a través de un clic en un botón para que pueda pasar más tiempo cambiando su diseño para que coincida con su sitio web. Por ejemplo, si desea un menú centrado con un logotipo y enlaces que parezcan botones, puede usar un preajuste global para implementar ese marco único. Esto le ahorra tiempo y energía valiosos.
En este tutorial, compartiremos el preajuste global del módulo de menús que puede usar al crear divisiones personalizadas. Además de la descarga gratuita que incluye los 5 preestablecidos, le presentaremos a través del proceso de creación de cero. ¡Vamos a empezar! Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial.


Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para utilizar estos menú global preestablecidos en su encabezado global, primero debe importar la apariencia (con su preajuste) en la biblioteca de la Divica de la siguiente manera:
Vaya a Divi> Biblioteca de Divic.
Haga clic en el botón Importar / Exportar en la parte superior de la página.
Seleccione la pestaña Importar en la ventana de portabilidad emergente
Elija la apariencia del archivo JSON importado
Seleccione Impreglar Preset
Haga clic en el botón Importar
Luego vaya al generador de temas y edite el encabezado global. Agregue un módulo de menú en el que desea que sea el logotipo y use el preajuste para estilizar y colocar el menú en consecuencia. Pasemos al tutorial, ¿verdad? Qué necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.

Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Creación de 5 prestaciones globales del módulo de menú en Div # 1 – Enlaces con logotipo centrado
Para nuestro primer preajuste de estilo de menú global, diseñaremos un menú que tenga botones de igual ancho, para que el menú se vea simétrico. Incluso incluiremos estados viajeros que coincidan con el estado activo de los enlaces del botón de menú. Para crear este preajuste de menú global, agregue una fila con una columna a la sección habitual.
Luego agregue un módulo de menú en fila.

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

Luego agregue el logotipo del sitio como contenido y modo dinámicos.

En la pestaña Diseño, actualice lo siguiente:

Estilo: centrado

Fuente del menú: Poppins
Menú de la fuente de peso: en negrita

El estilo de la fuente del menú: TT
Menú Tamaño del texto: 14 PX (escritorio), 24 PX (tableta y teléfono)
Cartas de menú de espacio: 0.15em
La altura de la línea de menú: 1.3em (escritorio), 1.8em (tableta y teléfono)
Logotipo Altura máxima: 60 px
Marja: 0 px a continuación

En la pestaña Avanzada, agregaremos algunos estilos de conexiones de menú personalizadas, para que aparezcan como botones. Menú de enlaces CSS Agregue los siguientes CSS personalizados al menú de enlaces: en el escritorio … Min-Width: 10em; Pading: 1em! Importante;

Justify-Concursing: Centro;

Antecedentes: #F8F8F8;
Border-Radius: 10px;
Flotar …
Antecedentes: #333333;
Color: #ffffff;
Opacidad: 1;
Enlace de menú activo CSS Fondo: #333333;
Color: #ffffff;
Opacidad: 1;
LOGO LOGO CSS MARGEN-BOTTOM: 10px;
El resultado del estilo 1 aquí es el resultado final …
Agregando el estilo de menú 1 como un preajuste global duplicado antes de agregar el estilo de menú como un preajuste global, copie la sección completa que contiene el módulo de menú, para que podamos usar los estilos de menú para comenzar el siguiente diseño.
Cree un nuevo preajuste de los estilos actuales para agregar un preajuste global, abra la configuración del módulo de menú original y haga clic en el enlace desplegable.

Seleccione Crear un nuevo preajuste de los estilos actuales.


Dé un nombre al nuevo preajuste (“enlaces de botón centrados en el logotipo”), luego guarde el preajuste.

# 2 – Logotipo -logotipo con enlaces de barril Para crear el segundo menú global preestablecido, abra la configuración del módulo de menú duplicada. En la pestaña Diseño, actualice el estilo:
Estilo: logotipo centrado en línea

Gracias al CSS personalizado heredado del estilo de modo anterior, los enlaces de menú mantienen el diseño del botón mientras el logotipo está perfectamente en el centro. El estilo personalizado de los botones Connects permite que los enlaces de menú mantengan un hermoso diseño simétrico.

En la pestaña Avanzada, actualice el menú del logotipo CSS de la siguiente manera: Margen-Bottom: 0px;
El resultado del estilo 2 aquí es el resultado final. Ajuste el Menú El estilo 2 como un preajuste global duplicado antes de agregar el estilo del menú como un preajuste global, copie la sección completa que contiene el módulo de menú (estilo 2), para que podamos usar el Estilos de menú para comenzar el siguiente diseño.

Cree un nuevo preajuste de los estilos actuales para agregar un preajuste global, abra la configuración del módulo de menú original para el estilo 2 que hemos creado y haga clic en el enlace preestablecido.
Seleccione Crear un nuevo preajuste de los estilos actuales. Dé un nombre al preset (“Logotipo centrado en línea con enlaces de botón”) y guarde el preajuste.

# 3 – Menú espacial VW totalmente centrado con etiqueta móvil para este próximo estilo de menú, diseñaremos un menú de ancho completo sin un logotipo que tenga el texto del menú que está dimensionado y distante con una unidad de longitud VW, de modo que esté en Escala con ancho del navegador. También tendrá una etiqueta de “menú” sobre el icono de hamburguesas en el móvil.


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

El 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 Diseño, actualice el estilo:
Estilo: centrado
Luego, actualice el tamaño del texto con la siguiente unidad de longitud de VW para que el tamaño del texto sea escamas con el 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 algunos CSS personalizados al elemento antes de Psudo en la pantalla de la tableta, como sigue: antes del contenido de CSS: “Menú”; Font-Family: Poppins;
Tamaño de fuente: 12px;

Posición: Absoluto;
Arriba: 0;

Izquierda: 50%;
Transformar: traducir (-50%, -100%);
Observe que la familia de fuentes está configurada en “Poppins” para que coincida con la fuente utilizada por los enlaces del menú. Deberá actualizar esto si está utilizando otra fuente.
Nota: Esto puede o no mostrarse en el Visual Builder. Puede ser necesario cargar la página en vivo para ver el resultado. Luego agregaremos espacio adicional y enlaces de menú en el flotador. Continúe agregando el siguiente enlace de menú CSS personalizado: CSS (escritorio): Min-Width: 10em;
Justify-Concursing: Centro;
Text-Align: Center;
Relleno: .3em;
Margen de fondo: 8px;

Borde: 1px sólido transparente;
Menú CSS de enlace (coloque el cursor): color: #333;
Borde: 1px Solid #333;
Opacidad: 1;
Enlace de menú activo CSS: Color: #333;
Borde: 1px Solid #333;
Opacidad: 1;
Resultado de estilo 3
Agregando el estilo de menú 3 como una sección global duplicada antes de agregar el estilo de menú como un preajuste global, copie la sección completa que contiene el módulo de menú (estilo 3), para que podamos usar los estilos de menú para comenzar el siguiente diseño.
Cree un nuevo preajuste de los estilos actuales para agregar el estilo 3 como preajuste global, abra la configuración del módulo de menú original para el estilo 3 que creé y haga clic en el enlace preestablecido. Seleccione Crear un nuevo preajuste de los estilos actuales. Dé un nombre preestablecido (“VW de menú completamente centrado espaciado con etiqueta móvil”) y guarde el preajuste.# 4 – Menú de distancia derecha con etiqueta móvil
Para crear el preajuste global del cuarto menú, tendremos que actualizar la apariencia de la columna con un cuarto aspecto de tres cuartos. Esto imitará un aspecto 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úrese de que el menú esté en la columna derecha. Luego abra la configuración del menú y actualice las opciones de elementos para mostrar el carrito de compras y el icono de búsqueda.

En la pestaña Diseño, actualice el estilo:


Estilo: alineado a la izquierda

Actualice los siguientes estilos de enlaces y alineación de texto:

Color de enlace activo: # AC3CF7


Tamaño de texto del menú (escritorio): 14 PX

Alineación del texto: Derecho

Ahora que el ícono de la hamburguesa en el móvil estará a la derecha, tendremos que ajustar la colocación del menú en el móvil. Luego agregaremos algunos enlaces de menú CSS para garantizar que los enlaces estén especificados y colorean en el lado derecho de la columna / fila. Agregue el siguiente CSS personalizado: Antes de CSS (tableta) Contenido: “Menú”;
Posición: Absoluto;

Font-Family: Poppins;
Tamaño de fuente: 12px;
Línea de altura: 1em;
Arriba: 0px;

Derecha: 6px;
Transformación: traducido (-100%);
Enlace Menú CSS: Min-Width: 8em;
Relleno: 0.3em;
Margen-Bottom: 8px; Justify-Content: Flex-end;
El resultado del estilo 4 es el resultado final de nuestro menú alineado a la derecha. Agregué un fondo gris claro en una fila para que pueda ver mejor la alineación.
Agregando el estilo de menú 4 como una sección global duplicada antes de agregar el estilo de menú como un preajuste global, copie la sección completa que contiene el módulo de menú (estilo 4), para que podamos usar los estilos de menú para comenzar el siguiente diseño.
Cree un nuevo preajuste de los estilos actuales para agregar el estilo de 4 presentaciones, abra la configuración del módulo de menú original para el estilo 4 que creé y haga clic en el enlace preestablecido. Seleccione Crear un nuevo preajuste de los estilos actuales. Dar un nombre preset.
# 4 – Menú de la izquierda con etiqueta móvil
Para crear este cuarto menú preestablecido global, tendremos que actualizar la apariencia de la columna con un cuarto aspecto de tres cuartos. Esto imitará un aspecto 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 de texto para los enlaces de menú:
Alineación de texto: izquierda

Luego debemos ajustar la etiqueta del menú móvil para que esté por encima del barco de hamburguesas. Y al agregar la dirección “RTL” en la tableta, nos aseguraremos de que los íconos móviles también se alineen en el móvil. En la pestaña Avanzada, actualice el siguiente CSS personalizado: antes de CSS (tableta): Contenido: “Menú”;



Posición: Absoluto;

Font-Family: Poppins; Font-Size: 12px;

Línea de altura: 1em;


Arriba: 0px;

Izquierda: 6px;
Transformación: traducido (-100%);

Elemento principal (tableta): Dirección: RTL;
Enlace Menú CSS: Min-Width: 8em;
Relleno: 0.3em;
Margen de fondo: 8px;
Justify-Concursing: 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 interior de la apariencia del menú es extremadamente útil para el rápido lanzamiento del proceso creativo.Además, tener un preajuste global con estos cuadros acelerará el proceso aún más.Siéntase libre de explorar más formas de personalizar el módulo de menú y agregar un preajuste único para los siguientes proyectos.Espero tener noticias suyas en los comentarios.¡Suerte!