Menú Primario básico con Divi 5: logo a la izquierda, links a la derecha
Esta lección no crea archivos de código. Vamos a construir el menú más clásico y profesional: logo a la izquierda, links de navegación a la derecha. Es el diseño que usan el 80% de los sitios profesionales del mundo.
1. ¿Qué vas a construir?
Fondo blanco, logo a la izquierda en azul oscuro, links en gris oscuro a la derecha. Limpio, profesional y fácil de leer.
2. Cómo funciona el módulo Menú en Divi 5
El módulo Menú de Divi 5 toma los links que ya creaste en Apariencia → Menús de WordPress y los muestra visualmente en el sitio. Vos no escribís los links de nuevo — solo configurás cómo se ven.
| ¿Dónde se crean los links? | ¿Dónde se configura el diseño? |
|---|---|
| WordPress → Apariencia → Menús | Divi Theme Builder → Módulo Menú |
3. Paso a paso
1
Crear la sección del menú
En el Theme Builder, dentro del Encabezado Global, agregá una nueva sección blanca debajo de la topbar.
Pestaña Diseño → Espaciado → Relleno De: todos los valores en
Crear la sección del menú
En el Theme Builder, dentro del Encabezado Global, agregá una nueva sección blanca debajo de la topbar.
Pestaña Diseño → Espaciado → Relleno De: todos los valores en
0 px.
2
Insertar una fila de 2 columnas desiguales
Dentro de la sección hacé clic en «+» → pestaña Nueva Fila.
Elegí la estructura 1/4 | 3/4 (una columna angosta a la izquierda para el logo, una ancha a la derecha para el menú).
Insertar una fila de 2 columnas desiguales
Dentro de la sección hacé clic en «+» → pestaña Nueva Fila.
Elegí la estructura 1/4 | 3/4 (una columna angosta a la izquierda para el logo, una ancha a la derecha para el menú).
25%
Logo
Logo
75%
Menú de navegación
Menú de navegación
3
Columna izquierda: texto del logo
Hacé clic en «+» de la columna izquierda → elegí módulo Texto.
Escribí el nombre de tu sitio, por ejemplo:
En pestaña Diseño → Texto:
Columna izquierda: texto del logo
Hacé clic en «+» de la columna izquierda → elegí módulo Texto.
Escribí el nombre de tu sitio, por ejemplo:
MiLMSEn pestaña Diseño → Texto:
- Color:
#1e3a5f - Tamaño:
24px - Peso:
900(extra negrita)
Si ya tenés un logo como imagen, usá el módulo Imagen en lugar de Texto.
4
Columna derecha: módulo Menú
Hacé clic en «+» de la columna derecha → buscá
Pestaña Contenido:
Columna derecha: módulo Menú
Hacé clic en «+» de la columna derecha → buscá
me → elegí Menú.Pestaña Contenido:
- Menú: elegí
Mi Menu Primarioen el desplegable
5
Estilo del texto del menú (Diseño → Texto Del Menú)
Pestaña Diseño → expandí Texto Del Menú:
Estilo del texto del menú (Diseño → Texto Del Menú)
Pestaña Diseño → expandí Texto Del Menú:
- Color:
#334155 - Tamaño:
15px - Peso:
600 - Espaciado entre letras:
0.3px
6
Alinear el menú a la derecha (Diseño → Diseño)
Pestaña Diseño → expandí Diseño → buscá Justificar Contenido.
Elegí la opción Fin (alinea todo a la derecha).
Alinear el menú a la derecha (Diseño → Diseño)
Pestaña Diseño → expandí Diseño → buscá Justificar Contenido.
Elegí la opción Fin (alinea todo a la derecha).
7
Guardar
Guardar → Salir → Guardar Cambios en el Theme Builder.
Guardar
Guardar → Salir → Guardar Cambios en el Theme Builder.
4. Vista previa
Resultado esperado:
MiLMS
InicioCursosBlogContactanos
Logo a la izquierda, links de navegación a la derecha. Fondo blanco, sombra suave. El diseño de menú más usado en todo el mundo.
Verificación:
- El logo aparece a la izquierda.
- Los links Inicio, Cursos, Blog, Contactanos aparecen a la derecha.
- Hacé clic en cada link y verificá que lleva a la página correcta.
