Crear un Menu primario con DIVI 5 para WordPress
¿De qué trata esta lección?
Vamos a construir el menú principal del sitio dentro del Encabezado Global del Theme Builder. Va a tener el logo a la izquierda, los links de navegación en el centro y un botón dorado «Inscribite» a la derecha. Además lo vamos a hacer sticky — que se quede fijo arriba mientras el visitante hace scroll.
Vamos a construir el menú principal del sitio dentro del Encabezado Global del Theme Builder. Va a tener el logo a la izquierda, los links de navegación en el centro y un botón dorado «Inscribite» a la derecha. Además lo vamos a hacer sticky — que se quede fijo arriba mientras el visitante hace scroll.
¿Cómo va a quedar el menú al final?
Antes de tocar nada en Divi, mirá el resultado que vamos a lograr:
▶ Vista previa — Header completo (topbar + menú principal)
▶ Vista previa — Estado STICKY (cuando el visitante hace scroll)
⬆ Línea dorada arriba y sombra más marcada — así se ve el menú en modo sticky
¿Qué es un menú sticky y por qué importa?
Analogía: Imaginá que estás en un supermercado gigante. Un menú sticky es como si el cartel con las secciones ("Frutas", "Lácteos", "Carnes") te siguiera por todos los pasillos. No importa cuánto camines, siempre lo tenés a la vista. En un sitio web funciona igual — el visitante siempre puede navegar sin tener que volver arriba.
Paso 1 — Crear el Menú en WordPress primero
El módulo Menú de Divi no crea los links — toma un menú que ya tenés en WordPress. Hacé esto antes de abrir Divi:
- Andá a Apariencia → Menús
- Hacé clic en Crear nuevo menú
- Dale el nombre:
Menú Principal - Agregá las páginas: Inicio, Cursos, Blog, Contacto
- Marcá la casilla Menú principal en "Posición del menú"
- Guardá
Importante: En el selector del módulo Menú de Divi 5 vas a ver el nombre que le diste aquí. Si no tenés ningún menú creado, el selector aparece vacío y el módulo no muestra nada.
Paso 2 — Abrir el Encabezado Global y agregar nueva Sección
Andá a Divi → Theme Builder y abrí el Encabezado Global. Ya tenés la Sección 1 que es la topbar. Hacé clic en el ➕ verde debajo para agregar la Sección 2 — esta va a ser el menú principal.
Paso 3 — Insertar la Fila con 3 columnas
Dentro de la nueva Sección, hacé clic en el ➕ azul. Se abre el modal Insertar Fila. Elegí 3 columnas iguales (primer grupo "Flex — Columnas Iguales", tercer ícono).
Así va a quedar la distribución:
Logo
Botón CTA
¿Por qué 3 columnas y no 2?
Con 3 columnas el menú queda perfectamente centrado. Con 2, el menú se correría hacia un lado y el diseño quedaría asimétrico.
Con 3 columnas el menú queda perfectamente centrado. Con 2, el menú se correría hacia un lado y el diseño quedaría asimétrico.
Paso 4 — Logo en la columna izquierda (módulo Imagen)
En la columna izquierda insertá el módulo Imagen:
| Pestaña | Opción | Valor |
|---|---|---|
| Contenido | Imagen | Subí tu logo (PNG con fondo transparente) |
| Contenido → Enlace | URL | https://tusitio.com (lleva al inicio) |
| Diseño → Tamaño | Ancho máximo | 160px |
| Diseño → Alineación | Alinear imagen | Izquierda |
Paso 5 — Módulo Menú en la columna del centro
En la columna central insertá el módulo Menú:
Pestaña Contenido
| Opción | Qué hace | Qué configurar |
|---|---|---|
| Menú | Elige qué menú de WordPress mostrar | Seleccioná "Menú Principal" |
| Logo | Logo dentro del módulo menú | Dejalo vacío |
| Elementos | Búsqueda y carrito | Ocultá ambos |
| Fondo | Fondo del módulo | Transparente |
Pestaña Diseño
| Opción | Valor |
|---|---|
| Estilo Del Menú | Centrado |
| Dirección Del Menú Desplegable | Hacia Abajo |
| Texto Del Menú → Color | #0d1b2a |
| Texto Del Menú → Tamaño | 15px |
| Texto Del Menú → Peso | 600 (Semi-Bold) |
| Menú Desplegable → Fondo | #0d1b2a |
| Menú Desplegable → Color Texto | #ffffff |
Paso 6 — Botón CTA dorado en la columna derecha
En la columna derecha insertá el módulo Botón. Así se ve la diferencia:
Pestaña Contenido
| Campo | Valor |
|---|---|
| Texto Del Botón | Inscribite Ahora |
| Enlace → URL | URL de tu página de cursos o registro |
Pestaña Diseño
| Grupo | Opción | Valor |
|---|---|---|
| Alineación | Alinear el botón | Derecha |
| Botón | Color de fondo | #ffb606 |
| Botón | Color del texto | #0d1b2a |
| Botón | Borde redondeado | 6px |
| Texto | Tamaño | 14px |
| Texto | Peso | 700 (Bold) |
| Espaciado | Padding | 12px arriba/abajo · 24px izquierda/derecha |
Paso 7 — Fondo blanco de la Sección del menú
Hacé clic en el engranaje ⚙️ de la Sección y configurá:
| Pestaña | Opción | Valor |
|---|---|---|
| Contenido → Fondo | Color de fondo | #ffffff |
| Diseño → Espaciado | Padding arriba/abajo | 0px |
Paso 8 — Hacer el menú sticky con CSS
En la Sección del menú → Avanzado → CSS → CSS De Forma Libre, pegá este código:
/* ── Menú fijo al hacer scroll ── */
selector {
position: sticky;
top: 0;
z-index: 9999;
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
/* ── Cuando Divi activa el sticky: sombra + línea dorada ── */
selector.et-sticky-header--active {
box-shadow: 0 2px 12px rgba(13, 27, 42, 0.15);
border-top: 3px solid #ffb606;
background-color: #ffffff;
}
¿Qué hace ese CSS?
position: sticky; top: 0 le dice al navegador "quedate pegado al tope". El z-index: 9999 asegura que el menú quede siempre encima del contenido. La clase .et-sticky-header--active la agrega Divi cuando el visitante hace scroll — ahí aparecen la sombra y la línea dorada.
Paso 9 — Guardar y verificar
- Presioná Ctrl + S en el Visual Builder
- Hacé clic en Salir
- En el Theme Builder hacé clic en Guardar Cambios (botón azul)
- Abrí tu sitio en una pestaña nueva y hacé scroll para ver el sticky en acción
Lo que aprendiste en esta lección
El header principal usa 3 columnas: Logo (izquierda) — Menú (centro) — Botón CTA (derecha), para un diseño simétrico y profesional.
El módulo Menú de Divi 5 necesita un menú creado previamente en Apariencia → Menús. En Diseño configurás el estilo centrado, colores y desplegable.
El botón CTA dorado: fondo
#ffb606, texto #0d1b2a, borde redondeado 6px, padding 12px / 24px.
El sticky se logra con
position: sticky; top: 0; z-index: 9999 en la Sección. La clase .et-sticky-header--active controla el estilo al hacer scroll.
