Crea Menu Secundario: Topbar de Contacto con 3 Columna
Lección de práctica. No crea archivos de código. Todo se hace dentro del Divi Theme Builder. Esta topbar usa 3 columnas con información de contacto y es ideal para sitios educativos o empresariales que quieren mostrar cómo los pueden contactar.
1. ¿Qué vas a construir?
Una topbar de información de contacto completa, dividida en 3 columnas iguales:
Vista previa del resultado:
📍
Buenos Aires, Argentina
Buenos Aires, Argentina
☎ +54 11 1234-5678
✉ info@miescuela.com
✉ info@miescuela.com
f
▶
📷
Tres columnas: ubicación a la izquierda, teléfono y email en el centro, redes sociales a la derecha.
2. ¿Cuándo usar este modelo?
| Tipo de sitio | ¿Este topbar sirve? |
|---|---|
| Escuela o academia online | ✅ Perfecto — muestra dónde encontrarlos |
| Consultora o empresa de servicios | ✅ Ideal — da credibilidad inmediata |
| Tienda online | ✅ Útil para soporte y atención al cliente |
| Blog personal | ⚠️ Puede ser excesivo para un blog simple |
3. Paso 1 — Crear la sección
1
Abrir el Theme Builder y editar el encabezado
Ir a Divi → Theme Builder. Hacé clic en el lápiz ✏️ del Encabezado Global.
Abrir el Theme Builder y editar el encabezado
Ir a Divi → Theme Builder. Hacé clic en el lápiz ✏️ del Encabezado Global.
2
Agregar una nueva sección con fondo azul oscuro
Hacé clic en el botón «+» para agregar sección.
En el panel derecho → Contenido → Fondo → + Añadir Color De Fondo.
Color:
Agregar una nueva sección con fondo azul oscuro
Hacé clic en el botón «+» para agregar sección.
En el panel derecho → Contenido → Fondo → + Añadir Color De Fondo.
Color:
1E3A5F
3
Ajustar el relleno
Pestaña Diseño → Espaciado → Relleno De:
Superior:
Ajustar el relleno
Pestaña Diseño → Espaciado → Relleno De:
Superior:
8px · Inferior: 8px · Izquierda: 0 · Derecha: 0
4. Paso 2 — Crear la fila de 3 columnas
4
Insertar una fila de 3 columnas iguales
Dentro de la sección, hacé clic en «+» → pestaña Nueva Fila.
Elegí la estructura de 3 columnas iguales (tres rectángulos iguales — 1/3 | 1/3 | 1/3).
Insertar una fila de 3 columnas iguales
Dentro de la sección, hacé clic en «+» → pestaña Nueva Fila.
Elegí la estructura de 3 columnas iguales (tres rectángulos iguales — 1/3 | 1/3 | 1/3).
Así se ve la estructura de 3 columnas en el selector de filas
5. Paso 3 — Columna izquierda: Ubicación
5
Agregar módulo «Lista De Iconos» en la columna izquierda
Hacé clic en «+» de la columna izquierda → buscá Lista De Iconos.
Este módulo permite mostrar texto con un ícono al lado — perfecto para la dirección.
Agregar módulo «Lista De Iconos» en la columna izquierda
Hacé clic en «+» de la columna izquierda → buscá Lista De Iconos.
Este módulo permite mostrar texto con un ícono al lado — perfecto para la dirección.
6
Configurar el ítem de ubicación
En el módulo Lista De Iconos → pestaña Contenido → Elementos.
Hacé clic en el ítem existente (lápiz ✏️) para editarlo:
Configurar el ítem de ubicación
En el módulo Lista De Iconos → pestaña Contenido → Elementos.
Hacé clic en el ítem existente (lápiz ✏️) para editarlo:
- Título:
Buenos Aires, Argentina - Ícono: buscá un ícono de ubicación (pin de mapa)
- Color del ícono:
#f59e0b(amarillo — contrasta con el fondo oscuro)
7
Estilizar el texto de la ubicación
En el mismo módulo → pestaña Diseño → Texto:
Estilizar el texto de la ubicación
En el mismo módulo → pestaña Diseño → Texto:
- Color del texto:
#ffffff - Tamaño de fuente:
12px
6. Paso 4 — Columna central: Teléfono y Email
8
Agregar módulo Texto en la columna central
Hacé clic en «+» de la columna del medio → elegí Texto.
En el área de texto escribí:
Agregar módulo Texto en la columna central
Hacé clic en «+» de la columna del medio → elegí Texto.
En el área de texto escribí:
☎ +54 11 1234-5678 | ✉ info@miescuela.com
9
Centrar el texto de la columna del medio
En el módulo Texto → pestaña Diseño → Texto:
Centrar el texto de la columna del medio
En el módulo Texto → pestaña Diseño → Texto:
- Color del texto:
#ffffff - Tamaño de fuente:
12px - Alineación: centrada (ícono del medio en la barra de alineación)
7. Paso 5 — Columna derecha: Redes Sociales
10
Agregar módulo «Seguir En Redes Sociales» en la columna derecha
Hacé clic en «+» de la columna derecha → buscá Seguir En Redes Sociales.
Configurá tres redes: Facebook · YouTube · Instagram.
Agregar módulo «Seguir En Redes Sociales» en la columna derecha
Hacé clic en «+» de la columna derecha → buscá Seguir En Redes Sociales.
Configurá tres redes: Facebook · YouTube · Instagram.
11
Estilizar los íconos
Pestaña Diseño → Icono:
Estilizar los íconos
Pestaña Diseño → Icono:
- Color del ícono:
#ffffff - Activar Usar Tamaño De Icono Personalizado (switch azul)
- Tamaño de fuente del ícono:
14px
Más abajo en Diseño → Diseño → Justificar Contenido: elegí Fin (alinea a la derecha).
8. Paso 6 — Alinear verticalmente todo
12
Centrar verticalmente el contenido de la fila
Hacé clic sobre la fila (no sobre una columna) para seleccionarla.
En el panel derecho → pestaña Diseño → Diseño.
En Alinear Elementos elegí la alineación central (el segundo ícono).
Esto alinea verticalmente el texto y los íconos para que queden a la misma altura.
Centrar verticalmente el contenido de la fila
Hacé clic sobre la fila (no sobre una columna) para seleccionarla.
En el panel derecho → pestaña Diseño → Diseño.
En Alinear Elementos elegí la alineación central (el segundo ícono).
Esto alinea verticalmente el texto y los íconos para que queden a la misma altura.
9. Guardar y verificar
13
Guardar
Hacé clic en Guardar → Salir → Guardar Cambios.
Guardar
Hacé clic en Guardar → Salir → Guardar Cambios.
10. Vista previa final
Resultado esperado — Desktop (3 columnas):
📍
Buenos Aires, Argentina
Buenos Aires, Argentina
☎ +54 11 1234-5678 · ✉ info@miescuela.com
f
▶
📷
En mobile, Divi apila las 3 columnas una debajo de la otra automáticamente.
Verificación:
- Las 3 columnas se ven equilibradas en desktop.
- La ubicación tiene el ícono en amarillo.
- El teléfono y email están centrados.
- Las redes sociales están alineadas a la derecha.
- Todo el texto es blanco y legible sobre el fondo oscuro.
