Lección 2.2: La Barra Lateral Izquierda – Ícono por Ícono

[ + ] AÑADIR SECCIÓN

Es el punto de partida de todo. Cada vez que quieres agregar algo nuevo a tu página, empiezas aquí.

Al hacer clic aparece un menú con:

• • Sección estándar (la más común)
• • Sección de pantalla completa (fullwidth)
• • Sección especial

[ ◈ ] Capas — el árbol de tu página

Imagina que tu página es una casa. El panel de Capas te muestra el plano completo:

¿Cuándo lo usas?

• → Cuando tienes muchos elementos y uno está debajo de otro y no puedes clicarlo fácilmente
• → Cuando quieres mover una sección de lugar
• → Para tener una vista general de toda la estructura

[ 🎨 ] Variables de Diseño — tus colores y fuentes globales

Este es uno de los poderes más grandes de Divi 5. En Divi 4 no existía así.

La idea es simple: Defines tu paleta de colores UNA SOLA VEZ:

• → Color principal: #1a3a5c (azul oscuro)
• → Color acento: #c9a84c (dorado)
• → Color texto: #333333 (gris oscuro)

Luego en cada módulo, en lugar de escribir el código hexadecimal, seleccionas la variable «Color principal».

También guarda variables de:

• → Fuentes tipográficas
• → Tamaños de texto
• → Imágenes recurrentes
• → Espaciados

[ 🗄 ] Presets — estilos guardados y reutilizables

Un Preset es como un «estilo nombrado».

Ejemplo práctico con botones: Diseñas tu botón perfecto — color dorado, bordes redondeados, fuente en negrita, sombra sutil. Lo guardas como Preset «Botón CTA Principal».

La próxima vez que insertas un Módulo Botón, simplemente aplicas el Preset y ya tiene ese diseño. Sin configurar nada de nuevo.

Tipos de Presets:

• → Preset de elemento: aplica a todo un módulo
• → Preset de grupo de opciones: aplica a una sola parte, como solo la tipografía o solo el fondo

El poder real: actualizas el Preset una vez y todos los elementos que lo usan se actualizan automáticamente.

[ 🖼 ] Medios — tu biblioteca de imágenes sin salir del builder

Abre tu biblioteca de medios de WordPress directamente dentro del Visual Builder.

¿Para qué te sirve?

• → Ves todas tus imágenes subidas
• → Puedes subir imágenes nuevas desde aquí
• → Sin tener que abrir una pestaña nueva
• → Sin salir del Visual Builder

Es comodidad pura — antes tenías que abrir otra pestaña, ir a Medios en WordPress, subir la imagen, copiar la URL y volver. Ahora todo desde un panel.

[ 📄 ] Páginas — administrar páginas sin salir del builder

Muestra la lista de todas tus páginas de WordPress. Desde aquí puedes:

• → Ver qué páginas tienes creadas
• → Navegar a otra página para editarla
• → Sin volver al panel de WordPress

Útil cuando estás terminando una página y quieres saltar rápido a la siguiente.

[ ⚡ ] Interacciones — animaciones sin escribir código

Las Interacciones son efectos que se activan cuando el usuario hace algo: clic, scroll, pasar el mouse.

Ejemplos reales:

• → Al hacer clic en un botón → aparece un popup
• → Al hacer scroll hasta una sección → se anima
• → Al pasar el mouse sobre una imagen → cambia de color

Esto en Divi 4 requería código JavaScript. En Divi 5 lo haces con clics, sin tocar código.

[ ☰ ] Vista de estructura compacta

Similar al panel de Capas pero más compacto. Muestra el árbol de elementos en forma de lista simple.

Úsalo cuando quieres una vista rápida de la estructura sin abrir el panel completo de Capas.

[ 🖱 ] Selector de Canvas

En Divi 5 puedes tener varios «lienzos» dentro del mismo Visual Builder:

• → Main Canvas: la página o plantilla que estás editando
• → Canvases extra: popups, menús laterales, drawers

Este ícono te permite cambiar entre ellos. Es como cambiar de pestaña pero dentro del builder.

[ 📋 ] Biblioteca Divi — tu almacén personal de piezas

La Biblioteca es donde guardas tu trabajo para reutilizarlo después. Funciona para:

• → Secciones completas (ej: tu footer terminado)
• → Filas (ej: una tarjeta de servicio bien diseñada)
• → Módulos individuales (ej: un botón con tu estilo)

Caso real de uso: Diseñas la sección Hero de la página de Inicio con todo su estilo. La guardas en la Biblioteca. Cuando creas la página de Servicios, abres la Biblioteca, insertas el Hero, lo modificas un poco. Ahorraste una hora de trabajo.

También puedes importar layouts prediseñados de Elegant Themes — diseños profesionales listos para usar.

[ 🔲 ] Canvases — popups y menús fuera del lienzo principal

Función nueva y exclusiva de Divi 5.

Un Canvas es un espacio de diseño separado para elementos que no viven en la página directamente:

• → Popup: ventana que aparece sobre la página (Ejemplo: «Solicita tu cita» al clicar un botón)
• → Off-canvas menu: menú que se desliza desde un costado (Muy usado en versiones móviles)
• → Drawer: panel que aparece desde abajo

En Divi 4 nada de esto existía de forma nativa. Necesitabas plugins o código para lograrlo.

[ ✂ ] Historial — deshacer y rehacer cambios

Muestra una lista cronológica de todo lo que hiciste desde que abriste el Visual Builder.

• → Hiciste 10 cambios y el tercero arruinó algo
• → Abres el Historial y haces clic en el estado anterior al cambio que te dañó todo
• → Vuelves exactamente a ese punto

También funciona con Ctrl+Z (deshacer) y Ctrl+Y (rehacer) desde el teclado.

[ ? ] Ayuda — documentación oficial de Divi

Abre los artículos de ayuda de Elegant Themes directamente desde el builder.

Si en algún momento te pierdes y yo no estoy disponible, este ícono te lleva a la documentación oficial — el mismo lugar de donde sacamos este curso.

[ ⚙ ● ] Modo Oscuro / Claro

El interruptor de abajo del todo cambia el fondo del Visual Builder:

• Modo claro (●○) → fondo blanco — lo que tienes ahora
• Modo oscuro (○●) → fondo negro — más cómodo de noche