Cómo crear un botón de menú desplegable con el módulo de menú de ancho completo de Divi

Un botón de menú desplegable puede resultar muy útil al diseñar un sitio web. Aparte del menú principal, hay áreas en un sitio que pueden requerir un menú desplegable de subelementos. Vemos que se utilizan para cosas como categorías de publicaciones de blogs, listas y entradas de formularios. Pero incluso se pueden usar para una llamada a la acción principal.

En este tutorial, le mostraremos cómo crear un botón de menú desplegable utilizando el módulo de menú de ancho completo de Divi. Para hacer esto, primero crearemos un menú en WordPress. Luego usaremos el módulo de menú de ancho completo de Divi para mostrar ese menú con estilos personalizados usando el constructor Divi y un poco de CSS personalizado. El resultado es un botón de menú desplegable que es práctico y elegante.

Empecemos.

Vistazo

Aquí hay un vistazo rápido al botón del menú desplegable que crearemos en este tutorial.

Escritorio (el menú se despliega al pasar el mouse)

Tableta y teléfono (el menú se despliega al hacer clic)

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!

Suscríbete a nuestro canal de Youtube

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder. El CSS personalizado se ha agregado a un módulo de código en una sección separada en la parte inferior del diseño.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, si aún no lo ha hecho, instale y active el tema Divi instalado (o el complemento Divi Builder si no usa el tema Divi). Usaremos el constructor Divi en la interfaz para diseñar el botón del menú desplegable.

¡Eso es todo!

Crear un menú en WordPress

Antes de comenzar a construir el menú desplegable con Divi Builder, primero debemos crear un menú de WordPress que nos gustaría usar para el módulo de menú de ancho completo. Para hacer esto, vaya al panel de WordPress y navegue hasta Apariencia> Menús. Luego cree un nuevo menú haciendo clic en el enlace crear un nuevo menú, ingresando un nombre de menú y haciendo clic en el botón "Crear menú".

Por ahora, puede crear algunos enlaces personalizados con "#" como marcador de posición de URL junto con el texto del enlace.

Estructura los elementos del menú de modo que el elemento del menú de nivel superior tenga el texto del enlace "Más información" con tres elementos del submenú debajo.

Después de eso, asegúrese de guardar el menú.

Cómo crear un botón de menú desplegable con el módulo de menú de ancho completo de Divi

Una vez creado el menú, podemos empezar a diseñar el botón del menú desplegable con Divi. Para comenzar, cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).

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

Crear el contenido simulado

Primero, agregue una fila de una columna a la sección regular predeterminada.

Agregar módulo de texto

Luego agregue un módulo de texto a la fila con el siguiente contenido:

<h1>Dropdown Menu Button</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Después de eso, actualice la configuración de diseño de la siguiente manera:

Acolchado de sección

A continuación, actualice la configuración de la sección con lo siguiente:

• Acolchado: 0px inferior

Espacio entre filas y borde

Después de actualizar el relleno de la sección, abra la configuración de la fila y dé a la fila algo de relleno y un borde ligero.

• Acolchado: 10vw arriba, 10vw abajo, 5vw a la izquierda, 5vw a la derecha
• Ancho del borde: 1 px

Creación del botón del menú desplegable

Para crear el botón del menú desplegable, usaremos un módulo de menú de ancho completo. Esto nos permitirá agregar el menú que creamos anteriormente.

Agregar el menú de ancho completo

Para crear el módulo de menú de ancho completo, agregue una nueva sección de ancho completo en la sección regular actual.

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

En la ventana emergente de configuración del menú de ancho completo (debajo del contenido), use el menú desplegable para seleccionar el menú que desea que se muestre. Este debería ser el mismo menú que creamos anteriormente llamado "menú de botón desplegable".

Luego elimine el color de fondo blanco predeterminado para el menú.

Una vez que haya agregado el menú con el módulo de menú de ancho completo, guarde la configuración. Regresaremos a este módulo en un momento para terminar el diseño. Pero por ahora, agregaremos un fondo a la sección de ancho completo.

Actualizar el diseño de la sección de ancho completo

Abra la configuración de la sección de ancho completo y actualice lo siguiente:

• Color de degradado de fondo a la izquierda: # 0047d6
• Gradiente de fondo Color derecho: # 45b2ff

• Ancho máximo: 240px
• Alineación de la sección: centro

Estoy configurando el ancho máximo de la sección en 240px porque esto coincidirá con el ancho del menú desplegable predeterminado en Divi. También tiene un buen tamaño para un botón en computadoras de escritorio y dispositivos móviles.

• Esquinas redondeadas: 5px

En la pestaña avanzada, agregue la siguiente clase CSS, desbordamiento e índice Z.

• Clase CSS: botón desplegable
• Desbordamiento horizontal: visible
• Desbordamiento vertical: visible
• Índice Z: 14

La clase CSS es necesaria para que podamos dirigir nuestro CSS externo a esta sección solo más adelante. El desbordamiento debe configurarse como visible para que podamos ver el menú desplegable. Y el índice Z ayudará a mantener el menú desplegable encima de cualquier otro contenido de la página.

Diseñar el menú Fulwidth

Ahora estamos listos para diseñar el módulo de menú de ancho total. Abra la configuración del módulo de menú de ancho completo y actualice lo siguiente:

• Hacer enlaces de menú de ancho completo: SÍ
• Color del texto del menú desplegable: #ffffff
• Color del texto del menú móvil: #ffffff
• Alineación de texto: centro
• Color de fondo del menú desplegable: # 45b2ff
• Color de la línea del menú desplegable: #ffffff
• Color de fondo del menú móvil: # 45b2ff

• Fuente del menú: Encode Sans Semi Condensed
• Peso de la fuente del menú: Semi negrita
• Color del texto del menú: #ffffff
• Tamaño del texto del menú: 16px
• Espaciado de letras del menú: 2px
• Animación del menú desplegable: expandir

Colocación del botón desplegable

Para que el botón se superponga al borde inferior, debemos agregar un margen superior negativo exactamente la mitad de la altura del botón.

• Margen: -40.5px superior

Casi ahí

Aquí está el resultado hasta ahora ...

Como puede ver, el espacio de desplazamiento no ocupa toda el área del botón todavía y el menú desplegable todavía está a la derecha. Para solucionar este problema, podemos agregar algunos CSS personalizados.

Agregar CSS personalizado

Antes de agregar el CSS personalizado, asegúrese de tener el "botón desplegable" de ID de CSS agregado a la sección de ancho completo (no al módulo).

Sin el ID de CSS, el CSS a continuación no funcionará.

Para agregar el CSS personalizado, abra la configuración de la página y pegue el siguiente código en el área de entrada de CSS personalizado.

.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav > ul {
  padding-top: 0px !important;
}

.dropdown-button .fullwidth-menu li > a {
  padding-bottom: 0px;
  line-height: 81px;
}

.dropdown-button .fullwidth-menu li li a {
  padding: 6px 0px;
  line-height: 1.6em;
}

.dropdown-button .et_mobile_menu li a:hover, .nav ul li a:hover, .dropdown-button .fullwidth-menu a:hover {
  opacity: 1;
}

.dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {
  padding: 0 0 !important;
}

.dropdown-button .fullwidth-menu li {
  display: block;
}

.dropdown-button .fullwidth-menu .menu-item-has-children > a:first-child:after {  
  right: 20px;
}

Aquí esta el resultado final

Personalización del menú en dispositivos móviles

En este momento, el menú recurrirá a la versión móvil con el icono de hamburguesa en el que se puede hacer clic que abre y cierra el menú móvil. Así es como se ve.

Para arreglar el menú para que coincida con la versión de escritorio, necesitamos agregar algo de CSS personalizado. Abra la configuración de la página y agregue el siguiente CSS personalizado justo debajo del CSS que agregamos actualmente.

@media (max-width: 981px){
  .dropdown-button .et_pb_fullwidth_menu .et_pb_row {
    width: 100%;
    }
  .dropdown-button .mobile_menu_bar {
    height: 81px;
  }
  .dropdown-button .mobile_menu_bar:before {
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #ffffff!important;
    letter-spacing: 2px !important;
    content: "Learn More";
    line-height: 81px;
    top: 0px;
}
  .dropdown-button .mobile_menu_bar:after{
    position: absolute;
    line-height: 81px;
    font-family: ETmodules;
    font-size: 20px;
    font-weight: 800;
    content: "3";
    padding-left: 20px;
    color: #ffffff;
}   
  .dropdown-button .et_first_mobile_item > a {
    display: none;
  }

}

El CSS anterior hace que el área en la que se puede hacer clic abarque todo el ancho y la altura de la sección / botón. También reemplaza el icono de la hamburguesa con algo de texto y un icono de flecha que coincide con la versión de escritorio. Esto se hace usando los pseudoelementos: before y: after. De esta manera podemos mantener la funcionalidad predeterminada del menú móvil en su lugar.

En este momento, el contenido de texto del botón desplegable móvil dice "Más información". Pero podemos cambiar esto actualizando la siguiente línea de CSS debajo del pseudoelemento: before para la barra de menú móvil:

content: "Learn More";

Por ejemplo, si quisiera que dijera "Menú", cambiaría la línea de CSS a lo siguiente:

content: "Menu";

Resultado final

Aquí esta el resultado final.

Escritorio (el menú se despliega al pasar el mouse)

Tableta y teléfono (el menú se despliega al hacer clic)

Subartículos adicionales

¡E incluso puede agregar elementos de submenú también! Simplemente actualice el menú en la página del editor de menús y estará listo.

Pensamientos finales

La creación de un botón de menú desplegable utilizando el módulo de menú de ancho completo de Divi implica algunos pasos clave. Primero, creamos el menú en WordPress que queremos incluir en el módulo. Luego usamos el constructor Divi y diseñamos el módulo de menú de ancho completo a nuestro gusto. Luego agregamos algo de CSS personalizado para pulir el diseño tanto en computadoras de escritorio como en dispositivos móviles. El resultado es un hermoso (y útil) menú desplegable que se implementa al desplazar el mouse para escritorio y al hacer clic para dispositivos móviles. Con suerte, encontrará que esto es una adición útil a su caja de herramientas de diseño.

Espero tener noticias tuyas en los comentarios.

¡Salud!