Een Universo Divi valoramos tu tiempo. Si ya construiste un Hero perfecto, no lo vuelvas a fabricar desde cero. Vamos a dominar las tres herramientas de "clonación" para crear nuestras variaciones.
1. El Duplicado Rápido (Para la Versión 1)
Es la forma más veloz cuando quieres la copia justo debajo de la original.
- Acción: Pasa el ratón sobre la Sección Azul.
- Interfaz: Haz clic en el icono de los dos cuadros superpuestos (Duplicar).
- Uso: Ideal para probar cambios rápidos de color de fondo mientras comparas con la de arriba.
2. Guardar e Importar de la Biblioteca (Para la Versión 2)
Esta es la técnica más potente. Guardar en la Biblioteca de Divi es como crear tu propio catálogo de piezas de lujo.
- Acción: Haz clic en el icono de la flecha hacia abajo (Guardar en la biblioteca) en la barra azul.
- Nombre: Ponle un nombre claro:
Hero Maestro - Universo Divi. - Para el segundo Hero: Haz clic en el círculo gris con el símbolo "+" para añadir una sección nueva, ve a la pestaña "Añadir desde biblioteca" y selecciona tu Hero.
- Uso: Fundamental para usar el mismo diseño en diferentes páginas de tu academia.
3. Copiar y Pegar Estilos (Para la Versión 3)
A veces no quieres el contenido, solo el "traje" (los colores y espacios).
- Acción: Haz clic derecho sobre la sección original y selecciona "Copiar Estilo de Sección".
- Acción: Ve a una sección nueva y haz clic derecho: "Pegar Estilo de Sección".
- Uso: Perfecto para que una sección de contacto tenga el mismo "aire" (padding) que tu Hero sin tener que volver a escribir las variables.
Al usar estas tres técnicas, te aseguras de que el ADN de tu diseño no mutue. Si duplicas o importas, tus variables --escala---4XL viajan con el diseño. Tu web siempre se verá coherente, profesional y armoniosa. "Un diseñador desordenado trabaja el doble. Aprender a guardar tus secciones maestras en la biblioteca es como tener un asistente que te hace el trabajo sucio. Diseña una vez, replica mil veces".
El Consejo del Maestro:
Lo que acabamos de construir no es un tutorial de "cómo hacer una página", es un sistema de pensamiento. Al enseñarte a configurar tu propio "cerebro" de variables y a dominar el Canvas con orden, le has entregado la autonomía total. Ya no depende de que alguien le diga dónde poner un botón; ahora tiene el criterio para decidirlo él mismo basándose en la arquitectura que ya domina.
Del Caos al Orden Arquitectónico
Cierras tu computadora hoy con una transformación real:
Lo que viene: El Arte sobre la Estructura
A partir de aquí entramos en la fase donde el diseño se vuelve Psicología y Emoción. Una vez que la "caña de pescar" (la técnica) está dominada, el estudiante empezará a elegir qué tipo de "pez" (estética) quiere capturar:
- Psicología del Color: ¿Por qué el Oro de Universo Divi evoca éxito y no solo "amarillo"?
- Composición Dinámica: Cómo guiar el ojo del usuario desde el Hero hasta el botón de compra.
- La Biblioteca de Poder: Crear una colección de módulos (testimonios, precios, beneficios) que ya tengan el ADN de las 9 variables inyectado.
Hoy has dejado de ser un espectador para convertirte en un Arquitecto de lo Invisible. Has aprendido que el diseño no es 'decorar', sino construir un sistema que respira y se adapta. Mañana, usaremos esa estructura para contar historias, para emocionar y para convertir visitantes en Seguidoress. Descansa, porque hoy has aprendido a pescar en el océano del diseño profesional.
Variación 1: El Estilo "Noche y Oro" (Contraste Máximo)
Habiendo terminado tu Hero podrías enfrentarte con la situación de que tu cliente te pida otras posibles versiones del Hero. Practicarás este ejercicio, ideal para que aprendas a jerarquizar usando los extremos de tus escalas. Como ya tienes guardado este en la Biblioteca el proyecto consiste en hacer tres variaciones al mismo siguiendo las instrucciones:
- Fondo de Sección: Seleccionar el Negro nivel 5 (el más oscuro) desde el contenido dinámico.
- Títulos (H1/H2): Asignar el Oro nivel 1 (el más claro/brillante).
- Cuerpo de Texto: Asignar el Oro nivel 3 (tono medio).
- Tamaños: En los ajustes de "Tamaño de Texto", elegir la variable de Escala 9 (la más grande) para el título principal.
Variación 2: El Estilo "Pergamino Real" (Inversión de Luces)
Aquí practicas cómo invertir la lógica visual sin perder la armonía.
- Fondo de Sección: Seleccionar el Oro nivel 5 (el más suave, casi crema/mate) como base.
- Títulos: Asignar el Negro nivel 1 (el negro más puro) para que "salte" a la vista.
- Botones: Fondo de botón en Negro nivel 2 y texto del botón en Oro nivel 1.
- Tamaños: Usar una escala de Tamaño Intermedio (Escala 5 o 6) para que todo se vea más aireado y elegante.
Variación 3: El Estilo "Estructura Industrial" (Grisalla y Detalles)
Perfecto para trabajar con los tonos medios y aprender a dar profundidad sutil.
- Fondo de Sección: Seleccionar el Negro nivel 4.
- Fondo de Fila o Columna: Seleccionar el Negro nivel 3 (esto creará un efecto de "tarjeta" o relieve sobre el fondo).
- Bordes y Separadores: Usar el Oro nivel 4 para dar un toque metálico fino.
- Tamaños: Configurar los márgenes y rellenos (
padding) usando la Escala 3 o 4 para un diseño más compacto y técnico, tipo directorio.
Paso 1: Métodos de Replicación en Divi 5
Antes de pasar a las variaciones, el estudiante debe dominar cómo multiplicar su trabajo base.
- En el Menú de WordPress Crea una nueva Página, la que editarás con Divi. Al llegar al Builder oprime el Icono del signo de + Insertar Diseño/Diseño Guardado y escoge el Hero que acabas de guardar. Utiliza los medios descritos aquí. Duplicar, Copy/Paste y realiza las Variaciones 1, 2 y 3.
- Duplicar (Acción Inmediata): Utilizar el icono de "Dos cuadros" en el menú flotante del módulo o fila para crear una copia exacta en la misma página.
- Copy / Paste (Entre Secciones): Clic derecho sobre el elemento base > Copiar Módulo/Fila, desplazarse al nuevo espacio y Pegar.
- Guardar en la Biblioteca (Uso Global): Clic en los tres puntos del menú del módulo > Añadir a la Biblioteca. Esto permite que el diseño esté disponible para cualquier otra página del sitio con un solo clic.
Paso 2: Introducción al Uso de Canvas (Modo Enfoque)
El Canvas en Divi 5 es el espacio de trabajo limpio donde podemos manipular el diseño sin distracciones.
- ¿Qué es?: Es el lienzo interactivo que permite ver los cambios en tiempo real.
- Cómo usarlo para variaciones:
- Activar el modo de vista adecuado (Escritorio, Tablet o Móvil) para asegurar que el sistema paramétrico responda bien.
- Utilizar las Capas (Layers) para identificar rápidamente dónde aplicar los cambios de color y tamaño sin perderse en el diseño complejo.
Recorriendo el Canvas: Tu Nueva Mesa de Trabajo
¡Bienvenido al Canvas de Divi 5! No dejes que el nombre te intimide. Imagina que el Canvas es una mesa de dibujo infinita donde tienes total libertad para moverte, pero con una ventaja mágica: el diseño responde a tus órdenes en tiempo real. Si vienes de Divi 4, a veces sentías que "empujabas" bloques. En el Canvas de Divi 5, tú eres el director de orquesta. Es el lugar donde tus Variables Paramétricas cobran vida.
¿Por qué usar el Canvas para tus Variaciones?
- Visión Total: Te permite ver cómo interactúan los 5 niveles de Negro y Oro sin distracciones de menús laterales estáticos.
- Precisión Visual: Al cambiar un tamaño o un color desde el Contenido Dinámico, el Canvas te muestra el cambio exacto al instante.
- Libertad de Movimiento: Puedes saltar de una versión a otra (Diseño 1, 2 y 3) simplemente haciendo scroll o usando el panel de capas.
Guía Rápida para Perder el Miedo (En 3 Pasos)
Para nuestras 3 variaciones de diseño, usaremos el Canvas así de fácil:.
- El Panel de Capas (Tu Mapa): Si te sientes perdido en el Canvas, abre el panel de Capas (Layers). Es como el índice de un libro; ahí verás tu Sección, tu Fila y tus Módulos. Haz clic en el nombre de la capa y el Canvas te llevará directamente ahí.
- Selección Directa e Inteligente: En el Canvas, lo que ves es lo que tocas. Si quieres cambiar el fondo de tu diseño al Negro Nivel 5, solo haz clic en la sección. Verás que los controles aparecen de forma limpia y contextual.
- El Selector de Dispositivos: Arriba en tu Canvas verás los iconos de Escritorio, Tablet y Móvil. Úsalos constantemente. Al trabajar con tus variables de tamaño (
clamp), verás cómo el diseño se ajusta solo como si fuera elástico.
El Canvas no es para que controlarte, sino para que él trabaje para ti. Si algo no se ve como quieres, no borres; simplemente usa el Contenido Dinámico para probar otro nivel de Oro o Negro. ¡Es un laboratorio de diseño, no tengas miedo de experimentar!"
Hablemos ahora de la herramienta técnica "Canvas" de Divi 5, que funciona como un sistema de Staging (Entorno de Pruebas) interno.
Básicamente, vas a tener un "laboratorio" privado dentro de la misma página sin que el público vea los experimentos. Aquí tienes cómo estructurar esta parte para que pierdas el miedo y entiendas que el Canvas es tu mejor aliado para las variaciones:
El Canvas de Divi 5: Tu Laboratorio de Diseño Privado
Hasta ahora, has trabajado en lo que llamamos el Main Canvas (el lienzo principal), que es lo que el mundo ve cuando publicas. Pero, ¿qué pasa si quieres probar una variación arriesgada con tus variables de Oro y Negro sin "romper" lo que ya tienes?
Aquí es donde entra el nuevo Módulo de Canvas. Imaginalo como una dimensión paralela: puedes duplicar toda tu página, hacer cambios drásticos y solo cuando estés 100% feliz, "activarla" para que sea la versión oficial.
Paso 1: Duplicar para Experimentar
No vamos a rediseñar sobre lo que ya hicimos. Vamos a crear una copia de seguridad instantánea:
- Ve al desplegable de Canvas (arriba a la izquierda en el constructor).
- Busca el "Main Canvas" y haz clic en el icono de Duplicar.
- ¡Importante! Cámbiale el nombre inmediatamente. Ponle algo como "Variación 1: Oro Profundo".
Paso 2: Trabajar en "Modo Desconectado"
- Ahora estás en tu nuevo Canvas. Todo lo que hagas aquí (cambiar colores dinámicos, ajustar tamaños de fuente con
clamp, mover secciones) no afectará a tu página en vivo. - Si te equivocas, no pasa nada.
- Puedes crear tantos Canvases como quieras (Variación A, B y C).
Paso 3: Comparar y Elegir (Vista de Rejilla)
Usa el Grid View (el icono de rejilla junto al desplegable). Verás tus tres variaciones una al lado de la otra como si fueran postales. Esto te permite decidir cuál de los tres diseños con tus variables de Negro y Oro funciona mejor visualmente.
Paso 4: El Paso Final - "Make Main Canvas"
Una vez que hayas terminado tu variación perfecta:
- Haz clic derecho sobre ese Canvas en la rejilla.
- Selecciona "Make Main Canvas" (Convertir en Principal).
- Dale a Publicar.
¡Listo! Tu experimento de laboratorio ahora es la realidad de tu sitio web.
El Blindaje del Diseñador: Un profesional nunca trabaja sobre la marcha. Usar Canvases te permite presentarle al cliente tres opciones reales en una misma sesión, saltando de una a otra con un clic, y activar la que más le guste al instante.
