Menu Primario con Divi 5: Menú oscuro con efecto hover en los links
Esta lección no crea archivos de código. Vamos a diseñar un menú con fondo oscuro y un efecto de color cuando el visitante pasa el mouse por encima de cada link (efecto hover). Esto se hace todo desde la pestaña Diseño del módulo Menú.
1. ¿Qué vas a construir?
Fondo azul oscuro (#1e3a5f), links en blanco. Al pasar el mouse sobre un link, se pone en amarillo (#f59e0b) con una línea debajo. Elegante y moderno.
2. ¿Qué es el efecto Hover?
El hover es lo que pasa cuando el visitante pasa el mouse por encima de un elemento sin hacer clic todavía. Es como cuando un botón de ascensor se ilumina cuando lo tocás — da feedback visual de que ese elemento es clickeable.
Analogía:
Imaginá un menú de restaurante físico donde, cuando apuntás a un plato con el dedo, ese plato se ilumina. El hover es exactamente eso — una reacción visual al movimiento del mouse.
Imaginá un menú de restaurante físico donde, cuando apuntás a un plato con el dedo, ese plato se ilumina. El hover es exactamente eso — una reacción visual al movimiento del mouse.
3. Paso a paso
1
Crear la sección oscura
En el Theme Builder dentro del Encabezado Global, agregá una nueva sección.
Pestaña Contenido → Fondo → + Añadir Color De Fondo:
Pestaña Diseño → Espaciado → Relleno De: todos en
Crear la sección oscura
En el Theme Builder dentro del Encabezado Global, agregá una nueva sección.
Pestaña Contenido → Fondo → + Añadir Color De Fondo:
#1e3a5fPestaña Diseño → Espaciado → Relleno De: todos en
0 px.
2
Fila de 2 columnas 1/4 | 3/4 y agregar módulo Menú
«+» → Nueva Fila → estructura 1/4 | 3/4.
En la columna izquierda agregá un módulo Texto con el nombre del sitio, color
En la columna derecha agregá el módulo Menú y seleccioná
Fila de 2 columnas 1/4 | 3/4 y agregar módulo Menú
«+» → Nueva Fila → estructura 1/4 | 3/4.
En la columna izquierda agregá un módulo Texto con el nombre del sitio, color
#ffffff, tamaño 24px, peso 900.En la columna derecha agregá el módulo Menú y seleccioná
Mi Menu Primario.
3
Color del texto normal (Diseño → Texto Del Menú)
Módulo Menú → pestaña Diseño → expandí Texto Del Menú:
Color del texto normal (Diseño → Texto Del Menú)
Módulo Menú → pestaña Diseño → expandí Texto Del Menú:
- Color del texto:
#ffffff(blanco) - Tamaño:
15px - Peso:
600
4
Color del texto al hacer hover (Diseño → Texto Del Menú)
En el mismo bloque Texto Del Menú, buscá el campo Color De Hover Del Enlace (o «Color del enlace al pasar el cursor»).
Escribí:
Color del texto al hacer hover (Diseño → Texto Del Menú)
En el mismo bloque Texto Del Menú, buscá el campo Color De Hover Del Enlace (o «Color del enlace al pasar el cursor»).
Escribí:
#f59e0b (amarillo/ámbar — el color de acento del sitio).
Ahora, cada vez que el visitante pase el mouse sobre un link, ese link se pondrá amarillo.
5
Agregar línea debajo del link al hacer hover (Diseño → Texto Del Menú)
En el mismo bloque, buscá Decoración del Texto al Pasar el Cursor (o similar).
Si está disponible, elegí Subrayado.
Esto agrega una línea debajo del link cuando el visitante lo pasa con el mouse — un detalle de diseño muy profesional.
Agregar línea debajo del link al hacer hover (Diseño → Texto Del Menú)
En el mismo bloque, buscá Decoración del Texto al Pasar el Cursor (o similar).
Si está disponible, elegí Subrayado.
Esto agrega una línea debajo del link cuando el visitante lo pasa con el mouse — un detalle de diseño muy profesional.
6
Ajustar el espaciado entre links (Diseño → Diseño)
Módulo Menú → pestaña Diseño → expandí Diseño:
Ajustar el espaciado entre links (Diseño → Diseño)
Módulo Menú → pestaña Diseño → expandí Diseño:
- Espaciado Horizontal:
20px(más espacio entre los links) - Justificar Contenido: Fin (alinear los links a la derecha)
7
Guardar
Guardar → Salir → Guardar Cambios.
Guardar
Guardar → Salir → Guardar Cambios.
4. ¿Por qué elegir un menú oscuro?
| Menú blanco | Menú oscuro |
|---|---|
| Se mezcla con el contenido claro | Contrasta fuerte, se destaca siempre |
| Sensación: amigable, moderna | Sensación: elegante, seria, premium |
| Ideal para: cursos, blogs | Ideal para: escuelas, corporativos |
5. Vista previa
Estado normal:
MiLMS
InicioCursosBlogContactanos
Al pasar el mouse sobre «Cursos»:
MiLMS
Inicio
Cursos
Blog
Contactanos
Cursos
Blog
Contactanos
Verificación:
- El fondo del menú es azul oscuro.
- Los links son blancos en estado normal.
- Al pasar el mouse sobre un link, ese link se pone amarillo.
