Lección 2.1: El Visual Builder – La Pantalla Completa
¿Qué es el Visual Builder?Imagina que el Visual Builder es tu taller de carpintería. Tienes una mesa de trabajo en el centro, las herramientas a la izquierda, los controles arriba, y cuando seleccionas una pieza aparece un panel a la derecha que te muestra todas sus propiedades. Todo en un solo lugar.
Es el corazón de Divi 5. Desde aquí construyes y editas todo — encabezados, páginas, pies de página — visualmente, viendo el resultado en tiempo real.
¿Cómo entrar al Visual Builder?
Hay dos caminos principales para acceder al editor:
CAMINO 1 — Desde una PáginaPanel de WordPress → Páginas → Editar cualquier página → Botón azul «Editar Con Divi» en la parte superior.
CAMINO 2 — Desde el Theme BuilderPanel de WordPress → Divi → Theme Builder → Crear Encabezado Global → Crear Encabezado Global. Se abre el Visual Builder automáticamente.
El mapa de la pantalla — las 4 zonas
Cuando el Visual Builder se abre ves 4 zonas claramente diferenciadas:
| ZONA 1 → BARRA SUPERIOR (Franja oscura superior) | |
|---|---|
| ZONA 2 BARRA IZQUIERDA (Herramientas) |
ZONA 3 → EL LIENZO (El espacio blanco donde construyes) |
| ZONA 4 → PANEL DERECHO (Aparece al seleccionar elementos) |
|
ZONA 1 — La Barra Superior
Ubicada en la parte de arriba, contiene los controles globales del editor:
- [ ⚙ ] Ajustes del Builder: Configuración general, modo claro/oscuro, tamaño del panel.
- [ Main Canvas ▼ ] Selector: Cambia entre el lienzo principal y Canvases (popups).
- [ ⊞ ] Vista Wireframe: Mira la estructura esquemática (como el plano de un edificio).
- [ □ ][ 📱 ][ 📲 ] Vistas de Dispositivo: Simula escritorio, tablet y móvil. Vital para diseño responsivo.
- [ ↔ 1208px ] Ancho: Define un ancho específico en píxeles.
- [ 🔍 100% ] Zoom: Acerca o aleja la vista sin afectar el diseño final.
- [ Salir ▼ ]: Vuelve a WordPress (con o sin guardar).
- [ Guardar ]: El botón más importante. ¡Úsalo frecuentemente!
ZONA 2 — La Barra Lateral Izquierda
Esta es la barra vertical de herramientas. Se divide en tres grupos principales:
[ + ] AZUL GRANDE: El punto de partida. Agrega nuevas Secciones al lienzo.
Grupo 1: Estructura y Estilo
- [ ◈ ] Capas (Layers): Árbol de carpetas con toda la estructura de la página.
- [ 🎨 ] Variables de Diseño: Colores y fuentes globales de tu marca.
- [ 🗄 ] Presets: Estilos guardados para reutilizar en botones o textos.
- [ 🖼 ] Medios: Acceso a tu biblioteca de imágenes.
Grupo 2: Biblioteca y Canvases
- [ 📋 ] Biblioteca Divi: Tus secciones y módulos guardados.
- [ 🔲 ] Canvases: Exclusivo de Divi 5 para crear popups y menús off-canvas.
Grupo 3: Utilidades
- [ ✂ ] Historial: El «Ctrl+Z» visual para deshacer cambios.
- [ ⚙ ● ] Modo Oscuro/Claro: Cambia la apariencia del editor.
ZONA 3 — El Lienzo
Al pasar el mouse sobre el lienzo verás:
- Botones [ + ] para insertar nuevas secciones.
- Íconos flotantes para editar, duplicar, mover y eliminar.
ZONA 4 — El Panel Derecho
Este panel aparece al clicar cualquier elemento. Es donde ocurre la magia de la edición.
| Pestaña | Función |
|---|---|
| Contenido | QUÉ tiene: textos, imágenes, enlaces. |
| Diseño | CÓMO se ve: tamaños, sombras, bordes, espaciados. |
| Avanzado | EXTRAS: Código CSS, animaciones y condiciones. |
💡 El Truco del Buscador
Resumen de Íconos de Sección:Al pasar el mouse verás: [ ⚙ ] Ajustes, [ ❐ ] Duplicar, [ 🗑 ] Eliminar y [ ⋮ ] Más opciones.
REGLA DE ORO DE DIVI 5
Seleccionas algo en el lienzo
⬇
El panel derecho te muestra todo lo que puedes cambiar
