Filas 

Las filas están anidadas dentro de las secciones y pueden contener una variedad de estructuras de columnas que te ayudan a organizar tu contenido.

Columnas

Las columnas están anidadas dentro de las filas, creando una estructura básica en forma de caja para tu contenido.
Cada fila tiene al menos una columna, incluso si es solo una.

Módulos

Los módulos son los bloques de contenido de Divi. Algunos ejemplos incluyen:

• Formulario de contacto

• Imagen

• Texto

• Carruseles (sliders)

• Cuadro informativo (Blurb)

Consulta todos los módulos que Divi ofrece aquí. Para aprender cómo usar los módulos, revisa el enlace a continuación.

Jerarquía de Elementos Padre/Hijo en los Elementos del Constructor de Divi

Cuando ajustes configuraciones y apliques estilos en Divi, es importante recordar la jerarquía de Secciones, Filas, Columnas y Módulos.

• Las secciones contienen filas

• Las filas contienen columnas

• Las columnas contienen módulos

A esto se le llama jerarquía de elementos padre e hijo.

Los elementos hijo están anidados dentro de los elementos padre y se ven afectados por cualquier estilo de diseño que apliques al elemento padre.

Ventana Emergente de Configuración del Elemento

Cada vez que abras la configuración de un elemento, aparecerá una ventana emergente con todas las configuraciones de contenido, diseño y opciones avanzadas disponibles para ese elemento.

Veamos con más detalle lo que puedes encontrar allí.

Nombre del Elemento

En la esquina superior izquierda verás el nombre del elemento del constructor con el que estás trabajando. Puede ser una sección, fila, columna, módulo, configuración de página, etc.

Si alguna vez no estás seguro de qué elemento estás editando, ¡mira aquí! Te lo dirá.

Preajustes 

Debajo del nombre del módulo puedes acceder a los preajustes globales. Haz clic en el menú desplegable para: Cargar un preajuste guardado, crear un nuevo preajuste, eliminar un preajuste

Los preajustes son configuraciones prediseñadas y guardadas para cualquier sección, fila, columna o módulo dentro de Divi.

Expandir el Modal

El siguiente ícono expande el modal al ancho de tu navegador.

Anclar o Separar el Modal

El siguiente ícono permite anclar o separar el modal.
Al anclar, el modal se fija al lado izquierdo de la ventana del navegador y no se superpone sobre el contenido de tu página, sino que se ajusta al lado.
Para salir de esta posición anclada, haz clic de nuevo en el ícono y el modal se separará, regresando a su posición anterior.

Otros Ajustes

Al hacer clic en el ícono de tres puntos verticales, se accede a más configuraciones para ese elemento.

Guardar en la Biblioteca

Guarda este elemento en tu biblioteca.

Guardar en la Nube de Divi

Guarda este elemento en tu Nube Divi

Prueba A/B (Split Test)

Realiza una prueba A/B con este modal. Aprende cómo hacer una prueba dividida aquí. 

Deshabilitar

Desactiva rápidamente el elemento en escritorio, tablet o móvil.
Cuando el ícono está verde, el elemento está visible.
Cuando está rojo, está oculto.

Bloquear

Bloquea el elemento para que no se puedan cambiar estilos ni configuraciones.
Para desbloquear, haz clic derecho sobre el elemento y selecciona Desbloquear.

Copiar Módulo

Copia el módulo al portapapeles para pegarlo en cualquier parte de la página.

Copiar Estilos del Módulo

Copia los estilos y configuraciones del módulo para aplicarlos a otro módulo.

Pegar Estilos del Botón Uno: Pega los estilos del botón, solo si antes los has copiado usando la opción anterior.

Restablecer Estilos del Módulo:  Restablece los estilos del módulo a los valores predeterminados, eliminando cualquier personalización.

Pegar Módulo: Una vez que hayas copiado el módulo, haz clic aquí para pegarlo en cualquier parte del sitio web. Para que esto funcione, primero debes haber hecho clic en Copiar Módulo.

Ver Estilos Modificados

Muestra solo los ajustes del módulo que han sido modificados.
Esto es útil si hiciste muchos cambios o no recuerdas cuáles fueron, ya que te permite ver rápidamente los estilos modificados para actualizarlos con facilidad.

Extender Estilos del Botón

Al extender los estilos de un módulo, puedes aplicarlos a toda la página, incluidos encabezados, pies de página, el diseño de la página, la sección, la fila o la columna donde se encuentra el módulo.

Aplicar Estilos al Preajuste Activo

Aplica los estilos definidos en la pestaña de diseño del elemento al preajuste activo, que por defecto es el Preajuste Predeterminado.

Editar Estilos del Preajuste

Accede a la configuración y estilos del preajuste actual.

Ir a la Capa

Al hacer clic aquí, se abre el panel de capas y se enfoca en la capa donde se encuentra el elemento de diseño.
Esto es útil para acceder rápidamente a los elementos del constructor, ajustar su configuración, reorganizarlos, y más.

También puedes acceder a estas configuraciones haciendo clic derecho sobre el elemento de diseño con el que estés trabajando.
Cuando haces clic derecho, notarás que aparecen también las opciones de Deshacer (Undo) y Rehacer (Redo) en la parte superior de la lista.

Esto es útil para deshacer o rehacer rápidamente una acción específica.

Barra de Opciones de Búsqueda

A continuación, en la ventana del módulo, encontrarás la barra de búsqueda. Puedes encontrar y acceder rápidamente a configuraciones y estilos usando el campo de búsqueda. Escribe lo que estás buscando para filtrar opciones.

+ Filtro

El botón de filtro funciona de manera similar a la búsqueda, permitiéndote acceder rápidamente a estilos modificados, estilos responsivos. estilos en estado hover, contenido activo

Pestañas: Contenido, Diseño, Avanzado

Todas las ventanas modales tienen tres pestañas:

• Contenido

• Diseño

• Avanzado

Aquí es donde se encuentran los ajustes de contenido, diseño y configuración avanzada para cualquier elemento del Divi Builder en el que estés trabajando (ya sea una sección, fila, columna o módulo).

Pestaña Contenido

Permite ajustar la configuración de contenido del elemento en el que estás trabajando.
Lo que aparece en esta pestaña varía según el tipo de elemento.

Pestaña Diseño

Permite modificar los estilos y ajustes visuales del elemento.

Pestaña Avanzada

Aquí accedes a configuraciones avanzadas del elemento, como:

• CSS personalizado

• Visibilidad

• Efectos de desplazamiento (scroll effects)

• Condiciones
  

• Botones Inferiores: Salir, Deshacer, Rehacer, Guardar

  Al final de la ventana modal, verás 4 botones (de izquierda a derecha):

  • Salir (rojo): Si sales sin guardar, perderás los cambios.

  • Deshacer (morado): Revierte la acción anterior.

  • Rehacer (azul): Rehace una acción que deshiciste.

  • Guardar (verde): Guarda los cambios.

  

De izquierda a derecha, los íconos son:

1. Vista de Esquema (Wireframe): Muestra el diseño estructural de la página.  
   

1. Zoom In / Zoom Out: Acerca o aleja el diseño de la página.
   

1. Vista de Escritorio: Ajusta la vista del constructor al tamaño de escritorio.
   
2. Vista de Tablet: Ajusta la vista al tamaño de tablet.
   
3. Vista Móvil: Ajusta la vista al tamaño de un móvil.
   

Posición Predeterminada del Modal de Configuración

Puedes elegir:  

1.  Última posición utilizada  
   
2. Tamaño mínimo flotante 
   
3. Pantalla completa (fullscreen) 
   
4. Barra lateral izquierda fija 
   
5. Barra lateral derecha fija 
   
6. Panel inferior fijo
   

Flujo de Creación de Páginas

Aquí puedes elegir cómo se cargan las nuevas páginas. Puedes optar por:

• Crear desde cero

• Cargar la ventana de la Biblioteca Divi

• Clonar una página existente

• O ver las tres opciones con "Dame a elegir"

Animaciones de Interfaz del Constructor

Activa o desactiva esta opción para habilitar o deshabilitar las animaciones del Divi Builder al hacer clic en un objeto.

Mostrar Módulos Deshabilitados con Opacidad del 50%

Activa esta opción para que los módulos deshabilitados aparezcan con un 50% de opacidad. Esto es útil para saber visualmente qué módulos están desactivados para una vista específica (escritorio, tablet o móvil).

Si desactivas esta opción, los módulos no se mostrarán en la vista donde están deshabilitados.

Agrupar Configuraciones en Toggles Cerrados

Si activas esta opción, las configuraciones de los módulos se mostrarán en secciones contraídas por defecto. Si la desactivas, se mostrarán abiertas.

Agregar Contenido de Relleno a Nuevos Módulos

Esta opción permite decidir si los módulos nuevos deben mostrar contenido de ejemplo al ser añadidos.
Si la desactivas, los módulos se añadirán vacíos.

Edición de Plantillas del Constructor de Tema

Permite o no la edición de plantillas del Theme Builder desde el Visual Builder.
Si solo deseas que se editen desde el panel del Theme Builder en el escritorio, desactiva esta opción.

Sección Central de la Barra de Herramientas de Divi

Cargar desde la Biblioteca

El ícono de + abre la Biblioteca Divi. Desde allí puedes elegir:

• Diseños Prediseñados: Usa cualquiera de los diseños gratuitos creados por el equipo de Divi.

• Tus Diseños Guardados: Carga diseños guardados localmente o en Divi Cloud.

• Clonar Página Existente: Usa el diseño de una página ya creada.
  

Diseños Prediseñados

Divi ofrece cientos de paquetes de diseño gratuitos.
Puedes filtrar por categorías o buscar por nombre usando la barra lateral izquierda o la barra de búsqueda.

Tus Diseños Guardados

Desde aquí puedes acceder a los diseños guardados en tu biblioteca o en Divi Cloud.
Ideal para guardar plantillas base (wireframes) y reutilizarlas en otros sitios.

Clonar Página Existente

Muy útil si ya tienes una página con el diseño deseado y quieres reutilizarlo en otra página.
Haz clic en la pestaña Clonar Página Existente y selecciona la página a copiar.

Guardar en la Biblioteca (Ícono de flecha hacia abajo)

Permite guardar el diseño actual de la página en tu Biblioteca Divi y/o Divi Cloud.
Puedes:

• Asignarle un nombre

• Guardarlo en Divi Cloud

• Añadirlo a categorías (las categorías con ícono de nube azul son de Divi Cloud)

• Añadir etiquetas (como: modo claro, oscuro, temporada, etc.)
  

Eliminar Diseño de Página (Ícono de papelera)

Borra el diseño completo de la página actual. Ideal si deseas empezar desde cero.

Ícono X / +

Este ícono abre o cierra la barra de herramientas de Divi.
Cuando la barra está abierta verás una X, al estar cerrada verás un +.

Configuración de la Página (Ícono de engranaje)

Abre la ventana de configuración de la página actual (no son configuraciones globales).

Ajustes de Contenido de Página

• Título: Título de la página (editable también desde el backend)

• Extracto: Descripción breve

• Fondo: Añade un color, imagen o video de fondo

• Pruebas A/B: También puedes hacer pruebas A/B en tus páginas
  

Ajustes de Diseño de Página

• Espaciado: El ancho del canal (gutter width) define el espacio entre columnas

• Texto: Define colores personalizados de texto claro y oscuro

Ajustes Avanzados de Página

• CSS Personalizado: Solo se aplica a esta página

• Rendimiento: Por defecto activado. Compila el CSS en archivos minificados para mejorar la velocidad de carga

Historial de Revisiones (Ícono de reloj)

Visualiza los estados del historial de la página actual y también los cambios globales (como en pie de página, cabecera o módulos globales).

Portabilidad (Ícono de doble flecha)

Importa o exporta diseños de páginas.
Ideal para mover plantillas entre sitios Divi. Más información aquí: Importar y Exportar Diseños de Divi Builder.

Busca rápidamente dentro del constructor. Puedes:

• Cambiar la vista del dispositivo

• Administrar el diseño de página

• Acceder a ajustes del constructor

• Buscar documentación

• Abrir elementos específicos

Usa esta función si no sabes dónde está una opción específica. ¡Es muy útil!

Icono de Capas

Haz clic en este icono para obtener una vista general del diseño de la página. Puedes abrir y cerrar todas las capas, y usar la función de filtro para encontrar rápidamente el elemento de diseño que buscas.

Puedes arrastrar y soltar las capas para reorganizar el diseño de la página, o usar los iconos en las capas para acceder a la configuración, duplicar ese elemento o eliminarlo.

Ayuda de Divi Builder (Icono de signo de interrogación)

Este icono carga la Ayuda del Divi Builder al hacer clic. Aquí puedes:

• Navegar por la documentación de Divi

• Ver videos tutoriales

• Consultar atajos de teclado

En la pestaña Video Tutorials, haz clic en el tema que te interesa y mira el video en pantalla.
Para ver la documentación de Divi, visita el Centro de Documentación de Divi.

Todos los atajos de teclado disponibles tanto en Mac como en PC están listados en la pestaña de Atajos de Teclado.

Dominar los atajos de teclado puede ayudarte a acelerar tu proceso de diseño y a acceder y editar elementos rápidamente. Más información: Atajos de Teclado de Divi.

Guardar

Una función que usarás con frecuencia. Antes de salir del Visual Builder, es importante guardar tu diseño.

Divi guarda automáticamente tu diseño de forma periódica, pero este botón también está aquí para guardados instantáneos.

Guardar configuración del Divi Visual Builder

¡Asegúrate siempre de guardar tu trabajo! El Divi Builder guarda automáticamente tu trabajo periódicamente; sin embargo, es mejor hacer un guardado manual final antes de salir del Visual Builder.

Para guardar tu diseño, haz clic en el botón verde Guardar en la parte inferior derecha de la pantalla o usa el atajo de teclado cmd + s (Mac) o ctrl + s (PC).

Luego, haz clic en Salir del Visual Builder en la barra superior para salir del Visual Builder.

Capacidades del Divi Builder

Veamos lo que puedes hacer con el Divi Builder.

Control completo de diseño

Divi no es solo un tema de WordPress. Es un framework de diseño completo que te permite diseñar y personalizar cada parte de tu sitio desde cero.

Tienes control total hasta el más mínimo detalle. Crea sitios perfectos para ti y tus clientes. Explora todas las funciones de diseño que Divi ofrece.

Edición responsiva

Crear sitios responsivos es fácil con Divi.

Divi es responsive por defecto, pero además te da control total sobre cada ajuste de diseño en cada dispositivo móvil.

Esto te permite adaptar perfectamente la apariencia de cada elemento en computadoras, tablets y smartphones.

Características esenciales del Visual Builder

Veamos las funciones esenciales que Divi tiene a tu alcance.

Diseño visual en el front-end

Con el Visual Builder de Divi, puedes arrastrar y soltar elementos, formatear texto, redimensionar elementos, ajustar tamaños responsivos y mostrar u ocultar elementos según el dispositivo.

Constructor de Temas

El Constructor de Temas de Divi es una forma poderosa de crear el sistema de plantillas de tu sitio usando el Visual Builder para diseñar encabezados, pies de página, plantillas de productos, entradas de blog, páginas de categorías, templates de proyectos, página 404 y más.

Arrastrar y redimensionar elementos

Con Divi puedes diseñar layouts complejos arrastrando y soltando elementos en el front-end.

Así puedes ver tus cambios visualmente antes de guardar y publicar tu diseño. También puedes redimensionar elementos arrastrando sus lados para ajustar altura, ancho, relleno y márgenes.

Copiar y pegar estilos

En Divi puedes copiar cualquier cosa de un elemento y pegarla en otro. Puedes copiar configuraciones individuales, grupos de ajustes o el diseño completo de un elemento y transferirlo a otro en la página.

No es necesario abrir configuraciones de diseño de nuevo. Diseña una vez y copia y pega.

Estilos extensibles

Si has creado un estilo de diseño y quieres usarlo en otra parte de la página o en toda la página, puedes extender ese estilo automáticamente donde desees.

Actualiza cientos de elementos a la vez. Controla exactamente dónde y a qué elementos se extienden tus estilos.

Ejemplo: Diseñaste el botón perfecto pero hay docenas en la página. Puedes extender ese estilo a todos los botones al instante.

Atajos de teclado

Los atajos de teclado son clave para la máxima eficiencia. Divi cuenta con una amplia gama de atajos que los usuarios avanzados pueden usar para acelerar significativamente su flujo de trabajo. Una vez que los domines, te preguntarás cómo viviste sin ellos.

Selección múltiple y edición masiva

Si deseas editar varios elementos simultáneamente, como un grupo de imágenes, utiliza la capacidad de selección múltiple de Divi.

Para seleccionar varios, presiona Cmd o Ctrl y haz clic en cada elemento que desees editar en la página.

Puedes editar esos elementos simultáneamente, cambiando estilo y contenido, o moverlos como grupo.

Buscar y reemplazar estilos
Realiza cambios en toda tu página al instante, ahorrando tiempo. Con buscar y reemplazar puedes cambiar valores de diseño, como colores o fuentes, en toda la página o en ubicaciones específicas.

En lugar de abrir cada elemento y cambiar colores repetidamente, usa buscar y reemplazar en todo el documento.

Estilos globales del sitio
Personaliza tu sitio con un sistema de diseño global editando el diseño por defecto de cualquier elemento.

Cuando modificas el diseño predeterminado de un módulo, se actualiza en todo tu sitio al mismo tiempo. Crear un tema de sitio completo más editar diseño a nivel de sitio es la combinación perfecta.

Colores globales del sitio

Divi te permite crear una paleta de colores global para tu sitio. Estos colores son dinámicos y puedes cambiarlos en cualquier momento.

Esto te permite transformar rápidamente el esquema de colores de tu web en pocos momentos.

Edición de código avanzada

Aunque no necesitas saber código para usar Divi, aún tienes la opción de escribir y editar código si lo deseas.

Divi incluye un editor de código completo que facilita escribir y editar código.

Las funciones incluyen resaltado de sintaxis, detección de errores, autocompletado, selector de color, selección de varias líneas, búsqueda, reemplazo y más.

Puedes agregar CSS personalizado a cualquier elemento o código en una página usando el módulo de código de Divi o el área de CSS personalizado en la configuración de página.

Construye tu biblioteca de diseño

Cada instalación de Divi incluye acceso a la Biblioteca Divi, donde puedes guardar elementos de diseño, layouts de páginas, encabezados, pies de página y más para acceder fácilmente al construir sitios.

Divi también incluye miles de diseños prediseñados que puedes usar en cualquier momento.

Elementos globales y contenido dinámico

Con Divi puedes guardar secciones, filas o módulos como diseños globales en tu sitio.

Esto significa que cuando actualizas un elemento global, se sincronizará automáticamente dondequiera que aparezca en tu sitio, ahorrando tiempo y dolores de cabeza.

Divi también puede mostrar contenido dinámico (como tu logo, el título de una entrada, resultados de búsqueda y más) para que dediques menos tiempo a editar cada página y hagas cambios con un solo clic.

Modos de vista móvil y wireframe

Existen múltiples formas de construir con Divi. Puedes cambiar entre diferentes modos de vista, eligiendo el que mejor se adapte a ti o a tu proyecto.

Puedes hacer zoom, alternar vistas de dispositivos móviles, cambiar modos de interacción o construir la estructura de tu página rápidamente en el modo wireframe.

Historial, autoguardado y copias de seguridad del navegador

Divi te respalda. Cada acción que realizas mientras construyes se guarda en tu historial de edición.

Puedes deshacer, rehacer y explorar revisiones con facilidad. Si algo falla, como tu conexión a internet o se cierra tu navegador, Divi guardará automáticamente tu progreso para que puedas restaurarlo.

Opciones de clic derecho

Divi también cuenta con potentes opciones al hacer clic derecho que agilizan aún más el diseño. Aprende todo lo que es posible con las opciones de clic derecho en Divi.

Mejores consejos y prácticas del Divi Builder

Existen muchas formas de usar Divi en tu estrategia de diseño, y cada diseñador o desarrollador tendrá su propio método y flujo de trabajo que funcione mejor para ellos. Te animamos a encontrar el proceso que mejor te funcione.

Alternar entre Visual Builder y modo wireframe

Una de las grandes ventajas del Visual Builder de Divi es que es fácil cambiar entre edición del front-end y modo wireframe.

Cambiar entre ambas vistas toma menos de un segundo. Alternar entre ver tu diseño y la estructura puede ayudarte a arrastrar y soltar elementos rápidamente y visualizar la estructura.

Usa la función de ampliar (zoom out)

Seguramente también has hecho esto: tomar una captura de pantalla de tu diseño para ver cómo luce todo junto.

El ícono de zoom en la barra de Divi te permite obtener una vista general del diseño sin tener que guardar, salir y hacer una captura de pantalla.