Una de las características que hace que Divi 5 sea especialmente sencillo de utilizar es su sistema visual de arrastrar y soltar. El constructor permite colocar, mover y reorganizar los diferentes elementos de una página directamente desde el editor visual, sin necesidad de modificar código para realizar las tareas habituales de diseño.
El sistema de arrastrar y soltar forma parte del flujo de trabajo básico de Divi 5 y permite trabajar de una manera mucho más visual. Puedes mover módulos, reorganizar estructuras y cambiar la posición de diferentes elementos hasta conseguir la composición que necesitas.
El sistema de arrastrar y soltar permite seleccionar un elemento dentro del constructor, mantenerlo pulsado y desplazarlo hasta la posición deseada.
En lugar de tener que modificar manualmente una estructura mediante código, puedes interactuar directamente con los elementos que aparecen en pantalla.
Por ejemplo, puedes seleccionar un módulo de imagen y moverlo dentro de una columna para cambiar su posición respecto a un texto o un botón.
Este sistema también facilita la reorganización de una página cuando el diseño cambia durante el proceso de trabajo.
El funcionamiento del sistema depende del tipo de elemento y de la estructura en la que estés trabajando. En general, el constructor permite reorganizar los diferentes componentes que forman una página.
Entre ellos se encuentran:
La posibilidad de mover estos elementos permite modificar la estructura de una página sin tener que empezar nuevamente desde cero.
Una de las operaciones más habituales consiste en cambiar la posición de un módulo dentro de una columna.
Imagina que tienes una estructura como esta:
Columna
├── Título
├── Texto
└── BotónSi quieres que el botón aparezca antes del texto, puedes reorganizar los elementos para obtener:
Columna
├── Título
├── Botón
└── TextoDe esta forma puedes experimentar con diferentes composiciones de manera rápida y visual.
El sistema de arrastrar y soltar también resulta especialmente útil cuando necesitas cambiar la distribución del contenido.
Por ejemplo, puedes tener:
Columna 1 Columna 2
────────── ──────────
Texto Imageny decidir que determinados elementos deben intercambiar su posición.
Al mover los módulos entre las columnas puedes modificar rápidamente la composición sin tener que crear de nuevo los elementos.
Esta posibilidad resulta especialmente útil durante las fases de diseño y revisión de una página.
El mismo concepto puede aplicarse a las filas. Si una sección contiene varias filas, puedes modificar su orden para cambiar la estructura de la página.
Por ejemplo:
Sección
├── Fila: Presentación
├── Fila: Servicios
└── Fila: ContactoSi posteriormente decides que los servicios deben aparecer antes de la presentación, puedes reorganizar las filas para obtener:
Sección
├── Fila: Servicios
├── Fila: Presentación
└── Fila: ContactoEsto permite modificar la jerarquía visual de una página de forma muy rápida.
Cuando trabajas con un constructor visual es importante identificar dónde se colocará el elemento antes de soltarlo.
Divi utiliza indicadores visuales para ayudarte a determinar la posición que ocupará el elemento que estás desplazando.
Estos indicadores permiten diferenciar entre distintas posibilidades, como colocar un elemento antes o después de otro o introducirlo dentro de una estructura compatible.
Aprender a interpretar estos indicadores hace que el trabajo con el builder sea mucho más rápido y preciso.
Es importante diferenciar entre mover un elemento y duplicarlo.
Cuando arrastras un elemento para cambiarlo de posición, normalmente estás modificando su ubicación dentro de la estructura existente.
Si necesitas mantener el elemento original y crear una copia, debes utilizar las opciones de duplicación o clonación disponibles en Divi.
Por ejemplo, si tienes un botón correctamente configurado y quieres utilizar otro igual en la misma página, no necesitas mover el original. Lo adecuado será duplicarlo y después modificar el contenido del nuevo elemento.
Una de las principales ventajas del sistema de arrastrar y soltar es que permite cambiar de opinión durante el proceso de diseño.
En un proyecto real es habitual que después de visualizar una sección se descubra que determinados elementos deberían estar en otra posición.
Con un constructor tradicional, estos cambios pueden requerir modificar manualmente diferentes partes de la estructura. Con Divi, muchas de estas operaciones pueden realizarse directamente desde el editor visual.
Esto facilita un proceso de diseño más iterativo: crear, visualizar, modificar y volver a comprobar.
Aunque el sistema es sencillo, es importante recordar que Divi trabaja con una estructura jerárquica.
Una página puede organizarse de la siguiente manera:
Sección
└── Fila
└── Columna
└── MóduloPor eso, no todos los elementos pueden colocarse libremente en cualquier posición. Cada componente tiene una función dentro de la estructura y debe mantenerse dentro del nivel que le corresponde.
Comprender esta jerarquía te permitirá utilizar el sistema de arrastrar y soltar de forma mucho más eficiente.
En páginas sencillas, mover elementos resulta muy intuitivo. Sin embargo, cuando una página contiene muchas secciones, filas y módulos, conviene trabajar de forma más organizada.
Antes de mover un elemento es recomendable identificar exactamente qué componente estás seleccionando.
Por ejemplo, si una sección contiene varias filas con numerosos módulos, debes comprobar si quieres mover:
Mover accidentalmente un elemento de nivel superior puede modificar una parte mucho mayor del diseño de lo que pretendías.
El sistema de arrastrar y soltar resulta especialmente eficiente cuando se combina con otras herramientas del builder.
Algunas recomendaciones son:
La posición de los elementos dentro del builder forma parte de la estructura general de la página, por lo que cualquier reorganización debe comprobarse también en dispositivos pequeños.
Una estructura que funciona correctamente en escritorio puede necesitar ajustes cuando las columnas se apilan en móvil.
Por este motivo, después de realizar cambios importantes en la estructura conviene revisar:
Esto es especialmente importante en diseños con varias columnas o composiciones asimétricas.
Imagina una sección con una fila de dos columnas. En la primera tienes un título, un texto y un botón. En la segunda tienes una imagen.
Fila
├── Columna 1
│ ├── Título
│ ├── Texto
│ └── Botón
│
└── Columna 2
└── ImagenDurante una revisión decides que el botón debe aparecer antes del texto.
En lugar de eliminar y volver a crear los módulos, simplemente reorganizas su posición:
Fila
├── Columna 1
│ ├── Título
│ ├── Botón
│ └── Texto
│
└── Columna 2
└── ImagenEl contenido, los estilos y la configuración del botón se mantienen, pero su posición dentro de la estructura cambia.
En un proyecto profesional, el sistema de arrastrar y soltar no debe utilizarse únicamente para experimentar con el diseño. También puede formar parte de un flujo de trabajo organizado.
Una metodología sencilla puede ser:
De esta forma, el constructor se convierte en una herramienta para iterar rápidamente sobre el diseño sin perder el control de la estructura.
Aunque arrastrar y soltar es sencillo, existen algunos errores frecuentes que conviene evitar.
El sistema de arrastrar y soltar de Divi 5 permite modificar visualmente la estructura de una página y reorganizar sus elementos de una manera rápida e intuitiva.
Su verdadero potencial aparece cuando se combina con una buena comprensión de la jerarquía de Divi: secciones, filas, columnas y módulos. Conociendo qué función tiene cada elemento, puedes mover y reorganizar el contenido sin perder el control de la estructura.
Dominar esta herramienta te permitirá trabajar con mayor rapidez durante la fase de diseño y realizar modificaciones sin tener que reconstruir continuamente las páginas desde cero.
Rellena la mayor cantidad de datos posibles y acepta las políticas de privacidad para obtener más información de nuestros servicios:
© 2009-2025 webkamy diseño de páginas web y seo
