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 práctico y elegante.
Vamos a empezar.
vista
Aquí hay una descripción general del botón del menú desplegable que integraremos en este tutorial.
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 está utilizando el Tema divi). Usaremos el constructor Divi al principio para diseñar el botón del menú desplegable.
Eso es !
Crea un menú en WordPress
Antes de comenzar a crear 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 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ú".
Por ahora, puede crear 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 enlace "Más información" con tres elementos del submenú.
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 Divi
Una vez creado el menú, podemos empezar a diseñar el botón del menú desplegable con Divi. Para iniciar el proyecto, 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.
Crea contenido falso
Primero, agregue una fila de una columna a la sección estándar predeterminada.
Añadir un módulo de texto.
Luego agregue un módulo de texto a la línea con el siguiente contenido:
Menú Divi Tu contenido va aquí. Edite o elimine este texto en línea o en el módulo Configuración de contenido. También puede aplicar estilo a todos los aspectos de este contenido en la configuración de diseño del módulo e incluso aplicar CSS personalizado a este texto en la configuración avanzada del módulo.
Luego actualice los parámetros de diseño de la siguiente manera:
Sección de relleno
Luego, actualice la configuración de la sección con los siguientes elementos:
- Relleno: 0px abajo
Interlineado y borde
Después de actualizar el relleno de la sección, abra la configuración de línea y asígnele un relleno y un borde leve.
- Tapicería: 10vw en la parte superior, 10vw en la parte inferior, 5vw a la izquierda, 5vw a la derecha
- Ancho del borde: 1px
Crear el botón de 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ú creado 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 estándar actual.
Luego agregue un módulo de menú de ancho completo a la línea.
En la ventana emergente de configuración del menú de ancho completo (debajo de Contenido), use el menú desplegable para seleccionar el menú que desea mostrar. 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. Volveremos 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.
Actualice 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 izquierdo: # 0047d6
- Gradiente de fondo derecho Color: # 45b2ff
- Ancho máximo: 240px
- Alineación de sección: centro
Establecí el ancho máximo de la sección en 240px, ya que coincide 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 Avanzado, 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 más adelante. El desbordamiento debe configurarse como visible para que podamos ver el menú desplegable. Y el índice Z lo ayudará a mantener el menú desplegable sobre el resto del contenido de la página.
Diseña el menú de ancho completo
Ahora estamos listos para diseñar el módulo de menú Fulwidth. Abra la configuración del módulo de menú de ancho completo y actualice lo siguiente:
- Crear enlaces de menú de ancho completo: SÍ
- Color del texto desplegable: #ffffff
- Color del texto del menú móvil: #ffffff
- Alineación del texto: centro.
- Color de fondo del menú desplegable: # 45b2ff
- Color de la línea del menú desplegable: #ffffff
- Color de fondo del menú: #45b2ff
- Menú de fuente: codificar sin semi condensado
- Peso del menú de fuentes: Semi negrita
- Color del texto del menú: #ffffff
- Tamaño del texto del menú: 16px
- Espaciado de menú: 2px
- Animación del menú desplegable: Expandir
Coloque el botón desplegable
Para que el botón se superponga al borde inferior, necesitamos agregar un margen superior negativo que sea exactamente la mitad de la altura del botón.
- Margen: -40.5px alto
Como puede ver, el espacio de desplazamiento aún no ocupa toda el área del botón y el menú desplegable todavía está a la derecha. Para resolver este problema, podemos agregar CSS personalizado.
Agregar CSS personalizado
Antes de agregar el CSS personalizado, asegúrese de agregar el ID de CSS "desplegable" 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 cuadro 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; altura de línea: 81px; } .dropdown-button .fullwidth-menu li li a {padding: 6px 0px; altura de línea: 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í está el resultado final.
Consideraciones 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 integrar 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 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 implementado para desplazarse por el escritorio y hacer clic en el dispositivo móvil. Espero que encuentre esto una adición útil a su kit de herramientas de diseño.
