Crea tu Menu Secundario con Divi 5: Topbar de Bienvenida para LMS
1. ¿Qué vas a construir?
Una topbar minimalista para plataforma LMS. Su función es guiar al visitante a registrarse o iniciar sesión — las dos acciones más importantes de una plataforma educativa.
Vista previa del resultado:
👋 ¿Ya tenés tu cuenta? Accedé a tus cursos desde aquí.
Fondo azul primario (#2563eb), mensaje a la izquierda, dos botones de acceso a la derecha.
2. ¿Por qué este diseño es especial para LMS?
En un sitio educativo, el objetivo número uno es que el visitante se registre o inicie sesión. Este topbar tiene esa función:
| Elemento | ¿Para qué sirve? |
|---|---|
| Texto de bienvenida | Invita al visitante a actuar, humaniza el sitio |
| Botón «Iniciar sesión» (borde blanco) | Para estudiantes que ya tienen cuenta — discreto |
| Botón «Registrarse» (amarillo) | El CTA principal — llama la atención para que nuevos usuarios se unan |
Pensá en este topbar como la recepción de una escuela. Lo primero que ves al entrar es un cartel que dice «¿Ya sos alumno? Pasá por acá. ¿Sos nuevo? Inscribite aquí.» Orientás al visitante desde el primer segundo.
3. Paso 1 — Crear la sección azul
Abrir el encabezado en Theme Builder
Divi → Theme Builder → clic en el lápiz ✏️ del Encabezado Global.
Agregar una nueva sección con fondo azul
Hacé clic en «+» → nueva sección.
Panel derecho → Contenido → Fondo → + Añadir Color De Fondo.
Color:
2563EB
→ presioná Enter
Relleno de la sección
Diseño → Espaciado → Relleno De:
Superior:
8px · Inferior: 8px · Izquierda: 0 · Derecha: 04. Paso 2 — Fila de 2 columnas
Insertar una fila de 2 columnas (70% | 30%)
Dentro de la sección hacé clic en «+» → pestaña Nueva Fila.
Elegí la estructura 2 columnas desiguales: la primera columna más ancha que la segunda.
Buscá la opción que tenga un rectángulo ancho a la izquierda y uno angosto a la derecha (aproximadamente 2/3 | 1/3).
5. Paso 3 — Columna izquierda: mensaje de bienvenida
Agregar módulo Texto en la columna izquierda
Hacé clic en «+» de la columna izquierda (la ancha) → elegí Texto.
Escribí el mensaje:
Estilizar el texto
Pestaña Diseño → Texto:
- Color del texto:
#ffffff - Tamaño de fuente:
13px - Alineación: izquierda
6. Paso 4 — Columna derecha: botones de acceso
Esta es la parte más importante. Vamos a agregar dos botones: uno para iniciar sesión (sutil) y otro para registrarse (llamativo).
Agregar el primer módulo Botón — «Iniciar sesión»
Hacé clic en «+» de la columna derecha → elegí Botón.
En el panel derecho → pestaña Contenido:
- Texto del Botón:
Iniciar sesión - URL del Botón: la URL de la página de login de WordPress
https://tusitio.com/wp-login.php(o la página de acceso de LearnPress)
Dar estilo al botón «Iniciar sesión» (discreto)
Pestaña Diseño → Botón:
- Color de fondo del botón: transparente (dejalo vacío o en ninguno)
- Color del texto:
#ffffff - Color del borde:
#ffffff - Ancho del borde:
1px - Radio del borde:
4px - Tamaño de fuente:
12px - Padding superior/inferior:
4px - Padding izquierda/derecha:
12px
← así se ve el botón terminado
Agregar el segundo módulo Botón — «Registrarse»
Hacé clic nuevamente en «+» de la columna derecha → Botón.
En pestaña Contenido:
- Texto del Botón:
Registrarse - URL del Botón: la URL de la página de registro del sitio
Dar estilo al botón «Registrarse» (llamativo)
Pestaña Diseño → Botón:
- Color de fondo del botón:
#f59e0b(amarillo) - Color del texto:
#1e3a5f(azul oscuro) - Color del borde:
#f59e0b - Radio del borde:
4px - Tamaño de fuente:
12px - Peso de fuente:
700(negrita) - Padding superior/inferior:
5px - Padding izquierda/derecha:
14px
← así se ve el botón terminado
7. Paso 5 — Alinear los botones
Poner los botones en fila (horizontal)
Los dos botones van a aparecer apilados uno abajo del otro por defecto. Para ponerlos en fila:Hacé clic sobre la columna derecha (no en un módulo, sino en la columna).
En el panel derecho → pestaña Diseño → Diseño:
- Dirección De Diseño: elegí el ícono de fila horizontal (los cuadraditos en fila)
- Justificar Contenido: Fin (alinea a la derecha)
- Alinear Elementos: Centro (alineación vertical central)
- Espaciado Horizontal:
8px
Los dos botones van a quedar uno al lado del otro, alineados a la derecha.
8. Guardar
Guardar y publicar
Guardar → Salir → Guardar Cambios en el Theme Builder.
9. Vista previa final
Resultado esperado:
👋 ¿Ya tenés tu cuenta? Accedé a tus cursos desde aquí.
Fondo azul (#2563eb), mensaje a la izquierda. Dos botones a la derecha: «Iniciar sesión» con borde blanco (discreto) y «Registrarse» en amarillo (llamativo). El contraste visual guía al visitante hacia la acción más importante.
10. Consejo profesional: el contraste entre botones
¿Por qué un botón es discreto y el otro es llamativo?
Este patrón de diseño se llama jerarquía visual de botones. La idea es:
- El botón secundario (Iniciar sesión) es para usuarios que ya existen — no necesitan ser convencidos.
- El botón primario (Registrarse) es para nuevos usuarios — tienen que llamar la atención porque son los que hacen crecer el sitio.
Al hacer un botón más discreto que el otro, le decís al visitante cuál es la acción más importante sin decirlo con palabras.
Verificación:
- La topbar tiene fondo azul
#2563eb. - El mensaje de bienvenida aparece a la izquierda en texto blanco.
- Los dos botones están a la derecha en fila (no apilados).
- «Iniciar sesión» tiene borde blanco y fondo transparente.
- «Registrarse» tiene fondo amarillo y texto oscuro.
- Ambos botones llevan a las páginas correctas al hacer clic.
