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

Un botón de menú desplegable realmente puede ser útil al diseñar un sitio web. Aparte del menú principal, hay áreas en un sitio que pueden requerir un menú desplegable de elementos secundarios. Vemos que se usan para cosas como categorías de publicaciones de blog, listas y entradas de formulario. 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 usando Divi y su módulo de menú de ancho completo. Para ello, 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 a la vez práctico y elegante.

Empecemos.

Vistazo

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

Escritorio (menú desplegable al pasar el mouse)

Tableta y teléfono (menú desplegable al hacer clic)

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!

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 a Divi Builder. El CSS personalizado se agregó 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 parte delantera para diseñar el botón del menú desplegable.

¡Eso es todo!

Creación de 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 tablero de WordPress y navegue a 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.

Estructure 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 que se crea el menú, podemos comenzar 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 la parte delantera (constructor visual).

Después de eso, tendrás 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:

01
02
<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:

Relleno de sección

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

  • Relleno: 0px inferior

Espaciado de filas y borde

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

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

Crear el botón del menú desplegable

Para crear el botón del menú desplegable, utilizaremos 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 debajo de la sección normal 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 (bajo 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. Vamos a volver 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:

  • Degradado de fondo Color izquierdo: #0047d6
  • Degradado de fondo Color derecho: #45b2ff

  • Ancho máximo: 240 px
  • Sección Alineación: centro

Estoy configurando el ancho máximo de la sección en 240 px porque 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 orientar 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 que el menú desplegable se mantenga al tanto de cualquier otro contenido de la página.

Diseña el menú de ancho completo

Ahora estamos listos para diseñar el módulo de menú de ancho completo. 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 entre 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 a la mitad de la altura del botón.

  • Margen: -40.5px arriba

Casi llegamos

Aquí está el resultado hasta ahora…

Como puede ver, el espacio flotante aún no ocupa toda el área del botón y el menú desplegable aún está a la derecha. Para solucionar esto, 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 siguiente 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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
.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 el móvil

En este momento, el menú recurrirá a la versión móvil con el ícono de hamburguesa en el que se puede hacer clic que alterna el menú móvil abierto y cerrado. Esto es lo que parece.

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@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 el ancho y el alto completos de la sección/botón. También reemplaza el ícono de la hamburguesa con algo de texto y un ícono de flecha que coincide con la versión de escritorio. Esto se hace usando los pseudo-elementos :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 pseudo-elemento :before para la barra de menú móvil:

01
content: "Learn More";

Por ejemplo, si quisiera que leyera «Menú», cambiaría la línea de CSS a lo siguiente:

01
content: "Menu";

Resultado final

Aquí esta el resultado final.

Escritorio (menú desplegable al pasar el mouse)

Tableta y teléfono (menú desplegable al hacer clic)

Subelementos adicionales

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

Pensamientos finales

La creación de un botón de menú desplegable con 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 para diseñar el módulo de menú de ancho completo a nuestro gusto. Luego agregamos un poco de CSS personalizado para pulir el diseño tanto en el escritorio como en el móvil. El resultado es un hermoso (y útil) menú desplegable que se despliega al pasar el mouse por encima para el escritorio y al hacer clic en el móvil. Con suerte, encontrará que esto es una adición útil a su caja de herramientas de diseño.

Espero escuchar de usted en los comentarios.

¡Salud!