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. Además 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 formularios. Pero incluso pueden usarse 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, utilizaremos el módulo de menú de ancho completo de Divi para mostrar ese menú con estilos personalizados utilizando el generador de 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)

botón de menú desplegable divi

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

botón de menú desplegable divi

Descargar 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 nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

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 Divi Theme instalado (o el complemento Divi Builder si no usa el tema Divi). Usaremos el generador Divi en la parte frontal para diseñar el botón del menú desplegable.

¡Eso es!

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 control de WordPress y vaya 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ú".

botón de menú desplegable divi

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ú para que el elemento del menú de nivel superior tenga el texto del enlace "Más información" con tres elementos del submenú debajo.

botón de menú desplegable divi

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 el front-end (visual builder).

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:

Dropdown Menu Button

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.

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:

  • Relleno: 0px inferior

botón de menú desplegable divi

Espaciado de fila y borde

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

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

botón de menú desplegable divi

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 en la sección regular actual.

botón de menú desplegable divi

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

botón de menú desplegable divi

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 mostrar. Este debería ser el mismo menú que creamos anteriormente llamado "menú del botón desplegable".

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

botón de menú desplegable divi

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:

  • Gradiente de fondo Color izquierdo: # 0047d6
  • Gradiente de fondo Color correcto: # 45b2ff

botón de menú desplegable divi

  • Ancho Máx .: 240px
  • Alineación de sección: centro

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

botón de menú desplegable divi

  • Esquinas redondeadas: 5px

botón de menú desplegable divi

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 establecerse en visible para que podamos ver el menú desplegable. Y el Índice Z ayudará a mantener el menú desplegable por encima de cualquier otro contenido de la página.

botón de menú desplegable divi

Diseñar 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 de texto del menú móvil: #ffffff
  • Alineación de texto: centro
  • Color de fondo del menú desplegable: # 45b2ff
  • Color de línea del menú desplegable: #ffffff
  • Color de fondo del menú móvil: # 45b2ff

botón de menú desplegable divi

  • Fuente del menú: Encode Sans Semi Condensed
  • Peso de 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

botón de menú desplegable divi

Colocar el botón desplegable

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

  • Margen: -40.5px arriba

botón de menú desplegable divi

Casi ahí

Aquí está el resultado hasta ahora …

botón de menú desplegable divi

Como puede ver, el espacio de desplazamiento todavía no ocupa el área completa del botón y el menú desplegable todavía 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 ID de CSS "botón desplegable" agregado a la sección de ancho completo (no el módulo).

Sin la ID de CSS, la 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 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;
}

botón de menú desplegable divi

Aquí esta el resultado final

botón de menú desplegable divi

Personalizar el menú en el móvil

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 alterna entre abrir y cerrar el menú móvil. Así es como se ve.

botón de menú desplegable divi

Para arreglar el menú para que coincida con la versión de escritorio, necesitamos agregar algunos CSS personalizados. 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 ícono de hamburguesa con 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 forma, mantenemos la funcionalidad predeterminada del menú móvil en su lugar.

En este momento, el contenido de texto para el 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:

content: "Learn More";

Por ejemplo, si desea que lea "Menú", cambiaría la línea de CSS a la siguiente:

content: "Menu";

botón de menú desplegable divi

Resultado final

Aquí esta el resultado final.

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

botón de menú desplegable divi

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

botón de menú desplegable divi

Subelementos adicionales

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

botón de menú desplegable divi

Pensamientos finales

Crear 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 incorporar al módulo. Luego usamos el constructor Divi y diseñamos el módulo de menú de ancho completo a nuestro gusto. Luego agregamos algunos CSS personalizados para pulir el diseño tanto en el escritorio como en el móvil. El resultado es un menú desplegable hermoso (y útil) que se implementa al pasar el mouse por el 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 suyas en los comentarios.

¡Salud!