Crear Menu Secundario: Topbar de Anuncio con Botón CTA
Lección de práctica. No crea archivos de código. Todo se hace dentro del Divi Theme Builder. Esta topbar usa un diseño centrado con fondo llamativo, ideal para anuncios y promociones.
1. ¿Qué vas a construir?
Una topbar de anuncio promocional: una franja llamativa con un mensaje importante centrado y un botón de acción. Se usa mucho para:
- Anunciar el inicio de un nuevo curso
- Mostrar una oferta por tiempo limitado
- Comunicar un evento o webinar
Vista previa del resultado que vas a construir:
Franja color amarillo/ámbar (#f59e0b), texto oscuro centrado, botón de acción a la derecha del texto.
2. ¿Por qué este diseño funciona?
El color amarillo #f59e0b está definido en las variables CSS del sitio como --color-accent. Es el color de «llamada a la acción» — el que más llama la atención sin gritar. Estudios de diseño web muestran que las topbars en colores cálidos (amarillo, naranja) tienen hasta un 40% más de clics que las grises.
Analogía:
Pensá en este topbar como la pizarra de la entrada de un local que dice «¡Liquidación hoy!». No ocupa mucho espacio pero lo primero que ven tus visitantes al entrar al sitio es ese mensaje.
Pensá en este topbar como la pizarra de la entrada de un local que dice «¡Liquidación hoy!». No ocupa mucho espacio pero lo primero que ven tus visitantes al entrar al sitio es ese mensaje.
3. Paso a paso en Divi Theme Builder
Antes de empezar: Si ya tenés un Encabezado Global creado de la lección 6.1, vas a editarlo para agregar esta sección. Si empezás desde cero, seguí los pasos de la lección 6.1 para crear primero el encabezado.
1
Abrir el encabezado en el Theme Builder
Ir a Divi → Theme Builder.
Hacé clic en el botón verde Encabezado Global (el lápiz ✏️ para editar).
Abrir el encabezado en el Theme Builder
Ir a Divi → Theme Builder.
Hacé clic en el botón verde Encabezado Global (el lápiz ✏️ para editar).
2
Agregar una nueva sección
Dentro del constructor del encabezado, hacé clic en el botón «+» azul de la izquierda para agregar una nueva sección.
Se crea una sección nueva debajo de las existentes.
Agregar una nueva sección
Dentro del constructor del encabezado, hacé clic en el botón «+» azul de la izquierda para agregar una nueva sección.
Se crea una sección nueva debajo de las existentes.
3
Configurar el fondo amarillo de la sección
Con la sección seleccionada, en el panel derecho → pestaña Contenido → Fondo.
Hacé clic en + Añadir Color De Fondo.
Escribí el código del color:
Configurar el fondo amarillo de la sección
Con la sección seleccionada, en el panel derecho → pestaña Contenido → Fondo.
Hacé clic en + Añadir Color De Fondo.
Escribí el código del color:
F59E0B
→ presioná Enter
4
Ajustar el relleno (Spacing)
Pestaña Diseño → Espaciado → Relleno De:
Ajustar el relleno (Spacing)
Pestaña Diseño → Espaciado → Relleno De:
| Superior | 8 px |
| Inferior | 8 px |
| Izquierda | 0 |
| Derecha | 0 |
5
Agregar una fila de 1 columna
Dentro de la sección, hacé clic en «+» → pestaña Nueva Fila.
Elegí la estructura de 1 columna completa (el rectángulo ancho solo).
Agregar una fila de 1 columna
Dentro de la sección, hacé clic en «+» → pestaña Nueva Fila.
Elegí la estructura de 1 columna completa (el rectángulo ancho solo).
6
Agregar el módulo «Llamada A La Acción»
Hacé clic en «+» dentro de la columna.
En la ventana de módulos buscá Llamada A La Acción y hacé clic en él.
Este módulo fue diseñado exactamente para este propósito — incluye texto + botón en un solo módulo.
Agregar el módulo «Llamada A La Acción»
Hacé clic en «+» dentro de la columna.
En la ventana de módulos buscá Llamada A La Acción y hacé clic en él.
Este módulo fue diseñado exactamente para este propósito — incluye texto + botón en un solo módulo.
7
Configurar el contenido (pestaña Contenido)
En el panel derecho del módulo Llamada A La Acción:
Configurar el contenido (pestaña Contenido)
En el panel derecho del módulo Llamada A La Acción:
- Título: dejalo vacío (para que solo aparezca el texto y el botón)
- Cuerpo / Contenido: escribí el mensaje del anuncio, por ejemplo:
🎓 ¡Nuevas inscripciones abiertas! Comenzá tu curso hoy.
- Texto del Botón:
Ver cursos - URL del Botón: la dirección de la página de cursos del sitio
8
Dar estilo al texto (pestaña Diseño → Texto)
Dar estilo al texto (pestaña Diseño → Texto)
- Color del texto del cuerpo:
#1e3a5f(azul oscuro sobre el fondo amarillo) - Tamaño de fuente:
14px - Peso de fuente:
600(semi-negrita) - Alineación del texto: centrado
9
Dar estilo al botón (pestaña Diseño → Botón)
Dar estilo al botón (pestaña Diseño → Botón)
- Color del fondo del botón:
#1e3a5f - Color del texto del botón:
#ffffff - Radio del borde:
4px - Tamaño de fuente:
12px
10
Guardar y verificar
Hacé clic en Guardar → Salir → Guardar Cambios en el Theme Builder.
Abrí el frontend y presioná Ctrl + Shift + R.
Guardar y verificar
Hacé clic en Guardar → Salir → Guardar Cambios en el Theme Builder.
Abrí el frontend y presioná Ctrl + Shift + R.
4. Variaciones del mensaje que podés usar
| Tipo de anuncio | Ejemplo de texto | Texto del botón |
|---|---|---|
| Nuevo curso | 🎓 ¡Nuevo curso disponible! Python para principiantes | Ver más |
| Oferta | 🔥 50% de descuento por tiempo limitado | Inscribirme |
| Webinar | 📅 Webinar gratuito el viernes 28 a las 18hs | Reservar lugar |
| Recordatorio | ⏰ Las clases en vivo son los jueves a las 20hs | Ver calendario |
5. Vista previa final
Resultado esperado:
🎓 ¡Nuevas inscripciones abiertas! Comenzá tu curso hoy.
Ver cursos
Topbar amarilla (#f59e0b), mensaje oscuro centrado, botón azul oscuro. Llama la atención sin molestar al visitante.
Verificación:
- La topbar aparece con fondo amarillo en todas las páginas.
- El texto es legible (oscuro sobre amarillo).
- El botón «Ver cursos» es clickeable y lleva a la página correcta.
- En mobile, el texto y el botón se adaptan sin superponerse.
