Curso de Divi 5 gratuito

Para entender Divi 5, debemos dejar de verlo como un simple plugin o una plantilla aislada. Divi es un ecosistema completo. A diferencia de otros constructores visuales que funcionan como "parches" sobre un tema de terceros, Divi ha sido diseñado desde su concepción como una solución integral donde el Tema y el Constructor trabajan en perfecta sintonía.

El Tema (Theme): La base estructural

El Tema de Divi es mucho más que el diseño superficial que ves al instalarlo. Es la arquitectura sobre la que se construye todo tu sitio web. Su función principal es proporcionar la consistencia global:

• Configuración global: Gestiona la tipografía, los colores corporativos, los espacios y la estructura básica de cabeceras y pies de página.
• Estándares de código: Al ser un ecosistema cerrado, el tema y el builder hablan "el mismo idioma", lo que reduce drásticamente las incompatibilidades que suelen ocurrir cuando combinas un tema de un desarrollador con un constructor de otro.
• Fiabilidad: Es el marco de trabajo (framework) estable que asegura que, sin importar lo complejo que sea tu diseño, la estructura web mantenga su integridad.

El Constructor (Builder): La libertad creativa

El Divi Builder es la capa visual que vive sobre el tema. Es donde ocurre la magia creativa. Su característica diferencial es la edición en tiempo real (front-end). Mientras que el Tema define las reglas, el Builder te da las herramientas para romperlas (o personalizarlas) según lo necesites:

• Interfaz visual: Puedes ver exactamente cómo quedará tu página mientras diseñas, eliminando la necesidad de guardar y refrescar para previsualizar cambios.
• Flexibilidad total: Te permite controlar desde el ancho de una columna hasta la sombra exacta de un botón o la animación de una sección.
• Desacoplamiento creativo: Gracias a Divi 5, el builder ahora procesa la información de manera mucho más eficiente, separando la carga del editor de la carga de la página final.

Imagina que el Tema es el lienzo y las guías de estilo de una obra de arte, y el Builder es el set completo de pinceles, pinturas y espátulas. Divi no es solo el lienzo o solo los pinceles; es la combinación de ambos trabajando juntos para que no tengas que preocuparte por si tus herramientas son compatibles con tu superficie de trabajo.

En las próximas lecciones, veremos cómo esta integración profunda es la que permite que, al modificar un ajuste en el Tema, todo el diseño creado con el Builder se actualice automáticamente, ahorrándote horas de trabajo manual.

Una de las mayores fortalezas de Divi 5 es su democratización del diseño web. No es una herramienta exclusiva para programadores ni tampoco una herramienta limitada para principiantes; es una plataforma diseñada para escalar según las necesidades del usuario. Su versatilidad permite que distintos perfiles encuentren en él el compañero ideal para sus proyectos.

1. El Emprendedor o Dueño de Negocio (El perfil "Hazlo tú mismo")

Si no tienes conocimientos de código o diseño avanzado, Divi es tu puerta de entrada al mundo digital:

• Sin curva de aprendizaje técnica: Puedes construir una presencia profesional sin tocar una sola línea de CSS o PHP.
• Autonomía total: No dependes de terceros para cambiar un texto, subir una foto de producto o crear una landing page de oferta.
• Resultados inmediatos: Gracias a los layouts predefinidos, puedes tener una web funcional en cuestión de horas.

2. El Diseñador Freelance (El perfil "Creativo eficiente")

Para quienes viven del diseño, el tiempo es dinero. Divi 5 permite pasar del concepto a la realidad a una velocidad vertiginosa:

• Flujo de trabajo acelerado: El sistema de Presets y la biblioteca de elementos te permiten crear un sitio completo en la mitad de tiempo que antes.
• Control estético absoluto: Tienes libertad total para aplicar cualquier estilo visual, sombra, animación o efecto sin restricciones de plantillas rígidas.
• Entrega profesional: Puedes entregar a tus clientes sitios web que, además de visualmente impactantes, son fáciles de gestionar por ellos mismos tras la entrega.

3. La Agencia Web (El perfil "Escalable y técnico")

Para equipos que gestionan múltiples clientes, Divi 5 se convierte en una herramienta de producción industrial:

• Sistema de diseño (Design System): Gracias a la gestión global de Presets, puedes mantener la coherencia de marca en múltiples sitios sin errores.
• Rendimiento para SEO: Con la nueva arquitectura de motor de Divi 5, las agencias pueden garantizar mejores tiempos de carga (Core Web Vitals), un factor crítico para clientes corporativos.
• Mantenimiento sencillo: La estandarización que ofrece el Theme Builder facilita que cualquier miembro del equipo pueda realizar tareas de mantenimiento en proyectos desarrollados por otros compañeros.

Divi 5 no tiene un perfil único. Está diseñado para aquellos que buscan el equilibrio perfecto entre facilidad visual y potencia técnica. Si valoras el control, la rapidez y la escalabilidad, Divi es la herramienta que te permitirá evolucionar desde un sitio personal hasta complejos ecosistemas comerciales.

La versatilidad de Divi 5 lo convierte en una "navaja suiza" para el desarrollo web. Aunque permite crear casi cualquier cosa, su arquitectura destaca especialmente en escenarios donde la combinación de diseño visual, rendimiento y facilidad de gestión es fundamental.

1. Landing Pages de Alta Conversión

Es quizás el uso más extendido. Divi permite diseñar páginas de aterrizaje enfocadas en objetivos específicos (venta, registro, leads) con una velocidad asombrosa:

• Tests A/B integrados: Puedes probar diferentes versiones de un botón o un formulario para ver cuál convierte mejor.
• Bloques reutilizables: Diseñas un formulario de contacto perfecto una vez y lo despliegas en 10 landings distintas con un clic.
• Foco en el CTA: La capacidad de ajustar márgenes, sombras y animaciones permite dirigir la mirada del usuario exactamente donde queremos: al botón de compra.

2. Sitios Web Corporativos y de Marca

Para empresas que necesitan mantener una identidad visual estricta, Divi 5 es imbatible gracias a su Sistema de Presets:

• Identidad Global: Cambias el tono de azul en el Preset de los botones y toda la web se actualiza al instante, asegurando coherencia.
• Estructura clara: El Theme Builder permite definir cabeceras y pies de página globales que se mantienen constantes en toda la navegación.

3. Tiendas Online (WooCommerce)

Divi 5 ha revolucionado la creación de tiendas con WooCommerce al permitir personalizar el look & feel de elementos que antes eran rígidos:

• Plantillas de producto: Diseñas un layout único para tus productos (donde aparece la foto, precio, descripción) y Divi lo aplica automáticamente a todo el catálogo.
• Checkout optimizado: Puedes estilizar las páginas de carrito y pago para reducir la fricción y aumentar la tasa de conversión.

4. Blogs y Portafolios Dinámicos

Para creadores de contenido, la clave es la legibilidad y la gestión de contenido:

• Contenido Dinámico: Puedes crear plantillas donde el título, la fecha y la imagen destacada se insertan automáticamente desde WordPress, permitiendo diseños de blog complejos y visualmente atractivos.
• Galerías y Grid: La capacidad de mostrar proyectos o artículos en cuadrículas personalizadas facilita una navegación inmersiva para el usuario.

Divi 5 es el estándar para proyectos donde el tiempo de desarrollo es limitado pero el resultado final debe ser de alta calidad visual. Ya sea una web sencilla de marca personal o un eCommerce complejo con cientos de productos, Divi se adapta a la escala que necesites.

El cambio más significativo de Divi 5 no es visual, sino estructural. El "motor" de un constructor visual es el conjunto de scripts y procesos que traducen tus clics en el editor en código (HTML/CSS) que el navegador finalmente interpreta. En las versiones anteriores, este proceso estaba limitado por una arquitectura basada en el estándar clásico de WordPress, lo que generaba lo que llamamos "deuda técnica".

¿Por qué un nuevo motor?

La necesidad de este cambio responde a tres pilares fundamentales:

• Optimización del DOM (Document Object Model): En versiones anteriores, para lograr diseños complejos, Divi a menudo necesitaba anidar múltiples capas de contenedores (divs) innecesarios. El nuevo motor genera una estructura de HTML mucho más "limpia" y semántica, lo que reduce el peso total de la página y facilita la tarea del navegador al pintar el diseño.
• Procesamiento Inteligente: El antiguo motor solía cargar gran parte de sus recursos de forma global. El nuevo sistema utiliza un enfoque modular: solo carga los archivos necesarios para los elementos que están presentes en la página actual. Esto reduce drásticamente el tamaño del paquete de carga (payload) inicial.
• Reactividad mejorada: La nueva arquitectura está diseñada para manejar cambios en tiempo real sin recargar o procesar tareas pesadas en segundo plano. Esto se traduce en una interfaz (UI) que responde al instante, sin el "lag" o retardo que a veces experimentábamos al arrastrar elementos o abrir paneles de configuración en entornos con muchas capas.

Impacto técnico inmediato

Para el desarrollador, este motor significa que el "bloat" o sobrecarga de código ha sido minimizado. Ya no dependemos tanto de la potencia de procesamiento del servidor para renderizar la página; ahora, la carga se distribuye de forma más eficiente, lo que se traduce en:

• Menor tiempo de respuesta del servidor (TTFB): Al enviar un código más ligero desde el inicio.
• Estabilidad en ediciones masivas: La capacidad de manejar páginas con cientos de módulos sin que el navegador se bloquee o la interfaz se vuelva lenta.
• Compatibilidad futura: Al limpiar la base de código, Divi se posiciona mejor para integrar nuevas tecnologías web y cumplir con los estándares cambiantes de accesibilidad y SEO sin necesidad de parches externos.

El paso de la versión 4 a la 5 no es una simple actualización incremental; representa un cambio de paradigma en la forma en que el constructor gestiona la información. Mientras que Divi 4 se diseñó bajo los estándares de desarrollo web de hace una década, Divi 5 ha sido reconstruido desde cero pensando en la eficiencia y la tecnología moderna.

Arquitectura de código: De la acumulación a la optimización

Una de las diferencias más notables es la manera en que se genera el HTML de tu sitio. Divi 4, debido a su estructura legacy, tendía a generar una gran cantidad de contenedores anidados (lo que coloquialmente llamamos "div soup") para conseguir diseños complejos. Divi 5 cambia esto radicalmente: su nuevo motor produce un código HTML mucho más limpio, semántico y estructurado. Esto no solo facilita que los buscadores entiendan mejor tu contenido (SEO), sino que reduce drásticamente la carga de trabajo que debe realizar el navegador del visitante para renderizar la página.

Experiencia de edición: Del servidor al navegador

En la versión 4, el constructor dependía constantemente de peticiones al servidor para procesar cada cambio que realizabas, lo que podía causar latencia o "lag" en entornos con hosting compartido o diseños muy pesados. En Divi 5, se ha desacoplado el editor del servidor. La interfaz ahora es increíblemente reactiva y rápida porque procesa gran parte de las acciones en el navegador del usuario. El resultado es una experiencia de diseño mucho más fluida, donde los cambios se aplican al instante, sin interrupciones ni tiempos de espera.

Gestión de recursos y carga inteligente

Divi 4 solía cargar una gran parte de sus librerías de estilos y scripts de forma global, independientemente de si los módulos específicos estaban presentes en la página o no. Divi 5 implementa una carga modular y selectiva. Si tu diseño no incluye un formulario, los archivos necesarios para los formularios simplemente no se cargan. Esta optimización inteligente reduce el peso del paquete de datos inicial de tu página, permitiendo que el sitio cargue mucho más rápido y obteniendo puntuaciones superiores en las métricas de Core Web Vitals.

El rendimiento no es un añadido opcional en Divi 5; es un pilar central sobre el que se ha reconstruido toda la herramienta. En la web actual, donde los buscadores penalizan los sitios lentos y los usuarios abandonan las páginas que tardan más de tres segundos en cargar, esta versión marca un antes y un después en cómo se entrega el contenido al navegador.

Impacto directo en los Core Web Vitals

Los Core Web Vitals (métricas de experiencia de usuario de Google) dependen directamente de cómo se construye una web. Divi 5 mejora estos tres indicadores clave:

• LCP (Largest Contentful Paint): Al optimizar la carga de scripts y priorizar la renderización del contenido visible, la "pintura" del elemento principal es mucho más rápida.
• CLS (Cumulative Layout Shift): La nueva gestión de estilos y dimensiones evita esos saltos molestos de contenido que ocurrían mientras la página terminaba de cargar, manteniendo la estabilidad visual desde el primer milisegundo.
• INP (Interaction to Next Paint): Gracias al motor reactivo, la respuesta a clics y scrolls es casi instantánea, superando con creces la fluidez de versiones anteriores.

Reducción drástica del DOM

Uno de los mayores problemas históricos de los constructores visuales era la "inflación del DOM" (crear demasiadas etiquetas div para estructuras simples). Divi 5 utiliza un enfoque minimalista. Por cada elemento que añades, el sistema genera el código mínimo indispensable. Menos nodos en el árbol DOM significa que el navegador necesita menos memoria y menos potencia de CPU para dibujar tu página, logrando que sitios complejos funcionen con la misma agilidad que sitios estáticos.

Optimización inteligente de recursos (CSS y JS)

Divi 5 abandona la carga global de archivos. Si en una página específica no estás utilizando un módulo de vídeo o un carrusel, los estilos y scripts asociados a esos componentes simplemente no se cargan. Esta "carga bajo demanda" reduce el tamaño de las peticiones HTTP iniciales. Al enviar menos bytes al navegador del cliente, la web no solo carga más rápido en conexiones de fibra, sino que es considerablemente más eficiente en dispositivos móviles con redes 4G o 5G inestables.

Qué ya no hace falta optimizar

Gracias a estas mejoras arquitectónicas, muchas de las "recetas" tradicionales de optimización para Divi (como el uso excesivo de plugins externos de caché avanzada o minificación agresiva) ahora son menos críticas. Aunque el hosting y la calidad de las imágenes siguen siendo importantes, Divi 5 hace gran parte del trabajo pesado desde el propio núcleo, permitiéndote concentrarte en el diseño en lugar de en la depuración técnica constante.

La transición a Divi 5 no es un salto al vacío. El equipo de Elegant Themes ha diseñado esta versión no solo pensando en el rendimiento actual, sino en garantizar la estabilidad a largo plazo de tus proyectos. La clave de esta evolución reside en un sistema inteligente de compatibilidad que protege tu trabajo previo mientras abre la puerta a las tecnologías de desarrollo web del futuro.

El sistema de retrocompatibilidad (Divi 5 Migrator)

La mayor preocupación al actualizar un constructor visual suele ser la pérdida de diseños o la rotura de elementos. Divi 5 incluye un Migrator integrado que analiza tu sitio web antes de realizar el cambio. Este sistema clasifica tus elementos en dos categorías:

• Elementos nativos: Se convierten automáticamente al nuevo formato de Divi 5, aprovechando inmediatamente las mejoras de rendimiento y la nueva arquitectura.
• Elementos en modo compatibilidad: Aquellos módulos o personalizaciones que aún no están listos para la nueva API se envuelven en un contenedor "legacy" (heredado). Esto permite que sigan funcionando exactamente como lo hacían en Divi 4, sin que tu web se rompa durante la transición.

Ecosistema y desarrollo de terceros

Divi no vive aislado. Al ser un estándar en la industria, miles de desarrolladores crean plugins, módulos y extensiones para el ecosistema. La arquitectura de Divi 5 se ha abierto para que estos desarrolladores puedan migrar sus herramientas al nuevo formato. Gracias a la transparencia de este proceso y a la documentación técnica avanzada, el mercado de Divi está actualizándose rápidamente, asegurando que tus herramientas favoritas sigan siendo compatibles y optimizadas para el nuevo motor.

Preparados para el futuro de WordPress

Divi 5 ha sido reescrito con una visión a largo plazo. Al abandonar las dependencias de código antiguo y adoptar una estructura basada en JSON y una API más flexible, el constructor está ahora mucho más alineado con el rumbo que está tomando el núcleo de WordPress. Esta nueva base permite:

• Escalabilidad: Añadir nuevas funcionalidades complejas sin sobrecargar el sistema.
• Integraciones modernas: Una mejor comunicación con herramientas externas, APIs de terceros y servicios de optimización.
• Sostenibilidad: Un ciclo de vida más largo para tus proyectos, donde actualizar el tema y el constructor no será una tarea traumática, sino una rutina de mantenimiento sencilla y segura.

La arquitectura de Divi 5 está diseñada para ser extremadamente eficiente, pero el rendimiento real de tu sitio web sigue dependiendo en gran medida de la infraestructura donde se aloje. Un hosting mal optimizado puede anular las mejoras de velocidad que aporta el nuevo motor, por lo que elegir un servidor adecuado es la primera decisión estratégica de cualquier proyecto.

La importancia de un entorno optimizado

Divi 5 requiere recursos de servidor que permitan ejecutar procesos de forma rápida. No se trata solo de espacio en disco, sino de la capacidad de procesamiento (CPU) y la gestión de la memoria RAM. Un hosting "barato" o saturado, que agrupa miles de sitios web en un solo servidor sin aislamiento, suele ser el principal cuello de botella que causa lentitud en la carga del editor y problemas de estabilidad.

Requisitos técnicos clave

Para garantizar que Divi 5 funcione con fluidez y sin errores, tu proveedor de hosting debe cumplir, como mínimo, con los siguientes estándares de configuración:

• Memoria PHP (PHP Memory Limit): Se recomienda encarecidamente un mínimo de 256 MB. Divi 5 procesa mucha información al renderizar diseños complejos, y un límite inferior causará errores 500 o pantallas en blanco.
• Tiempo de ejecución (Max Execution Time): Debe estar configurado al menos en 120 segundos (o más). Esto permite que el instalador y los procesos de guardado completen sus tareas sin ser cortados por el servidor.
• Versión de PHP: Divi 5 está optimizado para las versiones más recientes y estables (actualmente 8.1, 8.2 o superior). El uso de versiones antiguas no solo penaliza el rendimiento, sino que supone un riesgo de seguridad.
• Soporte para ModSecurity / WAF: Asegúrate de que el firewall del hosting no bloquee erróneamente las peticiones del constructor, algo común en servidores con reglas de seguridad demasiado restrictivas.

Tipos de hosting y rendimiento

La elección del tipo de hosting impacta directamente en tu flujo de trabajo:

• Hosting Compartido (Low-end): A menudo insuficiente para proyectos profesionales con Divi. Si el servidor está sobrecargado, notarás lentitud al abrir las opciones de los módulos o al intentar guardar cambios.
• Hosting Administrado (Managed WordPress): Es la opción ideal. Estos servidores están configurados específicamente para WordPress, ofrecen caché a nivel de servidor (que funciona en perfecta sintonía con Divi), y suelen tener límites de memoria más generosos por defecto.
• VPS o Servidores Cloud: Recomendados para agencias o sitios web de alto tráfico. Ofrecen recursos dedicados que garantizan que la velocidad del constructor sea constante, independientemente de la carga de otros usuarios en el servidor.

Qué buscar en un proveedor

Más allá de las especificaciones técnicas, prioriza proveedores que ofrezcan:

• Entornos de Staging: Capacidad de crear una copia de tu sitio para probar cambios en Divi 5 antes de llevarlos a producción.
• Soporte especializado: Equipos que entiendan la estructura de WordPress y Divi, capaces de resolver problemas de permisos o bloqueos en minutos.
• Almacenamiento NVMe/SSD: Indispensable para reducir los tiempos de acceso a archivos y bases de datos.
• Certificados SSL gratuitos y copias de seguridad automatizadas: Elementos no negociables en cualquier proyecto web actual.

PHP es el lenguaje de programación sobre el que corre WordPress y, por extensión, Divi 5. La versión de PHP que utiliza tu servidor actúa como el motor que procesa todas las instrucciones de tu sitio web. Utilizar una versión obsoleta no solo limita las capacidades de Divi 5, sino que también pone en riesgo la seguridad y el rendimiento general de tu proyecto.

El motor de tu web

Divi 5 ha sido desarrollado aprovechando las optimizaciones de rendimiento y las nuevas funcionalidades introducidas en las versiones modernas de PHP. Ejecutar Divi 5 en versiones antiguas genera dos problemas fundamentales:

• Desempeño limitado: Las versiones actuales de PHP (8.x) ofrecen una gestión de memoria mucho más eficiente y una velocidad de ejecución significativamente superior. Al no aprovechar estas mejoras, obligas a Divi 5 a trabajar con un motor antiguo, lo que se traduce en una experiencia de edición más lenta y tiempos de carga mayores para el usuario final.
• Vulnerabilidades de seguridad: Las versiones de PHP antiguas han llegado al final de su ciclo de vida (EOL). Esto significa que ya no reciben parches de seguridad, dejando a tu sitio vulnerable a ataques conocidos que podrían evitarse simplemente manteniendo el software actualizado.

Requisitos y versiones recomendadas

Para asegurar que todas las funciones de Divi 5 operen correctamente, incluyendo su nuevo sistema de renderizado y las herramientas del Theme Builder, se establecen las siguientes directrices:

• Versión recomendada: PHP 8.3 o 8.4. Estas versiones ofrecen el mejor equilibrio entre estabilidad, seguridad y velocidad de ejecución para el nuevo motor de Divi.
• Versión mínima operativa: PHP 8.1. Es el suelo necesario para que las funciones modernas del constructor no presenten errores de compatibilidad.
• Evitar: Cualquier versión inferior a 8.0. La compatibilidad con versiones 7.x ha sido prácticamente eliminada para permitir que el nuevo motor utilice funciones modernas del lenguaje.

Cómo verificar y actualizar

Puedes comprobar qué versión está ejecutando tu sitio directamente desde tu panel de WordPress sin necesidad de acceder al servidor:

1. Ve al menú Herramientas > Salud del sitio.
2. Haz clic en la pestaña Información.
3. Despliega la sección Servidor y localiza la fila Versión de PHP.

Si tu versión es inferior a la recomendada, el proceso de actualización se realiza desde el panel de control de tu hosting (cPanel, Plesk o el panel propio de tu proveedor). Busca la opción denominada "Selector de PHP" o "Configuración PHP". Siempre es recomendable realizar una copia de seguridad completa antes de cambiar la versión de PHP, aunque en entornos modernos con WordPress actualizado, el cambio suele ser transparente e inmediato.

La estabilidad de tu proyecto no depende solo de Divi 5, sino del entorno sobre el que se ejecuta: WordPress. Al igual que Divi evoluciona para aprovechar las últimas tecnologías web, el núcleo de WordPress avanza constantemente para ofrecer mejores herramientas, mayor seguridad y optimizaciones de rendimiento. Ejecutar Divi 5 en una versión desactualizada de WordPress es, en la práctica, limitar el potencial de ambas herramientas.

La importancia de la versión actual

Divi 5 ha sido diseñado utilizando las APIs más recientes y eficientes de WordPress. Cada nueva versión del CMS incluye correcciones de seguridad, mejoras en la gestión de la base de datos y optimizaciones en la carga de archivos. Trabajar con una versión del núcleo obsoleta significa que tu sitio no solo carecerá de estas protecciones, sino que podría presentar incompatibilidades técnicas donde el constructor visual intente llamar a funciones que tu WordPress antiguo aún no posee.

Requisitos de versión

Para garantizar el funcionamiento óptimo de Divi 5 en 2026, la política debe ser siempre mantener la instalación en la versión más reciente y estable ofrecida por WordPress.org.

• Recomendación absoluta: Utilizar siempre la versión actual (n) de WordPress.
• Estabilidad mínima: No se recomienda, bajo ninguna circunstancia, trabajar en versiones con más de dos iteraciones de antigüedad. Si WordPress lanza la versión 7.x, intentar mantenerse como máximo en la 6.x, aunque lo ideal es la actualización inmediata.

Por qué mantener el núcleo actualizado

Actualizar WordPress no es solo una tarea de mantenimiento, es una estrategia de supervivencia digital por varias razones clave:

• Seguridad proactiva: La gran mayoría de los ataques a sitios web WordPress aprovechan vulnerabilidades que ya han sido parcheadas en versiones recientes. Mantener el núcleo actualizado es la primera barrera de defensa.
• Compatibilidad de plugins: La mayoría de los plugins de calidad (SEO, seguridad, caché) desarrollan sus actualizaciones basándose en las últimas versiones de WordPress. Si tu núcleo está obsoleto, estos plugins dejarán de funcionar correctamente o podrían generar conflictos graves.
• Evolución de Gutenberg y APIs: Aunque Divi 5 es un constructor independiente, la integración profunda con las funciones de WordPress (como las librerías de medios, la gestión de usuarios o las APIs de REST) depende de la versión del núcleo. Divi 5 está optimizado para aprovechar estas nuevas capacidades y ofrecer una interfaz de edición más rápida y robusta.

Gestión de versiones en proyectos profesionales

En un entorno de trabajo profesional, siempre debes probar las actualizaciones antes de aplicarlas en producción. Si gestionas múltiples sitios, utiliza un entorno de staging (pre-producción) donde puedas actualizar WordPress y verificar que Divi 5 funcione sin incidencias. Una vez validada la compatibilidad, procede a actualizar tu sitio principal de manera inmediata.

La obtención de los archivos oficiales de Divi 5 es el primer paso crítico para garantizar la seguridad y el rendimiento de tu sitio web. Al ser un producto de pago (software comercial), es fundamental descargar el paquete de instalación directamente desde la fuente oficial para evitar versiones alteradas, código malicioso o archivos corruptos que puedan comprometer tu proyecto.

Acceso a tu área de clientes

Para descargar Divi, debes iniciar sesión en el sitio web oficial de Elegant Themes utilizando las credenciales de tu cuenta. Es importante recordar que el acceso a las descargas y a las actualizaciones automáticas está vinculado a una suscripción activa (ya sea anual o de por vida). Si tu licencia ha expirado, no podrás acceder a las últimas versiones del constructor ni recibirás las actualizaciones críticas de seguridad.

Consideraciones previas a la descarga

Antes de proceder, asegúrate de tener claros dos aspectos fundamentales:

• La licencia (API Key): No basta con descargar el archivo. Para que Divi 5 funcione correctamente, reciba actualizaciones automáticas y te permita acceder a la biblioteca de layouts predefinidos, necesitarás activar el tema dentro de tu WordPress usando tu nombre de usuario y tu API Key. Ten estos datos a mano antes de empezar.
• La versión del archivo: Asegúrate siempre de estar descargando la versión más reciente disponible en el panel. Elegant Themes publica actualizaciones frecuentes con mejoras de rendimiento y parches de seguridad; trabajar con un archivo "antiguo" que tengas guardado en tu ordenador no es recomendable.

Cómo obtener el archivo instalable

El proceso es directo y está diseñado para ser sencillo:

1. Accede a la sección "My Account" (Mi cuenta) en la web de Elegant Themes.
2. Dirígete a la pestaña "Downloads" (Descargas).
3. Haz clic en el botón "Download Divi".
4. El sistema descargará un archivo en formato .zip. No es necesario descomprimir este archivo antes de subirlo a WordPress; el CMS lo instalará directamente desde el paquete comprimido.

Una vez descargado, el archivo divi.zip es todo lo que necesitas para comenzar la instalación. Guárdalo en una ubicación segura en tu equipo, aunque siempre podrás volver a descargarlo desde tu cuenta oficial si es necesario.

Una vez que tienes el archivo divi.zip en tu equipo, el proceso de instalación dentro de WordPress es directo y estandarizado. Al ser Divi un tema premium, no se encuentra en el repositorio público de WordPress.org, por lo que la instalación debe realizarse de forma manual subiendo el paquete que obtuviste en el paso anterior.

Acceso al gestor de temas

Para comenzar, debes acceder al panel de administración de tu WordPress (típicamente tusitio.com/wp-admin). Una vez dentro:

1. Navega al menú lateral izquierdo y haz clic en Apariencia.
2. Selecciona la opción Temas.
3. En la parte superior, haz clic en el botón Añadir nuevo.
4. A continuación, pulsa el botón Subir tema que aparece en la parte superior central de la pantalla.

Proceso de subida e instalación

Tras hacer clic en "Subir tema", aparecerá un campo para seleccionar el archivo. Sigue estos pasos:

1. Haz clic en Seleccionar archivo y busca en tu ordenador el archivo divi.zip que descargaste previamente.
2. Pulsa el botón Instalar ahora.
3. WordPress comenzará a descomprimir y copiar los archivos necesarios. Es fundamental que no cierres la ventana ni recargues la página mientras este proceso esté en curso, ya que interrumpir la conexión puede dejar archivos corruptos en el servidor.

Solución de problemas comunes: Límites de servidor

Uno de los errores más frecuentes al instalar Divi ocurre cuando el servidor tiene configurado un límite de subida de archivos pequeño (comúnmente 2MB o 8MB). Si al intentar subir el archivo recibes un error indicando que "el archivo excede el tamaño máximo permitido", no significa que Divi esté roto, sino que tu hosting está bloqueando la subida. En este caso, tienes dos opciones:

• Aumentar los límites: Modificar el archivo php.ini o .htaccess de tu servidor para aumentar los valores de upload_max_filesize y post_max_size.
• Subida vía FTP/SFTP: Si no tienes acceso a la configuración del servidor, puedes subir la carpeta de Divi descomprimida directamente a la ruta /wp-content/themes/ de tu instalación mediante un cliente FTP como FileZilla.

Activación del tema

Una vez que WordPress confirme la instalación exitosa, verás un mensaje en pantalla indicándolo. Haz clic en el enlace Activar que aparece en ese mismo mensaje. A partir de este momento, Divi 5 será el tema activo de tu sitio web y podrás comenzar a utilizar sus herramientas de diseño y construcción en cualquier página o entrada.

La activación de la licencia es el paso final indispensable para completar la instalación de Divi 5. Aunque el tema funciona después de subir el archivo .zip, el constructor quedará "limitado" hasta que verifiques tu propiedad del software. Esta activación no es un mero trámite administrativo; es la llave que desbloquea las funciones conectadas a los servidores de Elegant Themes, fundamentales para el mantenimiento y la creatividad.

Requisitos previos

Para activar la licencia, necesitas dos datos únicos que vinculan tu instalación de WordPress con tu cuenta de usuario. No utilices tu correo electrónico y contraseña de acceso al sitio, sino la información de tu suscripción:

• Nombre de usuario: Es el nombre de usuario de tu cuenta en Elegant Themes.
• API Key: Es una cadena alfanumérica larga que actúa como contraseña de seguridad. Puedes obtenerla iniciando sesión en el sitio web de Elegant Themes, yendo a Account Details > API Key.

Pasos para la activación

Una vez que tengas tu nombre de usuario y tu API Key a mano, sigue este procedimiento dentro de tu WordPress:

1. En el menú lateral izquierdo, despliega la opción Divi y haz clic en Opciones del tema.
2. Dirígete a la pestaña Actualizaciones (Updates).
3. En el campo Nombre de usuario, introduce tu nombre de usuario de Elegant Themes.
4. En el campo API Key, pega el código que copiaste de tu cuenta.
5. Haz clic en el botón Guardar cambios.

Si la información es correcta, el sistema validará la licencia automáticamente y verás que los mensajes de aviso sobre la falta de licencia desaparecen. Si aparece algún error, verifica que no haya espacios en blanco extra antes o después del código de la API Key.

¿Por qué es obligatorio activar?

Mantener Divi 5 activado proporciona beneficios críticos para la salud y productividad de tu proyecto:

• Actualizaciones automáticas: Es la razón más importante. Podrás actualizar Divi directamente desde el escritorio de WordPress con un solo clic, asegurando que recibes las últimas mejoras de rendimiento y parches de seguridad.
• Biblioteca Divi (Cloud): La activación te permite importar layouts predefinidos, secciones y módulos desde la biblioteca oficial, lo que acelera radicalmente tu flujo de diseño.
• Soporte técnico: Si en algún momento necesitas abrir un ticket de soporte con el equipo de Elegant Themes, te solicitarán que tu cuenta esté correctamente validada en el sitio donde experimentas el problema.

Recuerda que tu licencia es válida para un número determinado de sitios web según tu plan (Anual o Lifetime). Si gestionas múltiples proyectos, asegúrate de tener una licencia con suficientes activaciones disponibles o utiliza las credenciales correspondientes a cada cliente si el sitio es gestionado por terceros.

La interfaz de Divi 5 ha sido rediseñada bajo una premisa fundamental: eliminar la fricción entre la idea creativa y su ejecución. Al abrir el constructor visual, lo primero que notarás es un entorno mucho más limpio, enfocado en el contenido y con una latencia reducida al mínimo. La interfaz ya no "compite" con tu diseño, sino que se retrae para dejarte trabajar, apareciendo solo cuando la necesitas.

El Lienzo Visual (Canvas)

El centro de la experiencia es el lienzo, una representación real de cómo se verá tu página en el navegador. En Divi 5, el canvas es más estable; la navegación por la página mientras estás en modo edición es fluida, eliminando esos saltos de pantalla que podían ocurrir en versiones anteriores. Al hacer scroll o desplazarte, los elementos se mantienen en su sitio, permitiéndote tener una visión clara de la estructura jerárquica de tu diseño sin distracciones.

La Barra de Herramientas y Controles

En la parte superior, encontrarás la barra de herramientas principal. En Divi 5, esta barra ha sido simplificada para ofrecer acceso rápido a las funciones más críticas:

• Historial y Deshacer/Rehacer: Con una gestión de memoria mejorada, el historial es ahora más robusto, permitiéndote retroceder pasos complejos sin miedo a perder el estado de la página.
• Selector de vistas: Cambia instantáneamente entre Escritorio, Tablet y Móvil. La gran novedad aquí es la reactividad; al cambiar de vista, el motor de Divi 5 recalcula los estilos inmediatamente, permitiéndote ajustar el diseño responsive en tiempo real.
• Gestión de capas: El sistema de capas es más intuitivo y permite arrastrar y soltar elementos entre contenedores con una precisión milimétrica, facilitando la organización de páginas complejas.

Paneles de Configuración (Modales)

Los paneles donde editas los textos, colores y estilos de cada módulo han recibido una optimización importante. En lugar de paneles que obstruyen toda la pantalla, Divi 5 utiliza un sistema de modales inteligentes que puedes mover, anclar o redimensionar. Esto te permite tener el panel de configuración abierto en una zona de la pantalla mientras observas cómo cambian los ajustes en el elemento en tiempo real en la otra parte del lienzo.

Interfaz Contextual

Divi 5 apuesta por una interfaz altamente contextual. Esto significa que los iconos y opciones de edición no están siempre visibles, sino que aparecen al pasar el ratón (hover) sobre el elemento. Esta "limpieza visual" reduce el ruido en la pantalla, permitiéndote juzgar la estética real de tu diseño sin iconos de configuración interfiriendo en tu visión, una mejora fundamental para los diseñadores que buscan la perfección visual.

El flujo de trabajo en Divi 5 no es una serie de pasos aleatorios, sino un proceso iterativo y lógico. Al entender este ciclo, pasarás de "luchar contra la herramienta" a construir de manera fluida y profesional. La clave reside en respetar la jerarquía estructural y dominar el sistema de pestañas de configuración que Divi aplica de forma consistente en todos sus módulos.

La jerarquía estructural: El esqueleto de la página

Todo diseño en Divi comienza respetando su estructura base. No puedes insertar un módulo en el vacío; necesitas un contenedor. Este es el orden lógico que debes seguir siempre:

• Secciones (Azul): Son los bloques contenedores más grandes. Definen el espacio principal de tu diseño.
• Filas (Verde): Se sitúan dentro de las secciones y determinan la disposición horizontal (columnas) de tu contenido.
• Columnas: Definen cómo se distribuye el espacio dentro de una fila (por ejemplo, mitad y mitad, o una columna ancha y una estrecha).
• Módulos (Gris): Son los elementos funcionales (texto, imagen, botón, formulario) que residen dentro de las columnas.

El ciclo de configuración: Contenido, Diseño y Avanzado

Una vez que tienes la estructura, el flujo de trabajo dentro de cada módulo sigue una regla de oro. Cada vez que abras los ajustes de un módulo, encontrarás tres pestañas principales que dictan tu flujo:

1. Contenido: Aquí es donde defines qué es el elemento. ¿Cuál es el texto del botón? ¿Qué imagen voy a mostrar? ¿Cuál es el enlace? Es el lugar para la información esencial.
2. Diseño: Aquí defines cómo se ve el elemento. Márgenes, tipografías, colores, sombras, bordes y alineaciones. Es la pestaña donde pasarás la mayor parte de tu tiempo creativo.
3. Avanzado: Aquí controlas cómo se comporta el elemento. ID y clases CSS, visibilidad condicional, animaciones, filtros CSS y ajustes de posicionamiento. Se utiliza para personalizaciones más profundas o efectos técnicos.

Ciclo de diseño responsive

El flujo de trabajo profesional nunca termina en la versión de escritorio. Divi 5 facilita un flujo constante de "Diseñar - Verificar - Ajustar":

• Diseño Base: Construye y estiliza tu diseño en la vista de escritorio (Desktop).
• Adaptación: Haz clic en el icono del dispositivo en la barra de control para saltar a Tablet y Móvil.
• Ajuste: Divi te permite sobrescribir los estilos base para cada dispositivo. Si el texto se ve muy grande en móvil, cámbialo solo para móvil; Divi respetará que el estilo base (escritorio) permanezca intacto.

Guardado y gestión de versiones

Gracias al nuevo motor de Divi 5, el flujo de guardado es más rápido. Sin embargo, adopta la costumbre de realizar guardados periódicos. Si cometes un error grave, el sistema de historial (que ahora es mucho más preciso) te permite volver atrás en tus acciones paso a paso. No temas experimentar, ya que el flujo de trabajo moderno está diseñado para que puedas probar diseños y descartarlos instantáneamente sin afectar a la estructura de tu sitio web.

El salto hacia Divi 5 no es solo una actualización de funciones; es una reescritura total de la lógica interna del constructor. Comparar la versión 5 con el "editor clásico" (Divi 4 y versiones anteriores) es como comparar un vehículo con motor de combustión tradicional frente a uno eléctrico de última generación: el propósito es el mismo, pero la eficiencia, la respuesta y la tecnología subyacente son radicalmente distintas.

Arquitectura y velocidad de procesamiento

La diferencia más profunda es invisible para el ojo, pero fundamental para el rendimiento. El editor clásico dependía en gran medida de procesos en el servidor (PHP) para renderizar cada cambio. Esto generaba latencia, especialmente en configuraciones de hosting compartido. Divi 5 ha trasladado gran parte de esa carga al navegador del cliente utilizando un motor moderno basado en JavaScript. El resultado es un editor que "vuela": no hay esperas para aplicar estilos, mover elementos o cambiar configuraciones.

La calidad del código generado (Dominio del DOM)

Uno de los puntos débiles históricos del editor clásico era la generación excesiva de etiquetas (la famosa "div soup" o sopa de divs). Para lograr diseños complejos, el editor antiguo anidaba contenedores innecesarios, lo que penalizaba el SEO y la velocidad de carga. Divi 5 utiliza un enfoque de código limpio. Genera el HTML mínimo indispensable, utilizando etiquetas semánticas modernas. Esto significa que lo que construyes en el editor es, proporcionalmente, mucho más ligero y rápido para Google que lo que generabas antes.

Experiencia de usuario y "limpieza visual"

El editor clásico a menudo saturaba la pantalla con barras de herramientas, menús flotantes y botones que permanecían estáticos. Divi 5 adopta una filosofía de interfaz contextual:

• Reducción de ruido: Los controles aparecen solo cuando interactúas con el elemento, permitiéndote ver tu diseño tal y como lo verá el usuario final.
• Paneles flotantes inteligentes: En el editor clásico, los paneles de configuración a menudo cubrían el lienzo de trabajo. En Divi 5, los modales de configuración son más ligeros, reposicionables y están diseñados para no obstruir el diseño.

Gestión de la responsividad

En el editor clásico, ajustar un diseño para móviles a veces requería cambiar de vista, modificar valores y volver a comprobar el escritorio, con una sensación de "desconexión" entre las vistas. Divi 5 mejora la reactividad: al ajustar parámetros para móvil, la transición visual y la lógica de herencia de estilos es mucho más precisa. El sistema de Presets y la gestión de CSS integrado permiten que lo que definas en un dispositivo se herede correctamente al resto sin necesidad de parches manuales, algo que solía ser un dolor de cabeza en el editor antiguo.

Carga selectiva de recursos

El editor clásico solía cargar todas las librerías necesarias para todos los módulos de Divi al iniciar la página, independientemente de si los usabas o no. Divi 5 es inteligente: solo carga los archivos necesarios para los elementos presentes en tu diseño actual. Esto no solo hace que el editor se abra más rápido, sino que mejora drásticamente las métricas de rendimiento de la página publicada desde el primer momento.

En Divi 5, las secciones son el contenedor de nivel superior y la base fundamental de cualquier layout. A diferencia de las versiones heredadas, la arquitectura de Divi 5 —construida desde cero sobre un framework React— trata a las secciones no solo como cajas contenedoras estáticas, sino como nodos de un sistema de diseño inteligente, optimizado para renderizado instantáneo y escalabilidad.

El nuevo selector de estructuras

Al insertar una sección, accedes a un catálogo inteligente que prioriza dos motores de maquetado nativos modernos, eliminando la dependencia de hacks de CSS antiguos:

• Motor Flex: Ideal para alineaciones unidimensionales y flujos de contenido fluidos. Es la opción recomendada para el 80% de tus secciones (Hero, testimonios, features). Permite que los elementos hijos se distribuyan automáticamente sin necesidad de ajustar márgenes manualmente.
• Motor Grid (CSS Grid): Integrado nativamente en Divi 5. Permite gestionar estructuras bidimensionales complejas, incluyendo diseños tipo Masonry y rejillas Multi-Row, facilitando layouts asimétricos sin anidación excesiva.

Configuración y panel de control

Al seleccionar una sección en el lienzo, el panel lateral derecho se activa con tres pestañas fundamentales:

• Contenido: Gestión de medios (fondos, vídeo, color). El manejo es asíncrono, permitiendo que el editor no se bloquee durante la carga.
• Diseño: Control de espaciado (padding/margin), tamaño y comportamiento del motor (Flex o Grid).
• Avanzado: Configuración técnica, visibilidad responsive y, muy importante, la asignación de elementos semánticos HTML5 (definir si tu sección es un <header>, <footer>, <section>, etc.).

Buenas prácticas de uso profesional

1. Semántica ante todo: Utiliza la configuración avanzada para definir la etiqueta HTML correcta. Esto mejora la accesibilidad y el SEO de tu estructura web.
2. Uso de Variables y Presets: No configures manualmente el espaciado o colores repetidamente. Define reglas en el Gestor de Variables y aplica Presets. Si cambias el espaciado de una sección "Hero", se propagará instantáneamente donde la uses.
3. Etiquetado Administrativo: Dado que Divi 5 permite una navegación muy ágil por capas, es obligatorio asignar nombres descriptivos a cada sección (ej. "Hero Home", "Testimonios Footer"). Esto facilita identificar bloques en la vista de estructura sin abrir cada configuración.

Las filas son uno de los elementos fundamentales de la estructura de diseño de Divi 5. Se encuentran dentro de las secciones y permiten organizar el contenido en diferentes columnas para construir la estructura visual de una página.

Entender cómo funcionan las filas es esencial para trabajar correctamente con Divi 5, ya que prácticamente cualquier diseño que realices utilizará este elemento para distribuir textos, imágenes, botones, formularios y otros módulos.

¿Qué es una fila en Divi 5?

Una fila es un contenedor que se coloca dentro de una sección y que permite definir cómo se distribuirá el contenido horizontalmente. A diferencia de una sección, que establece una zona general de la página, la fila se encarga principalmente de organizar los elementos que contiene.

Dentro de una fila puedes crear una o varias columnas. Posteriormente, cada columna puede contener uno o varios módulos de Divi.

La estructura básica de una página creada con Divi puede entenderse de la siguiente manera:

• Sección: define una zona principal de la página.
• Fila: organiza el contenido dentro de esa sección.
• Columna: determina la distribución horizontal del contenido.
• Módulo: contiene el contenido o funcionalidad concreta.

Por ejemplo, una sección puede contener una fila de dos columnas. En la primera columna puedes colocar un título y un texto, mientras que en la segunda puedes colocar una imagen.

La relación entre filas, columnas y módulos

Para trabajar correctamente con Divi 5 es importante entender que una fila no es simplemente un elemento visual más. Forma parte de la estructura que determina cómo se organiza el contenido.

Una estructura habitual podría ser:

Sección
└── Fila
    ├── Columna 1
    │   ├── Título
    │   └── Texto
    └── Columna 2
        └── Imagen

También puedes crear estructuras más sencillas. Por ejemplo, una sección puede contener una fila de una sola columna y dentro de ella colocar un módulo de texto, una imagen y un botón.

Esta separación entre estructura y contenido permite construir diseños complejos manteniendo una organización clara dentro del constructor visual.

Tipos de filas y distribución de columnas

Cuando añades una nueva fila en Divi 5 puedes seleccionar diferentes estructuras de columnas. La elección dependerá del contenido que quieras mostrar.

Algunas de las distribuciones más habituales son:

• Una columna: ideal para textos, títulos, imágenes, formularios o llamadas a la acción a ancho completo.
• Dos columnas: útil para combinar texto e imagen o mostrar dos bloques de contenido.
• Tres columnas: apropiada para servicios, características, ventajas o tarjetas de contenido.
• Cuatro columnas: habitual para listados de elementos, servicios o productos.
• Distribuciones asimétricas: permiten crear diseños en los que una columna tiene más espacio que otra.

No es necesario utilizar siempre la misma distribución. Una página profesional puede combinar diferentes filas dentro de una misma sección para conseguir una composición visual más dinámica.

Cómo añadir una fila en Divi 5

Para añadir una fila debes situarte dentro de una sección que permita incorporar contenido y seleccionar la opción correspondiente para crear una nueva fila.

Divi mostrará las diferentes estructuras de columnas disponibles. Después de seleccionar una distribución, podrás añadir los módulos correspondientes dentro de cada columna.

Por ejemplo, para crear un bloque de presentación con texto a la izquierda e imagen a la derecha, puedes utilizar una fila de dos columnas:

1. Añade una sección.
2. Crea una nueva fila.
3. Selecciona una estructura de dos columnas.
4. Añade un módulo de texto en la primera columna.
5. Añade un módulo de imagen en la segunda columna.
6. Ajusta el diseño y el espaciado según las necesidades del proyecto.

La ventaja de trabajar de esta forma es que puedes modificar posteriormente la estructura sin tener que reconstruir todo el contenido de la página.

Configuración de una fila

Las filas disponen de diferentes opciones de configuración que permiten controlar tanto su apariencia como su comportamiento dentro de la página.

Entre los ajustes más importantes se encuentran los relacionados con:

• Anchura de la fila.
• Tamaño máximo del contenido.
• Espaciado exterior e interior.
• Fondos.
• Bordes.
• Sombras.
• Posicionamiento.
• Visibilidad según dispositivo.
• Comportamiento responsive.

Estas opciones permiten adaptar una misma estructura a diferentes tipos de diseño sin necesidad de crear una versión independiente para cada dispositivo.

Anchura de las filas

Uno de los aspectos más importantes al trabajar con filas es determinar cuánto espacio deben ocupar dentro de la página.

En muchos diseños no interesa que el contenido ocupe todo el ancho disponible de la pantalla. En su lugar, se establece un ancho máximo que permite mantener una lectura cómoda y una composición visual equilibrada.

Por ejemplo, una fila utilizada para mostrar un texto puede tener una anchura máxima limitada para evitar que las líneas sean excesivamente largas. En cambio, una fila destinada a una galería o a determinados elementos visuales puede necesitar aprovechar una mayor parte del ancho disponible.

La decisión debe tomarse en función del contenido y no simplemente aplicando el mismo valor a todas las filas.

Espaciado de las filas

El espaciado permite controlar la separación entre la fila y los elementos que la rodean, así como el espacio interno disponible para su contenido.

Es importante diferenciar entre margen y relleno o padding. El margen crea espacio alrededor del elemento, mientras que el padding genera espacio entre los límites del elemento y su contenido.

Una correcta utilización de ambos valores permite crear diseños más equilibrados sin recurrir a elementos adicionales únicamente para generar espacios.

En Divi 5 es recomendable evitar utilizar demasiados espaciadores o soluciones artificiales para separar elementos cuando el propio sistema de espaciado puede resolverlo de forma más limpia.

Fondos aplicados a las filas

Las filas también pueden utilizarse para crear bloques visuales mediante fondos.

Puedes utilizar diferentes tipos de fondo dependiendo del diseño:

• Colores sólidos.
• Degradados.
• Imágenes.
• Vídeos de fondo cuando el diseño lo requiera.

Sin embargo, no siempre es necesario aplicar el fondo a la fila. En determinadas situaciones puede ser más apropiado utilizar la sección como contenedor visual principal y dejar la fila encargada exclusivamente de organizar el contenido.

Separar correctamente estas responsabilidades ayuda a mantener una estructura más fácil de modificar y mantener.

Filas y diseño responsive

Una fila debe funcionar correctamente en diferentes tamaños de pantalla. El hecho de que una distribución tenga buen aspecto en un ordenador no significa que vaya a funcionar automáticamente de la misma manera en un teléfono móvil.

Una fila con cuatro columnas, por ejemplo, puede ser perfecta para mostrar cuatro servicios en escritorio, pero necesitar una distribución diferente en dispositivos pequeños.

Divi permite establecer ajustes específicos para diferentes dispositivos, por lo que puedes modificar aspectos como:

• Ancho.
• Espaciado.
• Tamaño de determinados elementos.
• Orden y distribución del contenido.
• Visibilidad.

La recomendación general es diseñar pensando desde el principio en el comportamiento responsive, en lugar de intentar solucionar todos los problemas al final del proyecto.

Filas anidadas y estructuras complejas

En determinados diseños puede ser necesario crear estructuras más complejas utilizando diferentes niveles de organización.

Antes de crear una estructura excesivamente complicada conviene analizar si realmente es necesaria. Una estructura sencilla suele ser más fácil de mantener, modificar y adaptar a diferentes dispositivos.

En Divi 5, como norma general, es preferible utilizar la estructura mínima necesaria para conseguir el diseño buscado.

Filas reutilizables

Cuando una fila contiene una estructura que vas a utilizar varias veces, puedes aprovechar las herramientas de reutilización de Divi para evitar tener que reconstruirla manualmente.

Esto resulta especialmente útil para elementos repetitivos como:

• Bloques de servicios.
• Secciones de características.
• Bloques de llamadas a la acción.
• Listados de ventajas.
• Elementos de navegación o contenido repetitivo.

La reutilización permite ahorrar tiempo y mantener una mayor coherencia entre las diferentes páginas de un proyecto.

Buenas prácticas al trabajar con filas

Una estructura bien organizada facilita considerablemente el mantenimiento de una web. Algunas buenas prácticas recomendables son:

• Utiliza las filas para organizar contenido: no las añadas únicamente para solucionar problemas de espaciado.
• Evita estructuras innecesariamente complejas: cuantos menos niveles tenga el diseño, más sencillo será mantenerlo.
• Planifica el responsive: comprueba siempre cómo se comportan las filas en móvil, tablet y escritorio.
• Utiliza anchuras coherentes: evita establecer valores diferentes sin una razón de diseño.
• Aprovecha la reutilización: guarda las estructuras que puedan utilizarse posteriormente.
• Mantén una estructura ordenada: una página bien organizada facilita futuras modificaciones.

Errores habituales con las filas

Uno de los errores más frecuentes al comenzar con Divi es utilizar demasiadas filas para conseguir efectos que podrían resolverse mediante las opciones de diseño de una única fila.

Otro problema habitual consiste en utilizar valores de margen y padding excesivos. Esto puede provocar que una página se vea correctamente en un dispositivo pero presente espacios desproporcionados en otros.

También es frecuente crear filas independientes para elementos que deberían formar parte de una misma composición. Antes de añadir una nueva fila conviene preguntarse si realmente se necesita una estructura diferente.

Una buena estructura debe ser suficientemente flexible para adaptarse al contenido y a los diferentes dispositivos.

Ejemplo práctico: sección de servicios

Imagina que quieres crear una sección para mostrar tres servicios de una empresa.

Una estructura sencilla podría ser:

Sección: Servicios
└── Fila
    ├── Columna 1
    │   └── Servicio 1
    ├── Columna 2
    │   └── Servicio 2
    └── Columna 3
        └── Servicio 3

Cada columna puede contener un módulo de imagen, un título, un texto descriptivo y un botón.

En escritorio los tres servicios pueden aparecer horizontalmente. En dispositivos móviles, la estructura puede adaptarse para mostrar los servicios uno debajo de otro.

Este ejemplo muestra por qué las filas son tan importantes: permiten definir la distribución general sin tener que controlar individualmente la posición de cada elemento.

Filas y estructura profesional en Divi 5

Cuando trabajas en proyectos profesionales, es importante no pensar en las filas únicamente como elementos visuales. También forman parte de la arquitectura interna de la página.

Una buena organización facilita tareas posteriores como modificar el diseño, adaptar la web a nuevos dispositivos, reutilizar componentes o realizar cambios globales mediante presets y otros sistemas de diseño.

Por este motivo, antes de empezar a colocar módulos conviene tener clara la estructura de la página: qué zonas existirán, qué contenido pertenece a cada una y cómo deberá comportarse en diferentes tamaños de pantalla.

Las filas de Divi 5 son el elemento que permite organizar y distribuir el contenido dentro de las secciones. Su función principal es servir como estructura para las columnas y los módulos que forman cada bloque de una página.

Dominar las filas es fundamental para trabajar de forma eficiente con Divi 5. Una buena utilización de sus estructuras, anchuras, espaciados y opciones responsive permite crear páginas más ordenadas, adaptables y fáciles de mantener.

A medida que avances en el curso, comprobarás que conceptos como los presets, el diseño responsive, el Theme Builder y la reutilización de layouts se apoyan en gran medida en una correcta organización de secciones, filas, columnas y módulos.

Las columnas son uno de los elementos fundamentales para organizar el contenido dentro de una fila en Divi 5. Permiten distribuir horizontalmente los módulos y crear diferentes composiciones para estructurar una página de forma clara y visualmente equilibrada.

Mientras que las secciones definen las grandes zonas de una página y las filas organizan el contenido dentro de ellas, las columnas determinan cómo se reparte ese espacio entre los diferentes bloques de contenido.

¿Qué es una columna en Divi 5?

Una columna es un espacio dentro de una fila en el que se pueden colocar uno o varios módulos de Divi.

Por ejemplo, una fila de dos columnas puede dividir el espacio disponible en dos zonas. En una de ellas podemos colocar un título y un texto, mientras que en la otra podemos colocar una imagen.

La estructura básica sería:

Sección
└── Fila
    ├── Columna 1
    │   └── Módulos
    └── Columna 2
        └── Módulos

Las columnas son, por tanto, el elemento que conecta la estructura de la fila con el contenido que finalmente verá el usuario.

Distribuciones de columnas

Divi permite crear filas con diferentes distribuciones de columnas. La elección dependerá del tipo de contenido y del diseño que quieras conseguir.

Algunas de las estructuras más habituales son:

• Una columna: para contenido que necesita ocupar todo el espacio disponible.
• Dos columnas iguales: útil para dividir el contenido en dos bloques equivalentes.
• Dos columnas asimétricas: permite dar más protagonismo a una de las partes.
• Tres columnas: habitual en bloques de servicios, características o ventajas.
• Cuatro columnas: útil para listados y elementos que deben mostrarse en una cuadrícula.

También puedes utilizar diferentes proporciones para crear composiciones más interesantes y adaptadas al contenido.

Cómo elegir la distribución adecuada

La distribución de columnas no debería elegirse únicamente por motivos estéticos. Es importante tener en cuenta la cantidad y el tipo de contenido que contendrá cada columna.

Por ejemplo, si una columna contiene un texto extenso y otra únicamente una imagen, probablemente no tenga sentido utilizar dos columnas exactamente iguales. Una distribución asimétrica puede proporcionar un resultado más equilibrado.

Antes de elegir una estructura conviene preguntarse:

• ¿Cuántos bloques de contenido necesito mostrar?
• ¿Todos tienen la misma importancia?
• ¿Qué cantidad de texto tendrá cada uno?
• ¿Habrá imágenes o elementos visuales?
• ¿Cómo deberá verse en dispositivos móviles?

La estructura debe adaptarse al contenido y no al contrario.

Columnas iguales y columnas asimétricas

Las columnas iguales son una buena opción cuando los elementos tienen una importancia y una cantidad de contenido similares.

Por ejemplo, una sección de tres servicios puede utilizar tres columnas con la misma anchura:

Servicio 1 | Servicio 2 | Servicio 3

En cambio, cuando existe una diferencia clara entre los contenidos, puede ser más adecuado utilizar columnas asimétricas.

Un ejemplo habitual es una sección de presentación:

Texto principal        | Imagen
Mayor espacio          | Menor espacio

De esta forma se puede dar mayor protagonismo al contenido que realmente lo necesita.

Módulos dentro de las columnas

Una columna puede contener diferentes módulos. Esto permite combinar varios elementos dentro de un mismo bloque.

Por ejemplo, una columna puede contener:

• Una imagen.
• Un título.
• Un párrafo de texto.
• Un botón.

Otra columna de la misma fila podría contener únicamente una imagen.

Esta flexibilidad permite crear composiciones muy diferentes utilizando la misma estructura básica.

Orden de los módulos

El orden de los módulos dentro de una columna es importante porque determina cómo se presenta el contenido al usuario.

Una estructura habitual para un bloque de contenido podría ser:

Columna
├── Imagen
├── Título
├── Texto
└── Botón

Sin embargo, dependiendo del diseño, podría ser más apropiado colocar primero el título, después el texto y finalmente una imagen o una llamada a la acción.

La jerarquía visual debe corresponder con la importancia real de la información.

Espaciado entre columnas

La separación entre columnas influye directamente en la percepción visual del diseño.

Si las columnas están demasiado juntas, el contenido puede parecer saturado. Si están demasiado separadas, puede perderse la relación visual entre los elementos.

El espacio debe ajustarse teniendo en cuenta:

• El tamaño de la pantalla.
• La cantidad de contenido.
• El tamaño de las imágenes.
• La tipografía utilizada.
• La función de cada bloque.

En diseños profesionales es recomendable utilizar un sistema de espaciado coherente en lugar de establecer valores diferentes de forma arbitraria en cada sección.

Columnas y diseño responsive

Uno de los aspectos más importantes de las columnas en Divi 5 es su comportamiento en dispositivos móviles.

Una distribución que funciona perfectamente en escritorio puede resultar poco práctica cuando el espacio horizontal disponible se reduce.

Por ejemplo, una fila con cuatro columnas puede mostrar cuatro elementos en una misma línea en una pantalla grande. En un teléfono móvil, esos elementos normalmente deberán reorganizarse para facilitar la lectura y la interacción.

Por este motivo, al diseñar una estructura de columnas debes comprobar siempre su comportamiento en:

• Ordenador: donde existe mayor espacio horizontal.
• Tablet: donde el espacio comienza a reducirse.
• Móvil: donde la prioridad suele ser una presentación vertical y cómoda.

Divi permite realizar ajustes específicos para diferentes dispositivos, por lo que no es necesario utilizar exactamente los mismos valores en todas las resoluciones.

Columnas y jerarquía del contenido

Las columnas también pueden utilizarse para establecer una jerarquía visual.

Por ejemplo, en una sección de servicios puedes utilizar tres columnas iguales si todos los servicios tienen la misma importancia. En cambio, en una sección de presentación de una empresa puede ser más interesante utilizar una columna amplia para el contenido principal y otra más pequeña para información complementaria.

De esta forma, la propia estructura ayuda al usuario a identificar qué información debe leer primero.

Columnas para crear composiciones visuales

Las columnas no tienen por qué utilizarse exclusivamente para crear diseños tradicionales de texto y fotografía.

También pueden utilizarse para construir composiciones más modernas combinando:

• Imágenes.
• Fondos.
• Tarjetas de contenido.
• Botones.
• Iconos.
• Formularios.
• Elementos de navegación.

Por ejemplo, una página de servicios puede utilizar una fila de tres columnas para crear tres tarjetas visualmente diferenciadas. Cada columna puede tener su propio fondo, borde, sombra y espaciado.

La estructura seguirá siendo sencilla, pero el resultado visual puede ser mucho más elaborado.

Columnas y accesibilidad

El diseño mediante columnas también debe tener en cuenta la accesibilidad. Una estructura visualmente atractiva no debe dificultar la lectura o la navegación.

Es importante mantener una jerarquía lógica de títulos y contenidos, utilizar textos suficientemente legibles y comprobar que el orden del contenido siga teniendo sentido cuando las columnas se reorganizan en dispositivos pequeños.

El diseño visual debe complementar la estructura del contenido, no sustituirla.

Errores habituales al utilizar columnas

Uno de los errores más frecuentes es utilizar demasiadas columnas para intentar mostrar una gran cantidad de información en una sola fila.

Cuando cada columna contiene demasiado texto, el resultado puede ser difícil de leer, especialmente en pantallas pequeñas.

Otros errores habituales son:

• Crear demasiadas columnas: puede generar un diseño saturado.
• Utilizar columnas muy estrechas: dificulta la lectura.
• No comprobar el móvil: puede provocar diseños desordenados.
• Usar columnas únicamente para crear espacios: es preferible utilizar las herramientas de espaciado adecuadas.
• Forzar el mismo tamaño para contenidos diferentes: puede generar desequilibrios visuales.
• Crear estructuras demasiado complejas: dificulta el mantenimiento posterior.

Ejemplo práctico: sección de características

Imagina una sección en la que quieres mostrar cuatro características de un servicio.

Puedes crear una fila con cuatro columnas:

Sección: Características

┌──────────┬──────────┬──────────┬──────────┐
│ Caracter.│ Caracter.│ Caracter.│ Caracter.│
│    1     │    2     │    3     │    4     │
└──────────┴──────────┴──────────┴──────────┘

Cada columna puede contener un icono, un título y una breve descripción.

En escritorio los cuatro elementos pueden mostrarse horizontalmente. En móvil, la estructura puede adaptarse para que cada característica ocupe una línea o se distribuya en varias filas.

Esta es una de las aplicaciones más habituales de las columnas en Divi.

Ejemplo práctico: texto e imagen

Otro patrón muy utilizado es combinar contenido textual con una imagen.

┌────────────────────────┬────────────────┐
│                        │                │
│ Título                 │                │
│ Texto                  │     Imagen     │
│ Texto                  │                │
│ Botón                  │                │
│                        │                │
└────────────────────────┴────────────────┘

En este caso puedes utilizar dos columnas y asignar una mayor proporción a la columna que contiene el texto si este necesita más espacio.

Este patrón es especialmente útil para páginas corporativas, páginas de servicios, páginas de inicio y landing pages.

Buenas prácticas con columnas

Para trabajar de forma eficiente con Divi 5 es recomendable seguir algunas reglas sencillas:

• Diseña pensando en el contenido: elige la estructura que mejor se adapte a la información.
• Mantén una jerarquía clara: utiliza el tamaño y la posición de las columnas para destacar lo importante.
• No abuses de las columnas: una estructura sencilla suele ser más fácil de mantener.
• Comprueba siempre el responsive: revisa el resultado en todos los dispositivos.
• Utiliza espaciados coherentes: evita valores arbitrarios en cada bloque.
• Piensa en móvil desde el principio: no dejes la adaptación responsive para el final.
• Reutiliza estructuras: cuando una composición se repita, aprovecha las herramientas de reutilización de Divi.

Columnas dentro del flujo de trabajo de Divi 5

Las columnas adquieren todavía más importancia cuando comienzas a utilizar herramientas avanzadas de Divi 5 como los presets, los layouts reutilizables y el Theme Builder.

Una estructura de columnas bien planteada permite aplicar estilos de forma consistente y reutilizar determinadas composiciones en diferentes partes del sitio.

Por eso, no conviene considerar las columnas únicamente como una herramienta para dividir una fila. Son una parte importante de la arquitectura visual de cualquier proyecto realizado con Divi 5.

Las columnas de Divi 5 permiten distribuir el contenido dentro de las filas y crear estructuras adaptadas a las necesidades de cada página. Gracias a las diferentes proporciones y combinaciones disponibles, es posible crear desde diseños sencillos de una columna hasta composiciones complejas con múltiples bloques de contenido.

La clave para utilizarlas correctamente está en elegir la estructura en función del contenido, mantener una jerarquía visual clara y comprobar siempre su comportamiento responsive.

Cuando domines la relación entre secciones, filas, columnas y módulos, tendrás una base sólida para comenzar a construir diseños más complejos y profesionales con Divi 5.

Los módulos son los elementos que permiten añadir contenido y funcionalidades a una página creada con Divi 5. Mientras que las secciones, filas y columnas se encargan principalmente de organizar la estructura, los módulos son los que contienen el contenido que finalmente verá e interactuará el usuario.

Textos, imágenes, botones, vídeos, formularios, galerías y muchos otros elementos se incorporan a una página mediante módulos. Por eso, aprender a utilizarlos correctamente es uno de los pasos fundamentales para dominar Divi 5.

¿Qué es un módulo en Divi 5?

Un módulo es un componente que puedes colocar dentro de una columna para añadir un determinado tipo de contenido o funcionalidad.

Por ejemplo, si quieres añadir un título a una página utilizarás un módulo adecuado para el contenido de texto. Si quieres mostrar una fotografía, utilizarás un módulo de imagen. Para crear un botón o un formulario utilizarás los módulos correspondientes.

La estructura básica de Divi puede representarse así:

Sección
└── Fila
    └── Columna
        ├── Módulo
        ├── Módulo
        └── Módulo

Esta estructura permite separar claramente la organización de la página del contenido que contiene.

Tipos de módulos

Divi 5 incluye una amplia variedad de módulos diseñados para cubrir diferentes necesidades de diseño y contenido.

Entre los más habituales encontramos:

• Texto: para párrafos y contenido textual.
• Título o encabezado: para crear títulos y subtítulos.
• Imagen: para mostrar fotografías, ilustraciones y gráficos.
• Botón: para crear llamadas a la acción.
• Galería: para mostrar varias imágenes.
• Vídeo: para incorporar contenido audiovisual.
• Formulario: para recopilar información de los usuarios.
• Mapa: para mostrar ubicaciones.
• Contadores: para representar datos o estadísticas.
• Llamadas a la acción: para combinar información y acciones.

La disponibilidad exacta de módulos dependerá de las funcionalidades incluidas en la instalación y de los elementos que quieras incorporar al proyecto.

Cómo añadir un módulo

Para añadir un módulo debes disponer de una estructura que incluya una columna. Al seleccionar el espacio correspondiente podrás elegir el módulo que quieres insertar.

El proceso básico consiste en:

1. Crear o seleccionar una sección.
2. Añadir una fila.
3. Elegir la estructura de columnas.
4. Seleccionar una columna.
5. Añadir el módulo que necesites.
6. Configurar su contenido.
7. Personalizar su diseño.

Una vez añadido, el módulo puede desplazarse, duplicarse, copiarse o eliminarse según las necesidades del diseño.

Contenido y diseño del módulo

Una de las características importantes de Divi es la separación entre el contenido y el diseño del módulo.

Por un lado puedes introducir el contenido que quieres mostrar. Por otro, puedes configurar aspectos visuales como:

• Tipografía.
• Tamaño del texto.
• Color.
• Alineación.
• Fondos.
• Bordes.
• Sombras.
• Espaciado.
• Animaciones y efectos.
• Comportamiento responsive.

Esta separación permite modificar la apariencia de un elemento sin tener que cambiar necesariamente su contenido.

La configuración de los módulos

Cada módulo dispone de sus propias opciones. Un módulo de imagen tendrá configuraciones relacionadas con la imagen, mientras que un botón tendrá opciones específicas para el texto, el enlace y su apariencia.

Aunque las opciones pueden variar según el módulo, normalmente encontrarás diferentes grupos de configuración destinados a:

• Contenido: información que mostrará el módulo.
• Diseño: apariencia visual del elemento.
• Avanzado: comportamiento, clases, identificadores y otras opciones técnicas.

La organización exacta de estas opciones puede variar en Divi 5 respecto a versiones anteriores, pero el concepto fundamental sigue siendo el mismo: primero se define qué debe mostrar el módulo y después cómo debe mostrarse.

Módulos simples y módulos compuestos

No todos los módulos tienen el mismo nivel de complejidad.

Un módulo de imagen, por ejemplo, puede tener una función muy concreta: mostrar una imagen determinada.

Otros módulos permiten combinar diferentes tipos de contenido dentro de un mismo elemento. Esto puede ser útil para crear bloques completos de información sin necesidad de utilizar numerosos módulos independientes.

La elección dependerá del diseño que quieras conseguir y de cómo quieras organizar internamente el contenido.

Orden de los módulos

El orden de los módulos dentro de una columna determina en gran medida la estructura visual del contenido.

Por ejemplo:

Columna
├── Título
├── Texto
├── Imagen
└── Botón

puede producir una experiencia diferente a:

Columna
├── Imagen
├── Título
├── Texto
└── Botón

La decisión debe responder a una lógica de contenido. En una página de servicios, por ejemplo, puede ser conveniente presentar primero el título y la descripción antes de mostrar la llamada a la acción.

Duplicar y reutilizar módulos

Cuando un módulo está correctamente configurado, no siempre es necesario crear otro desde cero.

Divi permite duplicar elementos para reutilizar su estructura y configuración. Esto resulta especialmente útil cuando estás creando bloques repetitivos.

Por ejemplo, si tienes tres tarjetas de servicios con la misma estructura, puedes crear la primera correctamente y después duplicarla para modificar únicamente el contenido.

Este sistema permite ahorrar tiempo y mantener una mayor coherencia visual.

Módulos y Presets

Una de las características especialmente importantes para el flujo de trabajo profesional es la posibilidad de utilizar presets.

Un preset permite definir un conjunto de estilos que puede reutilizarse en diferentes instancias de un módulo.

Por ejemplo, puedes crear un estilo común para todos los botones de una web y utilizarlo en diferentes páginas.

Esto evita tener que configurar manualmente cada botón y facilita realizar cambios globales posteriormente.

Los presets se estudiarán con mayor profundidad en el bloque dedicado al sistema de diseño global de Divi 5.

Módulos y diseño responsive

Cada módulo debe funcionar correctamente en diferentes tamaños de pantalla. Divi permite realizar ajustes específicos para escritorio, tablet y móvil cuando sea necesario.

Algunos ejemplos de ajustes responsive son:

• Cambiar el tamaño de una fuente.
• Modificar el espaciado.
• Cambiar la alineación.
• Modificar el tamaño de una imagen.
• Ocultar determinados elementos.
• Adaptar la posición de determinados componentes.

No obstante, no conviene crear valores diferentes para todos los dispositivos sin una razón concreta. Lo ideal es utilizar un diseño flexible y realizar únicamente los ajustes necesarios.

Módulos y accesibilidad

Los módulos también desempeñan un papel importante en la accesibilidad de una página.

Por ejemplo, las imágenes deben disponer de textos alternativos adecuados cuando sean necesarios, los botones deben utilizar textos descriptivos y los encabezados deben respetar una jerarquía lógica.

No se debe utilizar un módulo únicamente porque permita conseguir determinado efecto visual. También hay que valorar cómo será interpretado por los usuarios y por las tecnologías de asistencia.

Clases CSS e identificadores

Los módulos de Divi pueden utilizar opciones avanzadas para añadir clases CSS, identificadores y otros ajustes técnicos.

Esto resulta útil cuando necesitas aplicar estilos personalizados o utilizar CSS específico para determinados elementos.

Por ejemplo, puedes asignar una clase común a diferentes módulos para aplicarles un comportamiento específico.

Sin embargo, es recomendable utilizar estas opciones de forma organizada. Añadir CSS personalizado sin una estructura clara puede complicar el mantenimiento del proyecto.

Módulos y SEO

Divi permite construir páginas optimizadas para buscadores, pero el módulo utilizado no garantiza por sí mismo un buen posicionamiento.

Para conseguir una estructura adecuada es importante utilizar correctamente:

• Encabezados.
• Texto relevante.
• Imágenes optimizadas.
• Enlaces internos.
• Contenido útil para el usuario.
• Una estructura semántica coherente.

Por ejemplo, los encabezados deben utilizarse para organizar el contenido y no simplemente para conseguir un determinado tamaño de letra.

Errores habituales al utilizar módulos

Uno de los errores más frecuentes al trabajar con Divi es utilizar módulos innecesarios para conseguir efectos que podrían resolverse mediante las opciones de diseño existentes.

Otros problemas habituales son:

• Duplicar demasiados módulos: puede aumentar innecesariamente la complejidad de la página.
• Aplicar estilos manualmente a cada elemento: dificulta mantener una identidad visual coherente.
• Abusar del CSS personalizado: puede complicar el mantenimiento.
• No comprobar el responsive: algunos módulos pueden necesitar ajustes específicos.
• Utilizar módulos por motivos puramente visuales: el contenido debe ser la prioridad.
• No reutilizar configuraciones: repetir manualmente el mismo trabajo reduce la eficiencia.

Ejemplo práctico: crear una tarjeta de servicio

Imagina que quieres crear una tarjeta para presentar un servicio.

Una columna podría contener:

Columna
├── Imagen o icono
├── Título
├── Descripción
└── Botón

Una vez creada la primera tarjeta, puedes duplicar la estructura para crear las demás.

Después puedes utilizar presets para garantizar que los títulos, botones y otros elementos mantienen el mismo estilo en todas las tarjetas.

De esta manera, una estructura sencilla puede convertirse en un componente reutilizable dentro del proyecto.

Cómo organizar correctamente los módulos

En proyectos pequeños puede parecer innecesario prestar demasiada atención a la organización interna de los módulos. Sin embargo, esta decisión adquiere mucha importancia cuando una web comienza a crecer.

Una estructura ordenada permite identificar rápidamente qué elemento debes modificar y reduce el riesgo de alterar accidentalmente otras partes del diseño.

Es recomendable mantener una lógica coherente en la construcción de cada sección y evitar añadir elementos sin una función concreta.

Módulos dentro de un flujo profesional

En un proyecto profesional, los módulos forman parte de un sistema mucho más amplio. No se trata simplemente de colocar elementos hasta conseguir un diseño visualmente atractivo.

La estructura debería estar pensada para facilitar:

• La reutilización.
• La coherencia visual.
• El responsive.
• El mantenimiento.
• La accesibilidad.
• La optimización del rendimiento.
• Las futuras modificaciones.

Esta forma de trabajar permite aprovechar realmente las posibilidades de Divi 5 y evita convertir cada página en una estructura completamente independiente.

Los módulos de Divi 5 son los componentes que contienen el contenido y las funcionalidades de una página. Se colocan dentro de las columnas y permiten construir prácticamente cualquier tipo de composición visual.

Dominar los módulos implica mucho más que conocer qué hace cada uno. También es importante saber cuándo utilizar cada elemento, cómo organizarlo dentro de la estructura, cómo adaptarlo a dispositivos móviles y cómo reutilizar sus estilos.

Una vez comprendida la relación entre secciones, filas, columnas y módulos, ya dispones de la base estructural necesaria para comenzar a trabajar con los diferentes módulos de contenido que ofrece Divi 5.

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.

¿Qué significa arrastrar y soltar en Divi 5?

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.

Qué elementos puedes mover

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:

• Secciones: pueden reorganizarse dentro de la página.
• Filas: pueden cambiar de posición dentro de una sección.
• Columnas: forman parte de la estructura de cada fila.
• Módulos: pueden desplazarse dentro de las columnas para modificar el orden del contenido.

La posibilidad de mover estos elementos permite modificar la estructura de una página sin tener que empezar nuevamente desde cero.

Mover un módulo dentro de una columna

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ón

Si quieres que el botón aparezca antes del texto, puedes reorganizar los elementos para obtener:

Columna
├── Título
├── Botón
└── Texto

De esta forma puedes experimentar con diferentes composiciones de manera rápida y visual.

Mover módulos entre columnas

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                  Imagen

y 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.

Reorganizar filas

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: Contacto

Si 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: Contacto

Esto permite modificar la jerarquía visual de una página de forma muy rápida.

Indicadores visuales durante el arrastre

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.

Arrastrar no es lo mismo que duplicar

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.

Reorganizar una página durante el diseño

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.

Arrastrar y soltar y estructura de la página

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ódulo

Por 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.

Arrastrar y soltar en diseños complejos

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:

• Un módulo concreto.
• Una columna completa.
• Una fila completa.
• Una sección completa.

Mover accidentalmente un elemento de nivel superior puede modificar una parte mucho mayor del diseño de lo que pretendías.

Consejos para trabajar más rápido

El sistema de arrastrar y soltar resulta especialmente eficiente cuando se combina con otras herramientas del builder.

Algunas recomendaciones son:

• Planifica primero la estructura: evita mover constantemente elementos por falta de planificación.
• Identifica el nivel del elemento: comprueba si estás seleccionando una sección, fila o módulo.
• Utiliza la duplicación cuando necesites una copia: no reconstruyas elementos repetitivos manualmente.
• Comprueba el resultado después de mover elementos: especialmente en estructuras complejas.
• Revisa el responsive: un cambio de posición puede afectar a la composición en diferentes dispositivos.

Arrastrar y soltar en responsive

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:

• Escritorio.
• Tablet.
• Móvil.

Esto es especialmente importante en diseños con varias columnas o composiciones asimétricas.

Ejemplo práctico

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
    └── Imagen

Durante 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
    └── Imagen

El contenido, los estilos y la configuración del botón se mantienen, pero su posición dentro de la estructura cambia.

Arrastrar y soltar como parte del flujo profesional

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:

1. Crear la estructura general.
2. Colocar los módulos principales.
3. Ordenar los elementos según la jerarquía del contenido.
4. Aplicar estilos.
5. Revisar el resultado visual.
6. Reorganizar los elementos cuando sea necesario.
7. Comprobar el comportamiento responsive.

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.

Errores habituales

Aunque arrastrar y soltar es sencillo, existen algunos errores frecuentes que conviene evitar.

• Mover elementos sin comprobar su nivel: puedes alterar una estructura completa cuando solo querías mover un módulo.
• Utilizar movimientos para solucionar problemas de espaciado: muchas veces es mejor modificar el margen o padding.
• Reorganizar sin revisar móvil: la nueva estructura puede necesitar ajustes responsive.
• Crear copias cuando solo querías mover un elemento: revisa si estás duplicando o desplazando.
• Trabajar sin una estructura clara: una página desordenada será más difícil de mantener.

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.

Los controles contextuales son una de las características que hacen que el trabajo con el constructor visual de Divi 5 sea más rápido e intuitivo. Permiten acceder directamente a las acciones y opciones relacionadas con el elemento sobre el que estás trabajando, sin tener que desplazarte constantemente por diferentes menús.

Este sistema facilita especialmente las tareas habituales de edición, como mover elementos, duplicarlos, eliminarlos, acceder a sus ajustes o modificar rápidamente determinadas propiedades.

¿Qué son los controles contextuales?

Los controles contextuales son las herramientas que aparecen asociadas a un elemento cuando lo seleccionas o interactúas con él dentro del builder.

Su función es mostrar las acciones más relevantes para el elemento concreto que estás editando.

Por ejemplo, cuando seleccionas un módulo, las opciones disponibles estarán relacionadas con ese módulo. Si seleccionas una fila, aparecerán las acciones correspondientes a la fila.

Esto permite trabajar de una forma más directa porque las herramientas se adaptan al contexto en el que estás trabajando.

Por qué son importantes

En un constructor visual es habitual realizar continuamente pequeñas modificaciones. Abrir un panel diferente para cada operación puede hacer que el proceso sea lento y poco práctico.

Los controles contextuales reducen ese número de pasos y permiten realizar muchas operaciones directamente sobre el elemento seleccionado.

Esto resulta especialmente útil cuando estás:

• Reorganizando una página.
• Duplicando elementos.
• Moviendo módulos.
• Accediendo a la configuración.
• Eliminando elementos.
• Copiando estilos o estructuras.

Cuanto mejor conozcas estos controles, menos tiempo necesitarás para realizar las operaciones habituales dentro de Divi.

Controles según el tipo de elemento

Divi utiliza una estructura jerárquica formada por diferentes niveles. Por este motivo, los controles que aparecen dependen del elemento seleccionado.

Podemos encontrar principalmente:

• Controles de sección: afectan a una zona completa de la página.
• Controles de fila: permiten trabajar con la estructura que contiene las columnas.
• Controles de columna: permiten gestionar el espacio que contiene los módulos.
• Controles de módulo: permiten modificar el contenido y configuración de un elemento concreto.

Seleccionar correctamente el nivel sobre el que quieres trabajar es fundamental para evitar modificar accidentalmente otros elementos.

Controles de un módulo

Cuando seleccionas un módulo, los controles contextuales permiten acceder rápidamente a las operaciones más habituales.

Dependiendo del elemento y del contexto, puedes encontrar acciones relacionadas con:

• Editar el módulo.
• Moverlo.
• Duplicarlo.
• Copiarlo.
• Eliminarlo.
• Guardar o reutilizar su configuración.

Estas acciones permiten modificar rápidamente una página sin necesidad de reconstruir los módulos desde cero.

Controles de filas y secciones

Las filas y las secciones también disponen de controles específicos.

En estos niveles puedes realizar operaciones que afectan a una estructura completa. Por ejemplo, duplicar una fila puede ser mucho más rápido que volver a crear todas sus columnas y módulos manualmente.

Del mismo modo, duplicar una sección puede resultar útil cuando quieres utilizar una estructura similar en otra parte de una página.

Antes de realizar una acción debes comprobar qué elemento está seleccionado, especialmente cuando trabajas con páginas grandes.

Acceso rápido a la configuración

Uno de los principales objetivos de los controles contextuales es facilitar el acceso a la configuración del elemento.

En lugar de buscar el elemento dentro de una estructura compleja, puedes seleccionarlo directamente y acceder a sus opciones.

Esto hace que el proceso de edición sea mucho más natural:

1. Seleccionas el elemento.
2. Accedes a sus controles.
3. Abres sus opciones.
4. Realizas el cambio.
5. Compruebas el resultado directamente en la página.

Este flujo de trabajo es una de las principales ventajas de utilizar un constructor visual.

Controles y edición visual

Divi 5 está diseñado para que gran parte del trabajo se realice directamente sobre la página.

Esto significa que los controles contextuales no deben entenderse como simples botones de acceso rápido, sino como una parte importante de la interacción con el builder.

La idea es que puedas seleccionar un elemento y trabajar sobre él sin perder de vista cómo afecta el cambio al diseño.

Controles para reorganizar elementos

Los controles contextuales también facilitan la reorganización de la estructura.

Por ejemplo, puedes seleccionar un módulo y utilizar las herramientas disponibles para cambiar su posición o duplicarlo antes de realizar modificaciones.

Este sistema resulta especialmente útil cuando estás construyendo una sección con elementos repetitivos.

En lugar de crear cada componente individualmente, puedes crear uno correctamente y utilizar los controles disponibles para generar nuevas instancias.

Controles contextuales y flujo de trabajo

Una de las ventajas de los controles contextuales es que reducen la cantidad de desplazamientos y acciones innecesarias dentro del editor.

Un flujo habitual puede ser:

Seleccionar elemento
        ↓
Controles contextuales
        ↓
Acción
        ↓
Modificar
        ↓
Comprobar resultado

Este proceso permite trabajar de forma más rápida que utilizando continuamente menús generales para realizar pequeñas modificaciones.

Evitar errores al seleccionar elementos

Cuando una página tiene muchos elementos superpuestos o estructuras complejas, puede resultar fácil seleccionar un elemento diferente del que querías modificar.

Antes de realizar una acción importante conviene comprobar visualmente qué elemento está seleccionado.

Esto es especialmente importante cuando utilizas acciones que afectan a estructuras completas, como duplicar o eliminar.

Una buena práctica consiste en trabajar de forma progresiva y comprobar el resultado después de cada modificación relevante.

Controles contextuales y precisión

Los controles contextuales permiten realizar modificaciones pequeñas sin tener que alterar otros aspectos del diseño.

Por ejemplo, si quieres duplicar un módulo concreto, puedes actuar directamente sobre él sin tener que copiar toda la fila.

Esta precisión resulta especialmente importante en páginas complejas donde diferentes elementos tienen funciones distintas.

Ejemplo práctico

Imagina una fila que contiene tres columnas y cada columna tiene una tarjeta de servicio:

Fila
├── Servicio 1
├── Servicio 2
└── Servicio 3

Si quieres crear un cuarto servicio con exactamente la misma estructura, puedes seleccionar una de las tarjetas y utilizar las acciones disponibles para duplicarla.

Después solo tendrás que modificar el contenido específico del nuevo elemento.

De esta forma, los controles contextuales permiten acelerar considerablemente el proceso de creación.

Controles contextuales frente a configuración avanzada

No todas las operaciones deben realizarse desde los controles rápidos.

Cuando necesitas modificar aspectos más específicos del diseño, deberás acceder a la configuración completa del elemento.

Los controles contextuales sirven principalmente para facilitar las acciones frecuentes, mientras que el panel de opciones permite realizar una configuración mucho más detallada.

Ambos sistemas se complementan.

Buenas prácticas

Para aprovechar correctamente los controles contextuales de Divi 5 es recomendable seguir algunas pautas:

• Identifica el elemento antes de actuar: comprueba si estás trabajando con una sección, fila, columna o módulo.
• Utiliza los controles rápidos: especialmente para operaciones repetitivas.
• Accede a la configuración completa cuando sea necesario: no intentes solucionar todo mediante acciones rápidas.
• Comprueba los cambios: especialmente después de modificar estructuras.
• Evita eliminar sin comprobar: las acciones destructivas deben realizarse con precaución.

Controles contextuales y productividad

Cuando comienzas a utilizar Divi 5 es normal prestar más atención al diseño que a la forma de interactuar con el builder.

Sin embargo, aprender dónde están las acciones habituales puede mejorar considerablemente la velocidad de trabajo.

Con la práctica, muchas operaciones que inicialmente requieren varios pasos se convierten en acciones prácticamente automáticas.

Esto es especialmente importante cuando trabajas con proyectos grandes o cuando necesitas realizar modificaciones repetitivas.

Los controles contextuales de Divi 5 permiten acceder rápidamente a las acciones relacionadas con el elemento seleccionado. Gracias a ellos, operaciones como mover, duplicar, copiar, eliminar o editar componentes pueden realizarse de una forma mucho más directa.

La clave para utilizarlos correctamente está en comprender la estructura jerárquica de Divi y aprender a identificar qué elemento estás seleccionando antes de realizar una acción.

Cuando combines estos controles con el sistema de arrastrar y soltar y el panel de opciones, tendrás un flujo de trabajo mucho más rápido y eficiente dentro del builder.

El panel de opciones es una de las herramientas principales para configurar y personalizar los elementos dentro de Divi 5. Mientras que los controles contextuales permiten realizar acciones rápidas sobre los elementos, el panel de opciones proporciona acceso a la configuración detallada de cada sección, fila, columna o módulo.

Dominar este panel es fundamental para aprovechar realmente las posibilidades de Divi 5, ya que prácticamente cualquier aspecto del contenido y del diseño puede configurarse desde sus diferentes opciones.

¿Qué es el panel de opciones?

El panel de opciones es el espacio desde el que puedes configurar el elemento seleccionado dentro del builder.

Cuando seleccionas un módulo, por ejemplo, puedes acceder a sus opciones para modificar tanto su contenido como su apariencia.

Dependiendo del elemento seleccionado, el panel mostrará diferentes configuraciones. No tiene sentido que una imagen y una fila tengan exactamente las mismas opciones, por lo que Divi adapta el contenido del panel al contexto.

De esta forma, el panel se convierte en el centro de configuración de los diferentes componentes que forman una página.

Qué puedes configurar desde el panel

Las opciones disponibles dependen del tipo de elemento, pero normalmente permiten controlar diferentes aspectos relacionados con el contenido, el diseño y el comportamiento.

Entre las posibilidades más habituales se encuentran:

• Contenido.
• Tipografía.
• Colores.
• Tamaños.
• Espaciados.
• Fondos.
• Bordes.
• Sombras.
• Posicionamiento.
• Animaciones.
• Visibilidad.
• Configuraciones responsive.
• Clases CSS e identificadores.

La combinación de todas estas opciones permite crear diseños muy diferentes utilizando los mismos módulos.

Configuración según el elemento

El panel de opciones cambia en función del componente que estés editando.

Por ejemplo, un módulo de imagen puede ofrecer opciones relacionadas con:

• La imagen.
• El texto alternativo.
• El enlace.
• El tamaño.
• El ajuste visual.

En cambio, un módulo de botón tendrá opciones relacionadas con el texto del botón, su enlace, colores, tipografía y diferentes aspectos visuales.

Las filas y secciones, por su parte, dispondrán de opciones relacionadas principalmente con su estructura, dimensiones, fondos y espaciado.

Contenido y diseño

Una de las ideas fundamentales al trabajar con Divi es diferenciar entre el contenido y el diseño.

El contenido determina qué información se muestra, mientras que el diseño determina cómo se presenta visualmente.

Por ejemplo, en un módulo de texto puedes escribir:

Solicita información sin compromiso

y posteriormente decidir que ese texto aparezca con una determinada tipografía, tamaño, color, alineación y espaciado.

Esta separación facilita modificar la apariencia sin tener que cambiar el contenido.

Opciones de diseño

Las opciones de diseño permiten personalizar la apariencia de cada elemento.

Dependiendo del módulo, pueden incluir controles relacionados con:

• Tipografía.
• Tamaño.
• Color.
• Alineación.
• Anchura.
• Altura.
• Margen.
• Padding.
• Bordes.
• Sombras.

Estas opciones permiten conseguir desde diseños sencillos y minimalistas hasta composiciones visuales mucho más elaboradas.

Margen y padding

Dos de los conceptos que más utilizarás dentro del panel de opciones son el margen y el padding.

El margen controla el espacio exterior de un elemento, mientras que el padding controla el espacio interior entre el contenido y los límites del elemento.

Una representación sencilla sería:

┌───────────────────────────┐
│         Margen            │
│   ┌───────────────────┐   │
│   │      Padding      │   │
│   │     Contenido     │   │
│   └───────────────────┘   │
│                           │
└───────────────────────────┘

Comprender esta diferencia es fundamental para evitar utilizar elementos adicionales únicamente para generar espacios.

Configuración responsive

Una de las características más importantes del panel de opciones es la posibilidad de adaptar diferentes propiedades a distintos dispositivos.

Una misma configuración puede necesitar valores diferentes en escritorio, tablet y móvil.

Por ejemplo, un título puede utilizar un tamaño grande en ordenador y uno más reducido en móvil.

También puede ser necesario modificar:

• Espaciados.
• Alineación.
• Tamaño de imágenes.
• Anchuras.
• Alturas.
• Visibilidad de determinados elementos.

El objetivo no es crear tres diseños completamente diferentes, sino adaptar el mismo diseño para que funcione correctamente en cada dispositivo.

Opciones avanzadas

Además de las configuraciones visuales, Divi permite acceder a opciones avanzadas para controlar aspectos más técnicos del elemento.

Dependiendo del componente, estas opciones pueden utilizarse para trabajar con:

• Clases CSS.
• ID o identificadores.
• CSS personalizado.
• Posicionamiento.
• Visibilidad.
• Transiciones y efectos.
• Atributos específicos.

Estas herramientas son especialmente útiles cuando necesitas ir más allá de las opciones estándar del builder.

Cuándo utilizar CSS personalizado

Divi ofrece una gran cantidad de controles visuales, por lo que muchas modificaciones pueden realizarse directamente desde el panel sin necesidad de escribir CSS.

El CSS personalizado debería utilizarse cuando realmente aporta una solución que no resulta práctica mediante las opciones disponibles.

Por ejemplo, puede ser útil para crear determinados efectos, ajustar comportamientos específicos o aplicar estilos personalizados a elementos concretos.

Utilizar CSS para cada pequeño cambio puede generar una estructura difícil de mantener, especialmente en proyectos grandes.

Panel de opciones y presets

Los presets permiten evitar que tengas que configurar manualmente los mismos estilos una y otra vez.

Por ejemplo, si todos los botones de una web deben tener una determinada tipografía, color, borde y tamaño, puedes definir un estilo común y aplicarlo a diferentes botones.

Esto convierte el panel de opciones en una herramienta no solo para editar elementos individuales, sino también para construir un sistema de diseño coherente.

Los presets se estudiarán con detalle en el bloque dedicado al sistema de diseño de Divi 5.

Modificar una propiedad sin alterar las demás

Una buena práctica consiste en modificar únicamente las propiedades necesarias.

Si un módulo ya tiene una configuración correcta y únicamente necesitas cambiar su tamaño, no es necesario modificar simultáneamente la tipografía, los colores, el espaciado y otras propiedades.

Cuantos menos cambios innecesarios realices, más fácil será mantener una configuración coherente.

Ejemplo práctico

Imagina que tienes un título que aparece demasiado grande en móvil.

En lugar de crear un segundo título exclusivamente para teléfonos, puedes utilizar las opciones responsive del panel para establecer un tamaño diferente en dispositivos pequeños.

De esta forma mantienes un único elemento:

Título
├── Escritorio: tamaño grande
├── Tablet: tamaño intermedio
└── Móvil: tamaño reducido

Esto simplifica la estructura de la página y facilita su mantenimiento.

Panel de opciones y estructura de Divi

Es importante recordar que el panel de opciones funciona sobre el elemento que hayas seleccionado.

Si seleccionas una sección, las modificaciones pueden afectar a una zona completa. Si seleccionas una fila, afectarán a la estructura de esa fila. Si seleccionas un módulo, afectarán únicamente a ese módulo.

Por este motivo, antes de modificar una propiedad conviene comprobar qué nivel de la estructura estás editando.

Errores habituales

Al comenzar a trabajar con Divi es frecuente utilizar demasiadas configuraciones manuales. Esto puede provocar que cada módulo termine teniendo un estilo diferente.

Otros errores habituales son:

• Modificar demasiadas propiedades a la vez: dificulta identificar qué cambio ha provocado un problema.
• Utilizar márgenes excesivos: puede generar problemas en dispositivos pequeños.
• Ignorar el responsive: una configuración correcta en escritorio puede fallar en móvil.
• Abusar del CSS: muchas modificaciones pueden realizarse desde el propio builder.
• No utilizar presets: obliga a repetir configuraciones manualmente.
• Modificar el elemento equivocado: especialmente en estructuras complejas.

Buenas prácticas

Para trabajar de forma eficiente con el panel de opciones de Divi 5 es recomendable:

• Identificar primero el elemento: asegúrate de estar editando la sección, fila, columna o módulo correcto.
• Modifica únicamente lo necesario: evita configuraciones innecesarias.
• Utiliza presets cuando un estilo se repita: ahorrarás tiempo y mantendrás coherencia.
• Comprueba siempre el responsive: especialmente después de modificar tamaños y espaciados.
• Utiliza CSS de forma estratégica: no como sustituto de las herramientas visuales del builder.
• Mantén una estructura sencilla: facilitará futuras modificaciones.

Panel de opciones dentro del flujo de trabajo

Un flujo de trabajo eficiente puede combinar los diferentes sistemas que ofrece Divi:

1. Seleccionar el elemento mediante los controles contextuales.
2. Acceder al panel de opciones.
3. Modificar el contenido o el diseño.
4. Comprobar el resultado visual.
5. Adaptar la configuración responsive cuando sea necesario.
6. Guardar o reutilizar la configuración si se trata de un elemento repetitivo.

Este proceso permite trabajar de forma ordenada y evita realizar cambios aleatorios que posteriormente puedan resultar difíciles de mantener.

El panel de opciones de Divi 5 es el centro de configuración de los elementos que forman una página. Desde él puedes controlar el contenido, diseño, espaciado, responsive y diferentes aspectos avanzados de secciones, filas, columnas y módulos.

La clave para utilizarlo correctamente no está en modificar todas las opciones disponibles, sino en saber qué propiedad necesitas cambiar y en qué nivel de la estructura debes hacerlo.

Cuando combines el panel de opciones con los controles contextuales, el sistema de arrastrar y soltar y los presets, tendrás una base sólida para trabajar de forma rápida, ordenada y profesional con Divi 5.

La función Copiar de Divi 5 permite reutilizar rápidamente la configuración de un elemento sin tener que volver a crearlo desde cero. Es una herramienta especialmente útil cuando estás construyendo páginas con estructuras repetitivas o cuando quieres trasladar un elemento de una zona a otra del proyecto.

Copiar es diferente de clonar. Aunque ambas funciones pueden parecer similares, su finalidad dentro del flujo de trabajo es distinta. Entender esta diferencia te ayudará a trabajar de forma más rápida y organizada con el constructor.

¿Qué significa copiar en Divi 5?

Cuando copias un elemento en Divi, guardas temporalmente su estructura y configuración para poder utilizarla posteriormente en otra ubicación.

El elemento original permanece en su posición. La copia puede utilizarse después para crear otro elemento con una configuración similar.

Por ejemplo, si tienes un módulo de botón con un diseño personalizado, puedes copiarlo y utilizar esa configuración en otra parte de la página sin tener que configurar nuevamente todos sus estilos.

¿Qué elementos se pueden copiar?

La función de copiar puede utilizarse sobre diferentes niveles de la estructura de Divi, dependiendo de la acción que quieras realizar.

Entre los elementos que puedes reutilizar se encuentran:

• Secciones: para reutilizar una estructura completa.
• Filas: para reutilizar una distribución de columnas.
• Columnas: cuando necesitas trasladar una determinada estructura.
• Módulos: para reutilizar contenido y configuración de un elemento concreto.

La posibilidad de copiar estructuras completas resulta especialmente útil en páginas que utilizan patrones de diseño repetitivos.

Copiar frente a mover

Es importante diferenciar entre copiar y mover.

Cuando mueves un elemento, cambia su posición dentro de la estructura. El elemento sigue siendo el mismo.

Cuando lo copias, mantienes el elemento original y preparas una copia para utilizarla en otra ubicación.

Por ejemplo:

Elemento original
      ↓
     COPIAR
      ↓
Original + copia

Esta diferencia es fundamental cuando quieres mantener un elemento en su posición original y utilizar una segunda versión en otro lugar.

Copiar un módulo

Uno de los usos más habituales es copiar módulos.

Imagina que has creado un módulo de texto con una configuración concreta:

• Tipografía personalizada.
• Tamaño determinado.
• Color específico.
• Alineación.
• Espaciado.

Si necesitas otro módulo con la misma configuración, puedes copiar el elemento en lugar de repetir manualmente todos estos ajustes.

Después puedes modificar el contenido del nuevo módulo manteniendo su configuración visual.

Copiar una fila completa

También puedes utilizar la copia para reutilizar una estructura completa.

Por ejemplo, una fila puede contener tres columnas:

Fila
├── Columna 1
├── Columna 2
└── Columna 3

Si quieres crear otra sección con una distribución similar, copiar la fila puede ahorrarte bastante tiempo.

Una vez creada la copia, puedes modificar los módulos necesarios sin tener que construir nuevamente las columnas.

Copiar una sección

Cuando necesitas reutilizar una composición completa, copiar una sección puede ser una solución muy práctica.

Una sección puede contener múltiples filas, columnas y módulos:

Sección
├── Fila 1
│   ├── Columna
│   └── Columna
│
└── Fila 2
    ├── Columna
    └── Columna

Copiar esta estructura permite crear rápidamente una nueva zona de contenido basada en el mismo diseño.

Copiar dentro de la misma página

Uno de los escenarios más sencillos consiste en copiar un elemento dentro de la misma página.

Por ejemplo, puedes tener varias tarjetas de servicios y utilizar una de ellas como base para crear las demás.

El proceso general es:

1. Seleccionar el elemento que quieres reutilizar.
2. Utilizar la opción de copiar.
3. Seleccionar la ubicación donde quieres utilizar la copia.
4. Insertar el elemento.
5. Modificar el contenido específico.

De esta forma puedes crear elementos repetitivos mucho más rápido.

Copiar entre diferentes páginas

La copia también puede ser útil cuando estás trabajando con diferentes páginas del mismo sitio.

Por ejemplo, si has creado una sección de llamada a la acción y quieres utilizar una estructura similar en varias páginas, puedes reutilizarla en lugar de crearla desde cero.

Esto ayuda a mantener una apariencia coherente entre las diferentes páginas del proyecto.

Copiar contenido y estilos

Una de las principales ventajas de copiar elementos es que no necesitas reconstruir manualmente su configuración.

Dependiendo del elemento y de la operación utilizada, puedes reutilizar tanto su estructura como buena parte de sus ajustes.

Esto puede incluir:

• Configuración visual.
• Tipografía.
• Colores.
• Espaciados.
• Bordes.
• Sombras.
• Configuración responsive.
• Otros ajustes del elemento.

Después de insertar la copia puedes modificar únicamente aquello que sea diferente.

Copiar para crear elementos repetitivos

Una de las situaciones donde más tiempo puedes ahorrar es en la creación de elementos repetitivos.

Por ejemplo, una página de servicios puede tener:

Servicio 1
Servicio 2
Servicio 3
Servicio 4
Servicio 5

En lugar de configurar cinco módulos individualmente, puedes crear correctamente el primero y utilizarlo como base para los demás.

Después solo tendrás que cambiar el título, descripción, imagen o enlace correspondiente.

Copiar no significa crear un elemento global

Otro concepto importante es que copiar un elemento no significa necesariamente que hayas creado un elemento global.

Una copia puede funcionar como un elemento independiente. Si posteriormente modificas esa copia, el cambio no tiene por qué afectar al elemento original.

Esto resulta útil cuando quieres partir de una configuración común pero necesitas que cada elemento evolucione de manera independiente.

Copiar frente a clonar

Las funciones de copiar y clonar pueden confundirse fácilmente.

De forma general, podemos entenderlas así:

La diferencia práctica dependerá del flujo de trabajo que estés realizando, pero el concepto fundamental es que copiar está orientado a reutilizar un elemento, mientras que clonar facilita crear una copia inmediata.

La siguiente sección del curso profundizará específicamente en la función de clonar.

Copiar y mantener una estructura coherente

La copia también puede ayudarte a mantener una estructura visual consistente.

Si todos los bloques de una página parten de una misma estructura, es menos probable que aparezcan diferencias accidentales entre ellos.

Por ejemplo, puedes crear una tarjeta correctamente configurada y utilizarla como plantilla de partida para las demás.

Esto resulta especialmente útil cuando trabajas con diseños que contienen muchas secciones similares.

Cuándo utilizar copiar

La función de copiar resulta especialmente recomendable cuando:

• Quieres reutilizar un elemento en otra ubicación.
• Necesitas trasladar una estructura entre zonas de trabajo.
• Quieres mantener el original intacto.
• Estás creando elementos repetitivos.
• Quieres reutilizar una configuración visual.
• Necesitas ahorrar tiempo durante la construcción de una página.

Cuándo no conviene utilizarlo

No siempre copiar es la mejor solución.

Si necesitas que un elemento permanezca sincronizado con otras versiones, puede ser más adecuado utilizar un sistema global o un preset, dependiendo del caso.

Del mismo modo, si simplemente quieres crear una copia inmediata dentro de la misma estructura, la función de clonar puede resultar más directa.

La elección de la herramienta adecuada dependerá de cómo quieras utilizar posteriormente el elemento.

Buenas prácticas al copiar elementos

Para trabajar de forma ordenada es recomendable seguir algunas buenas prácticas:

• Utiliza elementos correctamente configurados como base: evita copiar diseños que todavía estén en fase de pruebas.
• Comprueba el contenido: después de copiar, revisa textos, imágenes y enlaces.
• Revisa el responsive: comprueba que la configuración funciona correctamente en diferentes dispositivos.
• Evita estructuras innecesariamente complejas: copiar una estructura excesivamente complicada puede trasladar problemas a otras partes de la web.
• Utiliza presets cuando corresponda: si el objetivo es mantener un estilo global, puede ser mejor utilizar un sistema de diseño.

Ejemplo práctico

Supongamos que estás creando una página de servicios y has diseñado una tarjeta con esta estructura:

Tarjeta
├── Icono
├── Título
├── Descripción
└── Botón

Una vez que la tarjeta tiene el diseño definitivo, puedes copiarla para crear otras tarjetas.

La nueva versión conservará la estructura y configuración de la original. Después puedes modificar únicamente el contenido necesario:

Tarjeta 1
├── Icono
├── Servicio A
├── Descripción A
└── Botón

Tarjeta 2
├── Icono
├── Servicio B
├── Descripción B
└── Botón

Este método permite crear páginas más rápidamente y mantener una mayor coherencia visual.

La función Copiar de Divi 5 permite reutilizar elementos y configuraciones sin tener que reconstruirlos manualmente. Es especialmente útil para crear estructuras repetitivas, trasladar componentes y mantener una base visual coherente.

La clave está en entender qué necesitas conseguir: copiar resulta útil cuando quieres reutilizar un elemento, mientras que clonar está orientado a crear rápidamente una copia dentro de la estructura de trabajo.

Utilizada correctamente, esta función puede reducir considerablemente el tiempo necesario para construir y mantener páginas con Divi 5.

La función Clonar de Divi 5 permite crear rápidamente una copia de un elemento que ya existe dentro del constructor. Es especialmente útil cuando estás creando estructuras repetitivas y quieres partir de un elemento que ya tiene configurado el diseño, el contenido y los diferentes ajustes.

En lugar de crear nuevamente una sección, fila, columna o módulo desde cero, puedes clonar un elemento existente y utilizar la copia como punto de partida para realizar las modificaciones necesarias.

¿Qué significa clonar en Divi 5?

Clonar consiste en crear una copia de un elemento dentro de la estructura de la página.

El elemento original permanece en su ubicación y se genera una segunda versión que puedes modificar de forma independiente.

Por ejemplo, si tienes una tarjeta de servicio correctamente diseñada, puedes clonarla para crear una segunda tarjeta con el mismo aspecto general y cambiar después su contenido.

El objetivo principal es ahorrar tiempo evitando repetir configuraciones.

¿Qué elementos se pueden clonar?

La clonación puede utilizarse sobre diferentes elementos de la estructura de Divi, dependiendo de lo que necesites duplicar.

Entre ellos podemos encontrar:

• Secciones: para duplicar una composición completa.
• Filas: para reutilizar una estructura de columnas.
• Columnas: cuando necesitas repetir una determinada distribución.
• Módulos: para crear rápidamente otro elemento con una configuración similar.

La posibilidad de clonar estructuras completas resulta especialmente útil en páginas que utilizan patrones de diseño repetitivos.

Clonar un módulo

Uno de los usos más habituales de la clonación es duplicar módulos.

Imagina que has diseñado un botón con una configuración concreta:

• Tipografía.
• Color.
• Tamaño.
• Bordes.
• Espaciado.
• Estilos para diferentes dispositivos.

Si necesitas otro botón con una configuración similar, puedes clonar el módulo y modificar únicamente el texto o el enlace.

De esta forma evitas configurar manualmente todas las propiedades de nuevo.

Clonar una fila

Las filas también pueden clonarse para reutilizar una determinada estructura.

Por ejemplo, puedes tener una fila formada por tres columnas:

Fila
├── Columna 1
├── Columna 2
└── Columna 3

Al clonar la fila puedes obtener otra estructura equivalente y modificar posteriormente sus módulos.

Esto es especialmente útil cuando varias zonas de una página utilizan la misma distribución.

Clonar una sección completa

Cuando una sección contiene varias filas y módulos, reconstruirla manualmente puede llevar bastante tiempo.

La clonación permite crear rápidamente una segunda versión:

Sección original
├── Fila 1
├── Fila 2
└── Fila 3

        ↓ CLONAR

Sección original
Sección clonada
├── Fila 1
├── Fila 2
└── Fila 3

Después puedes modificar la copia para adaptarla a la nueva zona de la página.

Clonar para crear elementos repetitivos

La clonación es especialmente útil cuando una página contiene varios elementos similares.

Por ejemplo, una página de servicios puede tener varias tarjetas:

Servicio 1
Servicio 2
Servicio 3
Servicio 4

En lugar de crear cada tarjeta desde cero, puedes diseñar correctamente la primera y clonarla varias veces.

Después solo tendrás que modificar el contenido específico de cada una.

Clonar frente a crear desde cero

La principal ventaja de clonar es que parte de una configuración que ya existe.

Si creas un elemento desde cero, tendrás que configurar nuevamente sus diferentes propiedades. Si lo clonas, puedes comenzar directamente desde una estructura ya preparada.

Clonar frente a copiar

Las funciones de copiar y clonar están relacionadas, pero cumplen objetivos diferentes dentro del flujo de trabajo.

Clonar está especialmente pensado para crear rápidamente una copia del elemento dentro del contexto de trabajo, mientras que copiar permite reutilizar un elemento posteriormente en otra ubicación.

Una forma sencilla de entender la diferencia es:

CLONAR
Elemento → copia inmediata

COPIAR
Elemento → guardar para reutilizar

La elección dependerá de lo que quieras hacer con el elemento.

La copia clonada es independiente

Cuando clonas un elemento para crear una nueva versión, puedes modificar la copia sin necesidad de modificar el elemento original.

Por ejemplo, puedes tener:

Tarjeta original
Título: Servicio de diseño web

Tarjeta clonada
Título: Servicio SEO

Ambas pueden mantener una estructura visual similar, pero su contenido puede ser diferente.

Esto permite crear diseños consistentes sin obligar a que todos los elementos permanezcan vinculados.

Clonar y contenido

Cuando clonas un elemento debes revisar siempre el contenido de la copia.

Es posible que determinados datos tengan que modificarse para adaptarlos a la nueva ubicación.

Entre los elementos que conviene revisar están:

• Textos.
• Imágenes.
• Enlaces.
• Títulos.
• Botones.
• Iconos.
• Información específica del contenido.

El objetivo es conservar la estructura y el diseño que quieres reutilizar, pero adaptar el contenido a su nueva función.

Clonar y diseño responsive

Una de las ventajas de clonar un elemento correctamente configurado es que puedes reutilizar también buena parte de sus ajustes responsive.

Por ejemplo, si una tarjeta ya está preparada para escritorio, tablet y móvil, la copia puede servir como una base mucho más avanzada que un módulo creado desde cero.

Aun así, siempre es recomendable comprobar el resultado en los diferentes tamaños de pantalla.

Clonar una estructura completa

No siempre necesitas clonar únicamente módulos individuales.

En determinados proyectos puede ser más eficiente clonar una estructura completa y después modificar sus diferentes componentes.

Por ejemplo:

Sección de servicios
├── Título
├── Introducción
├── Tarjeta 1
├── Tarjeta 2
└── Tarjeta 3

Si necesitas crear una sección de características con una composición muy similar, puedes utilizar la estructura clonada como punto de partida.

Después puedes sustituir los textos, imágenes y elementos que sean diferentes.

Ventajas de clonar

La clonación ofrece varias ventajas dentro del proceso de creación de una web:

• Ahorro de tiempo: evita repetir configuraciones.
• Mayor consistencia: facilita mantener diseños similares.
• Menos errores: reduces la posibilidad de olvidar alguna configuración.
• Mayor productividad: permite crear rápidamente estructuras repetitivas.
• Facilidad de mantenimiento: las nuevas versiones parten de una estructura conocida.

Cuándo utilizar la clonación

La función de clonar resulta especialmente recomendable cuando:

• Necesitas crear varios elementos similares.
• Quieres reutilizar una estructura existente.
• Estás construyendo tarjetas o bloques repetitivos.
• Quieres mantener una misma configuración visual.
• Necesitas crear rápidamente una nueva sección.
• Quieres ahorrar tiempo durante la construcción de una página.

Cuándo no conviene clonar

No siempre es recomendable clonar.

Si el nuevo elemento va a tener una estructura completamente diferente, puede ser más limpio crearlo desde cero.

También debes tener cuidado de no clonar estructuras excesivamente complejas cuando únicamente necesitas un pequeño componente. En estos casos puedes terminar arrastrando elementos innecesarios a la nueva estructura.

Antes de clonar conviene preguntarse si realmente necesitas copiar toda la estructura o solamente una parte.

Ejemplo práctico: tarjetas de servicios

Supongamos que estás creando una página para una empresa que ofrece tres servicios.

Diseñas primero una tarjeta:

┌─────────────────────────┐
│         Imagen          │
│                         │
│   Diseño de páginas     │
│                         │
│  Descripción servicio   │
│                         │
│      Más información    │
└─────────────────────────┘

Una vez terminada, puedes clonarla para crear las siguientes:

Tarjeta 1 → Diseño web

Tarjeta 2 → SEO

Tarjeta 3 → Mantenimiento

La estructura visual se mantiene y solamente necesitas modificar el contenido específico.

Buenas prácticas al clonar

Para aprovechar correctamente esta función es recomendable:

• Clonar elementos terminados: utiliza como base diseños que ya estén correctamente configurados.
• Revisar el contenido: cambia textos, imágenes y enlaces cuando corresponda.
• Comprobar el responsive: verifica el resultado en escritorio, tablet y móvil.
• No clonar estructuras innecesarias: utiliza el nivel adecuado para cada caso.
• Revisar los enlaces: especialmente en botones y llamadas a la acción.
• Mantener una estructura sencilla: evita duplicar elementos que no sean necesarios.

Clonar y sistemas de diseño

La clonación puede combinarse con otras herramientas de Divi 5, como los presets.

Mientras que clonar permite partir de una estructura existente, los presets permiten mantener determinados estilos de forma coherente entre diferentes elementos.

Esto resulta especialmente interesante en proyectos grandes donde se crean muchas páginas utilizando patrones de diseño similares.

Clonar como herramienta de productividad

Cuanto más grande es una página, mayor es el beneficio de reutilizar estructuras existentes.

Crear cada elemento desde cero puede generar muchas tareas repetitivas. La clonación permite convertir un diseño ya terminado en una base reutilizable.

Por este motivo, aprender a identificar qué elementos merece la pena clonar es una habilidad importante para trabajar de forma eficiente con Divi 5.

La función Clonar de Divi 5 permite crear rápidamente copias de secciones, filas, columnas y módulos para reutilizar estructuras existentes.

Su principal ventaja es que evita repetir configuraciones y facilita la creación de elementos repetitivos, manteniendo una apariencia coherente en toda la página.

La clave está en utilizarla de forma estratégica: clona cuando necesites una estructura similar y modifica después únicamente aquello que sea diferente.

Combinada con las funciones de copiar, presets y reutilización de elementos, la clonación permite desarrollar páginas de Divi 5 de una forma mucho más rápida y organizada.

La función de guardar elementos en Divi 5 permite almacenar secciones, filas, columnas o módulos para poder reutilizarlos posteriormente. Es una herramienta especialmente útil cuando estás creando un sitio web con elementos que se repiten en diferentes páginas o cuando quieres construir una biblioteca propia de componentes.

Guardar un elemento va un paso más allá de copiar o clonar. Mientras que estas funciones están pensadas principalmente para trabajar durante la edición de una página, guardar permite conservar un elemento para utilizarlo posteriormente dentro del proyecto.

¿Qué significa guardar un elemento?

Cuando guardas un elemento en Divi, creas una versión reutilizable que queda disponible para futuras inserciones.

Por ejemplo, puedes diseñar una llamada a la acción con su estructura, colores, tipografía, espaciados y botón. Una vez terminada, puedes guardarla para utilizarla posteriormente en otras páginas.

Esto evita tener que volver a construir el mismo componente cada vez que lo necesites.

¿Qué elementos se pueden guardar?

Dependiendo de la estructura que quieras reutilizar, puedes guardar diferentes niveles de contenido.

• Secciones: para almacenar composiciones completas.
• Filas: para reutilizar estructuras de columnas.
• Columnas: cuando quieres conservar una determinada distribución.
• Módulos: para guardar componentes individuales.

La elección dependerá de cuánto contenido quieras reutilizar.

Guardar un módulo

Guardar un módulo resulta especialmente útil cuando has creado un componente que vas a utilizar repetidamente.

Por ejemplo, puedes diseñar un botón con una configuración específica y guardar ese módulo para utilizarlo posteriormente.

También puedes guardar elementos como:

• Formularios.
• Llamadas a la acción.
• Bloques de texto.
• Galerías.
• Elementos promocionales.
• Bloques informativos.

Una vez guardado, el componente puede utilizarse como punto de partida en otras partes del proyecto.

Guardar una fila

Si quieres reutilizar una estructura formada por varias columnas y módulos, puede ser más práctico guardar la fila completa.

Por ejemplo:

Fila
├── Columna 1
│   └── Imagen
├── Columna 2
│   ├── Título
│   └── Texto
└── Columna 3
    └── Botón

En lugar de guardar cada módulo por separado, puedes conservar toda la estructura como una unidad.

Guardar una sección

Cuando una composición contiene varias filas, guardar la sección completa puede ser la opción más eficiente.

Por ejemplo, una sección de presentación puede contener:

Sección
├── Fila de título
├── Fila de contenido
└── Fila de llamada a la acción

Al guardar la sección puedes reutilizar posteriormente toda la composición sin tener que reconstruirla.

La biblioteca como espacio de reutilización

Los elementos guardados forman parte del sistema de reutilización de Divi. Esto permite crear una biblioteca propia con componentes que puedes utilizar en diferentes páginas.

Una biblioteca bien organizada puede incluir elementos como:

• Cabeceras.
• Bloques de servicios.
• Testimonios.
• Llamadas a la acción.
• Formularios.
• Secciones informativas.
• Bloques de contacto.
• Diseños completos.

De esta forma, el trabajo deja de consistir en crear cada página desde cero y pasa a basarse en la combinación de componentes previamente preparados.

Guardar frente a copiar

Guardar y copiar son funciones relacionadas, pero tienen objetivos diferentes.

Por tanto, guardar resulta especialmente interesante cuando sabes que un componente puede ser útil en diferentes momentos o páginas del proyecto.

Guardar frente a clonar

La clonación está pensada principalmente para crear rápidamente una copia dentro del proceso de edición.

Guardar, en cambio, permite crear un recurso reutilizable que puedes recuperar posteriormente.

Una forma sencilla de entenderlo es:

CLONAR
Elemento → copia inmediata

GUARDAR
Elemento → biblioteca → reutilización posterior

Esta diferencia es importante cuando empiezas a construir una biblioteca de componentes.

Elementos guardados y consistencia visual

Una de las principales ventajas de guardar elementos es que facilita mantener una identidad visual coherente.

Si tienes un determinado diseño de llamada a la acción, puedes guardarlo y utilizar la misma estructura en diferentes páginas.

De esta forma puedes mantener constantes aspectos como:

• Tipografía.
• Colores.
• Espaciados.
• Bordes.
• Sombras.
• Distribución de elementos.

Esto resulta especialmente útil en proyectos profesionales donde la coherencia visual es importante.

Crear una biblioteca propia

Una buena práctica consiste en crear una biblioteca de elementos que puedas utilizar como base en futuros proyectos.

Por ejemplo, una biblioteca puede organizarse conceptualmente así:

Biblioteca Divi
│
├── Botones
├── Formularios
├── Llamadas a la acción
├── Testimonios
├── Servicios
├── Contacto
├── Cabeceras
└── Secciones completas

Con el tiempo, esta biblioteca puede convertirse en una de las herramientas más útiles para acelerar el desarrollo de nuevos sitios web.

Guardar elementos reutilizables

No todo lo que crees en una web merece ser guardado.

Lo recomendable es identificar aquellos componentes que tienen posibilidades reales de reutilización.

Por ejemplo, puede tener sentido guardar:

• Una tarjeta de servicio.
• Una llamada a la acción.
• Un bloque de contacto.
• Un formulario personalizado.
• Una estructura de testimonios.

En cambio, guardar cada pequeño módulo individual puede terminar generando una biblioteca demasiado grande y difícil de gestionar.

Nombrar correctamente los elementos

Cuando empiezas a guardar muchos componentes, el nombre se vuelve especialmente importante.

Es recomendable utilizar nombres descriptivos que permitan identificar rápidamente el contenido.

Por ejemplo, en lugar de utilizar nombres genéricos como:

Sección 1
Módulo nuevo
Copia 2

puedes utilizar nombres más descriptivos:

CTA - Contacto
Tarjeta - Servicio
Formulario - Presupuesto
Testimonios - 3 columnas

Esto facilita localizar posteriormente el elemento que necesitas.

Guardar elementos durante un proyecto

Una estrategia eficiente consiste en guardar los componentes que ya han sido revisados y aprobados.

Por ejemplo:

1. Diseñas un componente.
2. Lo revisas en escritorio.
3. Compruebas tablet y móvil.
4. Revisas textos, imágenes y enlaces.
5. Guardas el elemento.
6. Lo reutilizas en otras páginas.

De esta forma evitas convertir la biblioteca en un almacén de elementos que todavía están incompletos.

Guardar antes de reutilizar

Cuando creas un componente que sabes que utilizarás varias veces, puede ser interesante guardarlo una vez terminado.

Esto resulta más eficiente que crear una primera versión, clonarla varias veces y después intentar reconstruirla cuando necesites utilizarla en otra página.

Una biblioteca de componentes bien preparada permite trabajar con mayor rapidez a medida que el proyecto crece.

Elementos guardados y presets

Los elementos guardados y los presets cumplen funciones diferentes, aunque pueden utilizarse conjuntamente.

Un elemento guardado conserva una estructura que puedes reutilizar, mientras que un preset permite establecer determinados estilos de forma sistemática.

Por ejemplo, puedes tener una tarjeta de servicio guardada como componente y utilizar presets para mantener una tipografía y unos botones coherentes en diferentes partes de la web.

Esta combinación resulta especialmente útil en proyectos grandes.

Ejemplo práctico

Imagina que desarrollas varias páginas para una empresa y quieres utilizar siempre la misma llamada a la acción.

Creas una sección como esta:

┌─────────────────────────────────┐
│        ¿Necesitas ayuda?        │
│                                 │
│  Solicita información sin coste │
│                                 │
│        [ Contactar ]             │
└─────────────────────────────────┘

Una vez revisada y terminada, puedes guardarla.

Posteriormente podrás reutilizarla en:

• Página de servicios.
• Página de empresa.
• Entradas del blog.
• Landing pages.
• Páginas específicas de captación.

En lugar de diseñarla nuevamente cada vez, partes de una versión ya preparada.

Ventajas de guardar elementos

Guardar componentes aporta varias ventajas:

• Ahorro de tiempo: reduces el trabajo repetitivo.
• Reutilización: puedes recuperar componentes en diferentes páginas.
• Consistencia: facilita mantener una identidad visual uniforme.
• Productividad: permite construir nuevas páginas más rápidamente.
• Organización: puedes crear una biblioteca propia de componentes.
• Estandarización: facilita trabajar con estructuras previamente revisadas.

Errores habituales

Uno de los errores más comunes es guardar absolutamente todo lo que se crea.

Con el tiempo esto puede generar una biblioteca llena de elementos prácticamente idénticos y dificultar la búsqueda.

Otros errores habituales son:

• Utilizar nombres poco descriptivos.
• Guardar elementos incompletos.
• No revisar el responsive antes de guardarlos.
• Duplicar componentes innecesariamente.
• No actualizar los elementos que forman parte de un sistema de diseño.

Buenas prácticas

Para mantener una biblioteca útil en Divi 5:

• Guarda únicamente componentes realmente reutilizables.
• Utiliza nombres descriptivos.
• Organiza los elementos por función.
• Revisa el diseño antes de guardarlo.
• Comprueba siempre el comportamiento responsive.
• Elimina componentes antiguos que ya no utilices.
• Combina la biblioteca con presets cuando necesites controlar estilos globales.

Guardar elementos en un flujo profesional

En un proyecto profesional, la biblioteca puede convertirse en una parte importante del flujo de trabajo.

Una vez creados y revisados determinados componentes, puedes utilizarlos como piezas reutilizables para construir nuevas páginas.

El proceso puede resumirse así:

Diseñar
   ↓
Revisar
   ↓
Optimizar
   ↓
Guardar
   ↓
Reutilizar
   ↓
Adaptar

Este sistema permite reducir considerablemente el tiempo necesario para crear nuevas páginas sin renunciar a la personalización.

La función de guardar elementos en Divi 5 permite crear una biblioteca de componentes reutilizables que facilita el desarrollo y mantenimiento de un sitio web.

Guardar se diferencia de copiar y clonar porque está pensado para conservar un elemento y recuperarlo posteriormente cuando sea necesario.

Una biblioteca bien organizada puede incluir módulos, filas, secciones y otros componentes que hayan sido previamente diseñados y revisados. Combinada con los presets y el sistema de diseño de Divi 5, esta estrategia permite crear sitios web de forma más rápida, coherente y profesional.

La Biblioteca de Divi 5 permite almacenar elementos de diseño para utilizarlos posteriormente en diferentes páginas y proyectos. Se trata de una de las herramientas más útiles cuando empiezas a trabajar con Divi de forma sistemática, ya que permite convertir diseños ya creados en componentes reutilizables.

En lugar de construir cada sección o módulo desde cero, puedes guardar aquellos elementos que consideres útiles y recuperarlos cuando los necesites.

¿Qué es la Biblioteca de Divi 5?

La Biblioteca funciona como un espacio donde puedes almacenar elementos creados con Divi para reutilizarlos posteriormente.

En ella puedes conservar diferentes tipos de recursos, desde módulos individuales hasta estructuras de diseño más completas.

Por ejemplo, puedes crear una sección de llamada a la acción, guardarla en la Biblioteca y utilizarla posteriormente en varias páginas.

La idea fundamental es sencilla:

Crear elemento
      ↓
Guardar en la Biblioteca
      ↓
Reutilizar cuando sea necesario

Esto permite construir una colección propia de componentes que acelera progresivamente el desarrollo de nuevos contenidos.

¿Qué se puede guardar en la Biblioteca?

La Biblioteca puede utilizarse para conservar diferentes niveles de la estructura de Divi.

• Módulos: para guardar componentes individuales.
• Filas: para conservar una determinada distribución de columnas.
• Secciones: para reutilizar bloques completos de contenido.
• Layouts: para almacenar composiciones más amplias de una página.

La elección depende de lo que quieras reutilizar posteriormente.

Si solo necesitas un botón determinado, guardar el módulo puede ser suficiente. Si quieres reutilizar una zona completa de una página, puede resultar más práctico guardar la sección.

Guardar un elemento desde el constructor

El proceso habitual comienza mientras estás trabajando directamente en el constructor de Divi 5.

Cuando terminas de diseñar un elemento que quieres conservar, puedes utilizar las opciones disponibles para guardarlo en la Biblioteca.

Antes de hacerlo es recomendable comprobar que el elemento está correctamente terminado.

Conviene revisar especialmente:

• Contenido.
• Tipografía.
• Colores.
• Espaciados.
• Bordes.
• Sombras.
• Responsive.
• Enlaces.

Una vez revisado, puedes guardarlo para disponer de él posteriormente.

Elegir el nivel adecuado

Uno de los aspectos más importantes al trabajar con la Biblioteca es decidir qué parte de la estructura merece la pena guardar.

Por ejemplo, imagina una sección formada por:

Sección
├── Fila
│   ├── Imagen
│   └── Texto
└── Fila
    └── Botón

Si solamente quieres reutilizar el botón, guardar toda la sección sería innecesario.

Si quieres reutilizar toda la composición, en cambio, guardar la sección puede ser la opción más adecuada.

La regla general es guardar el nivel mínimo necesario para conseguir la reutilización que buscas.

Nombrar correctamente los elementos

A medida que la Biblioteca crece, el nombre de cada elemento adquiere una importancia fundamental.

Utilizar nombres genéricos como Sección nueva, Módulo 2 o Copia puede dificultar mucho la gestión posterior.

Es preferible utilizar nombres descriptivos:

CTA - Contacto
Tarjeta - Servicio
Formulario - Presupuesto
Hero - Servicios
Testimonios - 3 columnas
FAQ - Servicios

De esta forma puedes identificar rápidamente qué elemento necesitas sin tener que abrirlos uno por uno.

Crear una Biblioteca organizada

Una Biblioteca profesional debería estar organizada pensando en la reutilización futura.

Puedes establecer una estructura conceptual basada en categorías como:

• Cabeceras.
• Héroes.
• Servicios.
• Testimonios.
• Formularios.
• CTA.
• FAQ.
• Contacto.
• Footers.
• Layouts completos.

El objetivo no es guardar todo lo que construyes, sino crear una colección de elementos realmente útiles.

Guardar elementos reutilizables

No todos los componentes de una página tienen el mismo valor para la Biblioteca.

Normalmente merece la pena guardar aquellos elementos que:

• Se utilizan varias veces.
• Forman parte de un patrón de diseño.
• Han sido probados y funcionan correctamente.
• Pueden adaptarse fácilmente a diferentes contenidos.
• Permiten ahorrar trabajo en futuros proyectos.

Por ejemplo, una tarjeta de servicio puede utilizarse en numerosas páginas cambiando únicamente el título, la descripción y la imagen.

Guardar un diseño antes de reutilizarlo

Una buena práctica consiste en no guardar inmediatamente cualquier elemento que acabes de crear.

Primero conviene comprobar que el diseño funciona correctamente.

1. Crear el elemento.
2. Configurar su diseño.
3. Revisar el contenido.
4. Comprobar el responsive.
5. Verificar enlaces y funcionalidades.
6. Guardar la versión definitiva.

De esta forma, la Biblioteca se convierte en un conjunto de componentes fiables y no en un almacén de diseños sin terminar.

Biblioteca y consistencia visual

Otra ventaja importante de guardar elementos es que facilita mantener una identidad visual coherente.

Si utilizas repetidamente una misma estructura de tarjeta, formulario o llamada a la acción, puedes partir de una versión previamente diseñada.

Esto reduce las diferencias accidentales entre páginas y ayuda a mantener una apariencia uniforme.

Por ejemplo, si todas las llamadas a la acción utilizan una estructura similar, puedes guardar una versión base y reutilizarla cuando sea necesario.

Biblioteca y presets

La Biblioteca y los presets de Divi 5 pueden trabajar conjuntamente, pero no cumplen exactamente la misma función.

La Biblioteca está orientada principalmente a conservar elementos y estructuras reutilizables, mientras que los presets permiten establecer estilos reutilizables para determinados elementos.

Por ejemplo, puedes guardar una tarjeta de servicio en la Biblioteca y utilizar presets para controlar su tipografía, botones o determinados estilos.

Esta combinación permite separar dos conceptos:

Biblioteca
      ↓
¿Qué estructura reutilizo?

Presets
      ↓
¿Qué estilo reutilizo?

Esta forma de trabajar resulta especialmente interesante en proyectos grandes.

Biblioteca como sistema de componentes

Una Biblioteca bien construida puede funcionar prácticamente como un sistema de componentes para el sitio web.

En lugar de pensar cada página como un diseño completamente independiente, puedes combinar diferentes piezas:

Landing page
│
├── Hero
├── Servicios
├── Beneficios
├── Testimonios
├── FAQ
└── CTA

Cada una de estas partes puede partir de elementos previamente guardados.

Esto permite crear nuevas páginas de forma mucho más rápida.

Evitar una Biblioteca excesivamente grande

Guardar demasiados elementos puede tener el efecto contrario al deseado.

Si existen decenas de versiones prácticamente iguales de un mismo componente, localizar la correcta puede resultar complicado.

Por eso es recomendable revisar periódicamente la Biblioteca y eliminar o sustituir elementos que hayan quedado obsoletos.

Una Biblioteca pequeña y bien organizada suele ser mucho más útil que una colección enorme y desordenada.

Versiones de un mismo componente

En determinados proyectos puede ser necesario conservar diferentes versiones de un componente.

Por ejemplo:

CTA - Contacto - Claro
CTA - Contacto - Oscuro
CTA - Contacto - Compacto

En estos casos, el nombre debe explicar claramente las diferencias entre las versiones.

Así podrás seleccionar rápidamente la variante adecuada cuando estés construyendo una nueva página.

Guardar layouts completos

Además de componentes individuales, también puedes utilizar la Biblioteca para conservar composiciones más amplias.

Un layout puede contener diferentes secciones y formar prácticamente una página completa.

Por ejemplo:

Landing - Servicios
├── Hero
├── Introducción
├── Servicios
├── Beneficios
├── Testimonios
├── FAQ
└── CTA

Guardar este tipo de estructura puede ser especialmente útil cuando desarrollas páginas que siguen una arquitectura similar.

Biblioteca para proyectos profesionales

En un entorno profesional, la Biblioteca puede convertirse en una herramienta importante para estandarizar el proceso de creación de sitios web.

Una agencia puede disponer de componentes previamente diseñados y revisados que sirvan como punto de partida para nuevos proyectos.

Esto permite reducir el trabajo repetitivo y dedicar más tiempo a la personalización que realmente aporta valor al cliente.

Ejemplo práctico

Imagina que desarrollas páginas para diferentes empresas y utilizas habitualmente una sección de testimonios.

En lugar de crear la estructura cada vez, puedes diseñar una versión base:

Testimonios
├── Título
├── Testimonio 1
├── Testimonio 2
└── Testimonio 3

Una vez revisada, la guardas en la Biblioteca.

Cuando desarrolles otra página, podrás recuperar la estructura y sustituir los textos, fotografías y datos necesarios.

El diseño general se mantiene y el tiempo de desarrollo se reduce considerablemente.

Buenas prácticas

Para aprovechar correctamente la Biblioteca de Divi 5, es recomendable:

• Guardar solamente elementos útiles: evita almacenar componentes que probablemente nunca volverás a utilizar.
• Utilizar nombres descriptivos: facilita la localización posterior.
• Revisar los elementos antes de guardarlos: comprueba diseño, responsive y funcionalidad.
• Evitar duplicados: conserva una única versión cuando no existan diferencias relevantes.
• Actualizar los componentes: sustituye versiones antiguas cuando sea necesario.
• Organizar la biblioteca: utiliza una nomenclatura coherente.
• Combinarla con presets: utiliza cada herramienta para la función que mejor resuelve.

¿Cuándo merece la pena guardar un elemento?

Una pregunta sencilla puede ayudarte a decidirlo:

¿Es probable que vuelva a necesitar esta estructura?

Si la respuesta es sí, guardarla puede ahorrarte trabajo en el futuro.

Si se trata de un elemento completamente específico de una única página, probablemente no sea necesario añadirlo a la Biblioteca.

Guardar elementos en la Biblioteca de Divi 5 permite crear una colección propia de componentes y estructuras reutilizables. Esta posibilidad resulta especialmente útil cuando un proyecto contiene elementos repetitivos o cuando quieres acelerar la creación de nuevas páginas.

La clave no está en guardar absolutamente todo, sino en construir una Biblioteca organizada, útil y formada por componentes correctamente revisados.

Combinada con los presets y otras herramientas de reutilización de Divi 5, la Biblioteca puede convertirse en una parte fundamental de un flujo de trabajo profesional.

La reutilización de elementos es una de las principales ventajas de trabajar con la Biblioteca de Divi 5. Permite utilizar nuevamente secciones, filas, módulos y layouts que ya han sido creados, evitando tener que construirlos desde cero cada vez que los necesitas.

Un buen sistema de reutilización permite trabajar más rápido, mantener una mayor coherencia visual y reducir el trabajo repetitivo durante el desarrollo de una web.

¿Qué significa reutilizar elementos?

Reutilizar significa utilizar nuevamente un elemento que ya ha sido creado y guardado anteriormente.

Por ejemplo, si has diseñado una sección de testimonios y la has guardado en la Biblioteca, puedes recuperarla posteriormente para utilizarla en otra página.

El proceso puede resumirse así:

Crear
  ↓
Diseñar
  ↓
Guardar
  ↓
Reutilizar
  ↓
Adaptar al nuevo contenido

La gran ventaja es que el trabajo de diseño inicial no se pierde después de utilizarlo una sola vez.

¿Qué elementos se pueden reutilizar?

La reutilización puede aplicarse a diferentes niveles de la estructura de Divi.

• Módulos: para reutilizar componentes individuales.
• Filas: para repetir estructuras de columnas.
• Secciones: para reutilizar bloques completos.
• Layouts: para utilizar composiciones más amplias.

Elegir correctamente el nivel de reutilización permite mantener las páginas organizadas y evitar duplicar contenido innecesario.

Reutilizar un módulo

Los módulos son uno de los elementos más sencillos de reutilizar.

Imagina que has creado una llamada a la acción con un diseño concreto:

┌─────────────────────────────┐
│       ¿Necesitas ayuda?     │
│                             │
│       [ Contactar ]         │
└─────────────────────────────┘

Una vez guardada, puedes utilizarla nuevamente en diferentes páginas.

Esto resulta especialmente útil para elementos como:

• Botones.
• Formularios.
• Galerías.
• Bloques de texto.
• Llamadas a la acción.
• Elementos promocionales.

Reutilizar una fila

Cuando quieres conservar una estructura formada por varias columnas, puedes reutilizar una fila completa.

Por ejemplo:

Fila
├── Imagen
├── Texto
└── Botón

Esta estructura puede utilizarse en diferentes páginas y adaptarse posteriormente al contenido específico de cada una.

Reutilizar una sección

Las secciones son especialmente interesantes cuando contienen varios elementos que funcionan conjuntamente.

Por ejemplo, una sección de servicios puede incluir:

Sección
├── Título
├── Introducción
├── Tarjeta 1
├── Tarjeta 2
└── Tarjeta 3

Si esta estructura se utiliza en diferentes páginas, guardarla permite recuperarla rápidamente.

Reutilizar layouts completos

La reutilización también puede aplicarse a estructuras de página más grandes.

Un layout puede contener diferentes secciones y utilizarse como base para crear una nueva página.

Por ejemplo:

Landing page
│
├── Hero
├── Presentación
├── Servicios
├── Beneficios
├── Testimonios
├── FAQ
└── Contacto

En lugar de crear toda esta estructura desde cero, puedes partir de un layout previamente preparado.

Reutilización frente a clonación

La reutilización y la clonación pueden parecer similares, pero no tienen exactamente el mismo objetivo.

Por tanto, la reutilización forma parte de un proceso más amplio de creación de componentes que pueden utilizarse una y otra vez.

Reutilización independiente

Cuando utilizas un elemento guardado como base para una nueva página, es importante entender si quieres mantener una relación con el componente original o simplemente utilizarlo como punto de partida.

En muchos casos, lo que necesitas es crear una nueva versión que puedas modificar libremente.

Por ejemplo:

Componente original
      ↓
Reutilizar
      ↓
Nueva versión
      ↓
Modificar contenido

Esto permite adaptar el diseño sin necesidad de alterar el componente que utilizas como referencia.

Reutilización de estructuras

Una de las grandes ventajas de la Biblioteca es que no necesitas reutilizar únicamente módulos individuales.

Puedes crear estructuras completas que funcionen como bloques de construcción.

Por ejemplo:

Biblioteca
│
├── Hero
├── Servicios
├── Testimonios
├── FAQ
├── CTA
└── Contacto

Una nueva página puede construirse combinando diferentes elementos de esta colección.

Reutilización y consistencia visual

La reutilización ayuda a mantener una apariencia coherente en todo el sitio web.

Cuando diferentes páginas utilizan estructuras previamente diseñadas, es menos probable que aparezcan diferencias accidentales en elementos que deberían ser similares.

Esto es especialmente importante en:

• Botones.
• Tarjetas.
• Formularios.
• Secciones de llamadas a la acción.
• Bloques de testimonios.
• Elementos de navegación.

La reutilización permite establecer patrones visuales reconocibles para el usuario.

Reutilización y sistema de diseño

La reutilización adquiere todavía más importancia cuando se combina con un sistema de diseño.

Por ejemplo, puedes establecer una estructura estándar para las tarjetas de servicios y utilizarla en diferentes páginas.

Los estilos pueden controlarse mediante presets, mientras que la Biblioteca proporciona las estructuras reutilizables.

Biblioteca
    ↓
Estructura

Presets
    ↓
Estilos

Contenido
    ↓
Información específica

Esta separación permite trabajar de una forma mucho más organizada.

Reutilización en proyectos grandes

Cuanto mayor es un proyecto, más importante resulta disponer de componentes reutilizables.

En una web con decenas de páginas, crear manualmente cada sección puede generar una enorme cantidad de trabajo repetitivo.

En cambio, si dispones de una biblioteca de componentes, puedes construir nuevas páginas utilizando estructuras ya preparadas.

Esto permite concentrar el esfuerzo en adaptar el contenido y resolver las necesidades específicas de cada página.

Crear componentes reutilizables

No todos los diseños son buenos candidatos para formar parte de una biblioteca.

Un componente reutilizable debería cumplir, en la medida de lo posible, algunas características:

• Tener una estructura clara.
• Ser fácil de adaptar.
• Utilizar estilos coherentes.
• Funcionar correctamente en diferentes dispositivos.
• No depender excesivamente de contenido específico.

Por ejemplo, una tarjeta de servicio puede diseñarse para que el texto, la imagen y el enlace puedan sustituirse fácilmente.

Separar diseño y contenido

Para crear elementos realmente reutilizables es importante evitar que estén demasiado ligados a un contenido concreto.

Por ejemplo, una estructura como esta puede reutilizarse fácilmente:

Título
Descripción
Imagen
Botón

Mientras que un bloque diseñado exclusivamente para una información concreta puede tener menos posibilidades de reutilización.

Cuanto más flexible sea la estructura, más posibilidades tendrá de ser utilizada en diferentes contextos.

Ejemplo práctico: página de servicios

Supongamos que una empresa ofrece varios servicios y quieres crear una página específica para cada uno.

En lugar de diseñar cada página desde cero, puedes crear una estructura base:

Hero
  ↓
Introducción
  ↓
Características
  ↓
Beneficios
  ↓
Testimonios
  ↓
FAQ
  ↓
CTA

Guardas las diferentes secciones en la Biblioteca y posteriormente construyes cada página utilizando esas estructuras.

Después puedes adaptar:

• Títulos.
• Textos.
• Imágenes.
• Iconos.
• Enlaces.
• Información específica del servicio.

El resultado es una familia de páginas visualmente coherentes pero con contenido diferente.

Reutilización y productividad

La principal ventaja práctica de este sistema es el ahorro de tiempo.

Si una estructura que normalmente requiere veinte minutos para construir ya está preparada, puedes insertarla y dedicar ese tiempo a personalizarla.

Cuando este proceso se repite muchas veces, el ahorro acumulado puede ser considerable.

Por eso la reutilización no es solamente una función de comodidad, sino una estrategia para mejorar la productividad.

Errores habituales al reutilizar

Uno de los errores más comunes es reutilizar elementos sin comprobar que se adaptan correctamente al nuevo contexto.

Antes de publicar una página conviene revisar:

• Textos.
• Imágenes.
• Enlaces.
• Botones.
• Espaciados.
• Responsive.
• Contenido SEO.

También es importante evitar reutilizar estructuras que contienen información específica de otra página.

Reutilizar sin duplicar contenido incorrectamente

La reutilización de estructuras de diseño no significa que debas duplicar exactamente el mismo contenido en todas las páginas.

Si utilizas una sección como plantilla, debes adaptar su contenido a la intención de cada página.

Por ejemplo, una estructura de servicios puede mantenerse igual mientras cambian completamente los textos y elementos relacionados con cada servicio.

Esto permite conservar la estructura visual sin crear páginas prácticamente idénticas.

Buenas prácticas de reutilización

• Utiliza componentes realmente reutilizables.
• Adapta siempre el contenido al nuevo contexto.
• Comprueba el responsive después de reutilizar.
• Revisa enlaces y llamadas a la acción.
• Utiliza nombres claros en la Biblioteca.
• Combina estructuras reutilizables con presets.
• Mantén la Biblioteca actualizada.
• Elimina componentes obsoletos.

Reutilización en un flujo profesional

Un flujo de trabajo eficiente puede seguir esta estructura:

1. Crear componente
        ↓
2. Diseñarlo
        ↓
3. Revisarlo
        ↓
4. Guardarlo
        ↓
5. Añadirlo a la Biblioteca
        ↓
6. Reutilizarlo
        ↓
7. Adaptar contenido
        ↓
8. Revisar resultado

Este sistema permite transformar diseños individuales en una colección de componentes que pueden utilizarse de forma recurrente.

La Biblioteca como base de trabajo

Cuando una Biblioteca está correctamente organizada, puede convertirse en una auténtica base de trabajo para el desarrollo de sitios web.

En lugar de empezar cada página con un lienzo vacío, puedes comenzar seleccionando los componentes que necesitas.

Esto permite construir páginas mediante la combinación de piezas:

Hero
+
Servicios
+
Beneficios
+
Testimonios
+
FAQ
+
CTA

El resultado es un proceso más rápido y estructurado.

La reutilización de elementos en Divi 5 permite aprovechar el trabajo realizado anteriormente para crear nuevas páginas de una forma más rápida y consistente.

La clave está en construir una Biblioteca formada por componentes bien diseñados, fáciles de adaptar y correctamente organizados.

Cuando este sistema se combina con presets, layouts y un sistema de diseño coherente, Divi 5 deja de ser únicamente una herramienta para diseñar páginas y se convierte en un entorno de trabajo basado en componentes reutilizables.

Los layouts predefinidos de Divi 5 son diseños previamente preparados que permiten crear una página web o una parte de ella sin tener que construir toda la estructura desde cero. Incluyen diferentes combinaciones de secciones, filas, columnas y módulos que pueden utilizarse como punto de partida para un nuevo diseño.

Su principal objetivo es acelerar el proceso de creación de páginas, proporcionando estructuras que posteriormente puedes personalizar para adaptarlas al contenido, la identidad visual y las necesidades del proyecto.

¿Qué es un layout en Divi 5?

Un layout es una composición de elementos de Divi que define la estructura visual de una página o de una parte concreta de ella.

Puede contener diferentes elementos organizados jerárquicamente:

Layout
│
├── Sección
│   ├── Fila
│   │   ├── Columna
│   │   │   └── Módulo
│   │   └── Columna
│   │       └── Módulo
│   └── Fila
│       └── Módulo
│
└── Sección
    └── ...

Un layout predefinido simplemente parte de una estructura que ya ha sido diseñada y preparada para su utilización.

¿Para qué sirven los layouts predefinidos?

La principal función de un layout predefinido es evitar empezar una página desde cero.

En lugar de crear manualmente todas las secciones, puedes seleccionar una estructura existente y modificarla.

Esto permite:

• Ahorrar tiempo durante el diseño.
• Partir de una estructura profesional.
• Experimentar con diferentes composiciones.
• Crear rápidamente nuevas páginas.
• Utilizar diseños como fuente de inspiración.
• Adaptar estructuras existentes a un proyecto concreto.

El layout no tiene por qué utilizarse exactamente como viene preparado. En la mayoría de los proyectos lo interesante es utilizarlo como punto de partida.

Layouts completos y elementos individuales

No todos los layouts tienen la misma dimensión.

Algunos están pensados para representar una página completa, mientras que otros contienen únicamente una sección o un bloque específico.

Por ejemplo, puedes encontrar una estructura como:

Layout completo
├── Hero
├── Presentación
├── Servicios
├── Beneficios
├── Testimonios
├── FAQ
└── Contacto

Pero también puedes trabajar con una sección individual:

Sección de servicios
├── Título
├── Introducción
└── Tarjetas de servicios

Esta diferencia permite utilizar los layouts de forma flexible.

Layouts como punto de partida

Una de las mejores formas de utilizar los layouts predefinidos es considerarlos como una base de diseño.

Por ejemplo, puedes importar un layout que tenga una estructura que te guste y posteriormente cambiar:

• Colores.
• Tipografías.
• Imágenes.
• Textos.
• Iconos.
• Botones.
• Espaciados.
• Distribución de elementos.

De esta forma puedes aprovechar la estructura original sin limitarte a reproducir exactamente el diseño proporcionado.

Ventajas de utilizar layouts predefinidos

Ahorro de tiempo

La ventaja más evidente es la reducción del tiempo necesario para construir una página.

Crear una estructura completa manualmente puede requerir bastante trabajo. Con un layout previamente preparado, gran parte de ese proceso ya está realizado.

Inspiración para nuevos diseños

Los layouts también pueden utilizarse como fuente de inspiración.

Incluso si no quieres utilizar directamente el diseño, puedes analizar cómo está estructurada una página y utilizar algunas de sus ideas para desarrollar tu propia composición.

Estructuras profesionales

Un layout correctamente diseñado puede proporcionar una estructura visual equilibrada que después puedes adaptar a las necesidades concretas del proyecto.

Mayor productividad

Cuando utilizas layouts como parte habitual de tu flujo de trabajo, puedes dedicar menos tiempo a tareas repetitivas y más tiempo a la personalización y optimización de la web.

Personalizar un layout

Importar un layout no significa que debas mantenerlo sin modificaciones.

Lo habitual es personalizarlo para que encaje con el proyecto.

Por ejemplo, puedes partir de un layout genérico y transformarlo:

Layout predefinido
       ↓
Cambiar estructura
       ↓
Cambiar colores
       ↓
Cambiar tipografías
       ↓
Sustituir imágenes
       ↓
Adaptar contenidos
       ↓
Diseño final

El resultado puede ser completamente diferente del diseño original, aunque la estructura inicial haya servido como base.

Layouts y estructura de una página

Una de las principales utilidades de los layouts es que permiten comenzar con una estructura ya organizada.

Por ejemplo, una landing page puede necesitar:

1. Una sección principal o hero.
2. Una introducción.
3. Una presentación de servicios.
4. Una sección de beneficios.
5. Testimonios.
6. Preguntas frecuentes.
7. Una llamada a la acción.

Construir esta arquitectura desde cero requiere crear y organizar todos los elementos. Un layout adecuado puede proporcionar gran parte de esta estructura desde el principio.

Layouts y contenido

Es importante diferenciar entre estructura y contenido.

Un layout puede proporcionar la distribución visual de una página, pero el contenido debe adaptarse al proyecto.

Por ejemplo, una sección puede tener originalmente:

Título
Texto descriptivo
Botón
Imagen

La estructura puede mantenerse mientras sustituyes completamente el contenido por el correspondiente a tu empresa o servicio.

Esta separación permite reutilizar layouts en diferentes contextos.

Layouts y diseño responsive

Cuando utilizas un layout predefinido, no debes limitarte a comprobar cómo se ve en ordenador.

También es necesario revisar su comportamiento en diferentes dispositivos.

Conviene comprobar:

• Orden de las columnas.
• Tamaño de los textos.
• Espaciados.
• Tamaño de las imágenes.
• Botones.
• Alturas de las secciones.
• Legibilidad del contenido.

Un diseño que funciona correctamente en escritorio puede necesitar ajustes para tablet o móvil.

Layouts y biblioteca de Divi

Los layouts pueden formar parte de la Biblioteca de Divi, donde puedes conservar diseños para reutilizarlos posteriormente.

Esto permite combinar dos conceptos importantes:

Layouts predefinidos
       ↓
Base de diseño

Biblioteca
       ↓
Almacenamiento y reutilización

Presets
       ↓
Sistema de estilos

La combinación de estas herramientas permite crear un flujo de trabajo mucho más eficiente.

Utilizar layouts de forma estratégica

No es necesario utilizar un layout completo cada vez que construyes una página.

En muchas ocasiones puede ser más eficiente seleccionar únicamente las partes que necesitas.

Por ejemplo, puedes utilizar:

• El hero de un layout.
• La sección de servicios de otro.
• La estructura de testimonios de un tercero.
• Una llamada a la acción creada anteriormente.

Después puedes combinar todos estos elementos para crear una página personalizada.

Layouts como piezas de construcción

Una forma muy útil de entender los layouts es considerarlos como piezas de construcción.

En lugar de pensar que un layout es una página que debes utilizar completa, puedes verlo como una colección de estructuras que puedes modificar y combinar.

Layout A
   ↓
Hero

Layout B
   ↓
Servicios

Layout C
   ↓
Testimonios

Layout D
   ↓
CTA

        ↓

Página personalizada

Este enfoque permite aprovechar al máximo los recursos disponibles.

Layouts y velocidad de desarrollo

El uso de layouts puede reducir considerablemente el tiempo necesario para crear una página.

Esto resulta especialmente interesante cuando tienes que desarrollar páginas con estructuras similares.

Por ejemplo, si necesitas crear diez páginas de servicios, puedes diseñar una estructura base y utilizarla como punto de partida para todas ellas.

Después solo tendrás que adaptar el contenido y realizar los cambios necesarios.

Layouts en proyectos profesionales

En un entorno profesional, los layouts pueden convertirse en una herramienta de estandarización.

Una agencia puede disponer de diferentes estructuras preparadas para determinados tipos de páginas:

• Landing pages.
• Páginas de servicios.
• Páginas corporativas.
• Páginas de contacto.
• Portfolios.
• Blogs.
• Páginas de producto.

Esto permite comenzar cada proyecto desde una base conocida y reducir el tiempo dedicado a tareas repetitivas.

No confundir layout con diseño definitivo

Un error frecuente es considerar que importar un layout significa que la página ya está terminada.

En realidad, un layout es normalmente un punto de partida.

Después de importarlo es necesario adaptarlo al proyecto, revisar su estructura y comprobar que cumple los objetivos de la página.

Especialmente en proyectos profesionales, no conviene depender exclusivamente del diseño original.

Revisar antes de publicar

Después de personalizar un layout conviene realizar una revisión completa.

• Comprobar todos los textos.
• Revisar imágenes.
• Verificar enlaces.
• Comprobar formularios.
• Revisar el responsive.
• Optimizar imágenes.
• Comprobar la jerarquía de encabezados.
• Revisar el SEO de la página.
• Comprobar el rendimiento.

Un layout proporciona una estructura, pero la calidad final depende de cómo se adapte y optimice.

¿Cuándo utilizar un layout predefinido?

Los layouts resultan especialmente útiles cuando:

• Quieres acelerar el desarrollo de una página.
• No quieres empezar desde cero.
• Necesitas inspiración para estructurar el contenido.
• Quieres probar diferentes composiciones.
• Desarrollas páginas con estructuras similares.
• Estás creando una biblioteca propia de diseños.

En cambio, si necesitas una estructura completamente específica, puede ser más eficiente construirla directamente con los elementos de Divi.

Buenas prácticas

• Utiliza el layout como base: no tengas miedo de modificarlo.
• Adapta todo el contenido: sustituye textos e imágenes por información propia.
• Revisa el responsive: comprueba todos los dispositivos.
• Optimiza el diseño: elimina elementos que no aporten valor.
• Comprueba el SEO: revisa encabezados, contenido y estructura.
• Mantén la identidad visual: adapta colores y tipografías al proyecto.
• Trabaja sobre una copia: conserva el diseño original cuando pueda resultar útil posteriormente.

Los layouts predefinidos de Divi 5 son estructuras de diseño preparadas que permiten acelerar la creación de páginas y disponer rápidamente de una base sobre la que trabajar.

Su mayor utilidad no consiste necesariamente en utilizarlos tal y como vienen, sino en aprovechar sus estructuras para crear diseños personalizados de una forma más rápida.

Cuando se combinan con la Biblioteca de Divi 5, la reutilización de elementos y los presets, los layouts pueden convertirse en una herramienta fundamental para desarrollar sitios web de forma más eficiente, organizada y coherente.

Los layouts de Divi 5 no tienen por qué representar siempre una página completa. Dependiendo de las necesidades del proyecto, puedes trabajar con diseños completos, secciones independientes o estructuras específicas para landing pages.

Conocer las diferencias entre estos tipos de layouts permite elegir mejor qué importar, qué reutilizar y qué elementos conviene modificar antes de comenzar a trabajar sobre una página.

Principales tipos de layouts

Podemos dividir los layouts de Divi 5 en tres grandes grupos:

• Layouts completos: contienen la estructura de una página prácticamente terminada.
• Secciones sueltas: contienen únicamente una parte concreta del diseño.
• Layouts de landing pages: están pensados para páginas orientadas a una acción o conversión determinada.

Cada uno tiene una finalidad diferente y puede utilizarse como punto de partida según el tipo de página que quieras construir.

Layouts completos

Un layout completo contiene varias secciones organizadas para formar una página entera.

Por ejemplo, un layout corporativo puede incluir:

Layout completo
│
├── Hero
├── Presentación
├── Servicios
├── Beneficios
├── Equipo
├── Testimonios
├── FAQ
└── Contacto

Al importar este tipo de diseño, obtienes una estructura amplia sobre la que puedes trabajar directamente.

¿Cuándo utilizar un layout completo?

Los layouts completos son especialmente útiles cuando necesitas crear rápidamente una página con una estructura convencional.

Pueden resultar interesantes para:

• Páginas corporativas.
• Páginas de servicios.
• Páginas de empresa.
• Portfolios.
• Páginas de presentación.
• Webs informativas.

También pueden utilizarse como referencia para estudiar cómo está organizada una página y posteriormente modificarla completamente.

Ventajas de los layouts completos

La principal ventaja es que proporcionan una estructura global desde el principio.

En lugar de decidir individualmente qué secciones necesita la página, puedes partir de una composición ya organizada.

Entre sus ventajas destacan:

• Mayor rapidez de desarrollo.
• Estructura inicial ya organizada.
• Menos trabajo repetitivo.
• Mayor facilidad para realizar pruebas de diseño.
• Posibilidad de personalizar posteriormente cada sección.

Sin embargo, no significa que el layout deba mantenerse exactamente igual.

Secciones sueltas

Una sección suelta es un bloque independiente que puede incorporarse a una página sin necesidad de importar un diseño completo.

Por ejemplo:

Sección
├── Título
├── Texto
├── Imagen
└── Botón

Este tipo de layout resulta especialmente útil cuando ya tienes una página estructurada y únicamente necesitas añadir un determinado bloque.

Ejemplos de secciones reutilizables

Una biblioteca de secciones puede incluir elementos como:

• Hero.
• Bloques de servicios.
• Secciones de características.
• Testimonios.
• Preguntas frecuentes.
• Llamadas a la acción.
• Formularios de contacto.
• Bloques de precios.
• Galerías.

En lugar de importar una página completa, puedes seleccionar únicamente la estructura que necesitas.

Ventajas de las secciones sueltas

La principal ventaja es la flexibilidad.

Si ya tienes una página diseñada y quieres incorporar una sección concreta, no necesitas sustituir toda la estructura.

Por ejemplo, puedes mantener:

Hero propio
     ↓
Servicios propios
     ↓
Sección importada
     ↓
Testimonios propios
     ↓
Footer

Esto permite combinar elementos propios con diseños previamente preparados.

Layouts de landing pages

Los layouts de landing pages están diseñados específicamente para páginas cuyo objetivo principal suele ser conseguir una acción concreta del usuario.

Esta acción puede ser:

• Solicitar información.
• Comprar un producto.
• Contratar un servicio.
• Reservar una cita.
• Solicitar un presupuesto.
• Descargar un recurso.
• Registrarse.

Por este motivo, una landing page suele tener una estructura diferente a una página corporativa convencional.

Estructura habitual de una landing page

Una landing page puede seguir una estructura como esta:

Hero
  ↓
Propuesta de valor
  ↓
Beneficios
  ↓
Características
  ↓
Prueba social
  ↓
Preguntas frecuentes
  ↓
Llamada a la acción
  ↓
Formulario / conversión

El objetivo es conducir progresivamente al usuario hacia la acción que queremos conseguir.

Landing pages y conversión

La diferencia fundamental respecto a otros layouts está en que una landing page no se centra únicamente en presentar información.

Su estructura debe estar orientada a facilitar una conversión.

Por ejemplo, una landing page para solicitar un presupuesto puede destacar:

• El problema que resuelve el servicio.
• Los beneficios para el cliente.
• Elementos que generan confianza.
• Opiniones de clientes.
• Preguntas frecuentes.
• Un formulario de contacto.

La estructura visual debe facilitar que el usuario comprenda la propuesta y sepa qué hacer a continuación.

Comparación entre los tres tipos

Combinar diferentes tipos de layouts

No es necesario elegir un único tipo de layout para todo el proyecto.

De hecho, una estrategia muy eficaz consiste en combinar diferentes tipos.

Por ejemplo:

Layout completo
       ↓
Estructura inicial

       +

Secciones sueltas
       ↓
Bloques específicos

       +

Presets
       ↓
Identidad visual

       =

Página final personalizada

Este sistema permite aprovechar las ventajas de cada recurso.

Utilizar un layout completo como base

Una forma habitual de trabajar consiste en importar primero un layout completo y después eliminar o sustituir las secciones que no sean necesarias.

Por ejemplo, un layout puede contener ocho secciones, pero tu página solo necesita cinco.

Puedes conservar las estructuras que encajan con el proyecto y eliminar el resto.

El proceso sería:

1. Importar el layout.
2. Revisar su estructura.
3. Eliminar las secciones innecesarias.
4. Modificar las secciones restantes.
5. Añadir elementos propios.
6. Revisar el responsive.

Utilizar secciones independientes

Las secciones independientes son especialmente útiles cuando ya existe una arquitectura definida.

Por ejemplo, si tienes una página de servicios perfectamente estructurada pero necesitas añadir una sección de testimonios, puedes incorporar únicamente ese bloque.

Esto evita modificar innecesariamente el resto de la página.

Crear una biblioteca de secciones

Con el tiempo, una buena práctica es crear una biblioteca propia de secciones.

Esta biblioteca puede organizarse por categorías:

Biblioteca
│
├── Heroes
├── Servicios
├── Beneficios
├── Testimonios
├── FAQ
├── Formularios
├── CTA
└── Contacto

De esta forma, cuando necesites construir una nueva página, puedes seleccionar rápidamente los bloques que necesitas.

Crear una biblioteca de layouts completos

También puedes conservar páginas completas que hayas diseñado y que puedan servir como base para futuros proyectos.

Por ejemplo:

• Layout corporativo.
• Layout para servicios profesionales.
• Layout para restaurante.
• Layout para ecommerce.
• Layout para landing de captación.
• Layout para portfolio.

Con el tiempo, esta colección puede convertirse en una herramienta de productividad muy importante.

Layouts y reutilización

Los layouts están directamente relacionados con la reutilización de elementos.

Una sección diseñada una vez puede utilizarse posteriormente en diferentes páginas.

Esto permite pasar de un sistema en el que cada página se crea desde cero a otro basado en componentes:

Diseño inicial
      ↓
Guardar
      ↓
Biblioteca
      ↓
Reutilización
      ↓
Adaptación
      ↓
Nueva página

El objetivo no es copiar páginas indiscriminadamente, sino aprovechar estructuras que ya han demostrado ser útiles.

Layouts y identidad visual

Un layout predefinido puede tener colores, tipografías y estilos diferentes a los utilizados en tu proyecto.

Por eso, después de importarlo es importante adaptarlo a la identidad visual de la web.

Los presets de Divi 5 pueden facilitar este proceso al permitir aplicar estilos coherentes a los elementos del diseño.

Por ejemplo:

Layout importado
      ↓
Aplicar identidad visual
      ↓
Colores corporativos
      ↓
Tipografías
      ↓
Estilos de botones
      ↓
Diseño final

Layouts completos frente a secciones sueltas

La elección depende principalmente del punto en el que se encuentre el proyecto.

Si estás empezando una página desde cero, un layout completo puede ahorrarte mucho trabajo.

Si la página ya está construida y únicamente necesitas incorporar un bloque, una sección independiente suele ser una opción más adecuada.

¿Qué tipo de layout utilizar?

Como regla general:

• Utiliza layouts completos cuando necesites una estructura global.
• Utiliza secciones sueltas cuando necesites incorporar bloques concretos.
• Utiliza layouts de landing pages cuando el objetivo principal sea conseguir una conversión.

En muchos proyectos la mejor solución será combinar los tres.

Buenas prácticas

• Utiliza los layouts como punto de partida.
• No mantengas elementos que no sean necesarios.
• Adapta siempre colores, tipografías y contenido.
• Revisa el responsive después de importar.
• Comprueba todos los enlaces y botones.
• Conserva las estructuras que puedan ser útiles en futuros proyectos.
• Organiza la biblioteca mediante nombres claros.
• Combina layouts con presets para mantener una identidad visual coherente.

Divi 5 permite trabajar con diferentes tipos de layouts según las necesidades de cada proyecto. Los layouts completos proporcionan una estructura global, las secciones sueltas permiten incorporar bloques específicos y los layouts de landing pages están orientados a conseguir objetivos concretos de conversión.

La clave está en no considerar estos diseños como estructuras cerradas. Utilizándolos como piezas reutilizables y personalizables, puedes acelerar considerablemente el desarrollo y construir páginas adaptadas a cada proyecto.

Además, cuando se combinan con la Biblioteca de Divi 5 y los presets, los layouts permiten crear un sistema de trabajo más rápido, organizado y coherente.

La Biblioteca de Divi 5 permite acceder a layouts y elementos previamente preparados para utilizarlos en una página. Importar un layout correctamente es uno de los procesos básicos que conviene dominar cuando se trabaja con Divi 5, especialmente si quieres aprovechar diseños existentes para acelerar el desarrollo de un proyecto.

El proceso consiste, en términos generales, en seleccionar el diseño que quieres utilizar, incorporarlo a la página y posteriormente adaptarlo a las necesidades concretas del proyecto.

¿Qué significa importar un layout?

Importar un layout significa incorporar a una página una estructura de diseño que ya ha sido creada.

En lugar de construir manualmente cada sección, puedes cargar un diseño previamente preparado y comenzar a trabajar sobre él.

El proceso puede representarse así:

Biblioteca
    ↓
Seleccionar layout
    ↓
Importar
    ↓
Añadir a la página
    ↓
Personalizar
    ↓
Publicar

El layout importado puede contener una página completa, varias secciones o determinados elementos de diseño.

¿Dónde se encuentran los layouts?

Los diseños disponibles pueden proceder de diferentes fuentes.

Por un lado, puedes utilizar layouts proporcionados dentro del propio ecosistema de Divi. Por otro, puedes trabajar con diseños que hayas creado tú mismo y guardado en la Biblioteca.

También es posible disponer de layouts obtenidos de otros proyectos o recursos compatibles con Divi, siempre que el formato y el método de importación sean adecuados.

Importar un layout desde Divi

Cuando estás trabajando en una página con Divi 5, el primer paso consiste en acceder al sistema de diseño correspondiente y localizar la opción que permite utilizar un layout existente.

Dependiendo de la interfaz y del contexto en el que estés trabajando, las opciones disponibles pueden variar, pero el concepto es siempre el mismo: seleccionar una estructura existente y añadirla al diseño actual.

Una vez seleccionado el layout, Divi incorpora sus diferentes elementos a la página.

Seleccionar el layout adecuado

Antes de importar cualquier diseño conviene analizar qué es exactamente lo que necesitas.

Por ejemplo, si estás creando una página desde cero, puede interesarte un layout completo:

Hero
↓
Servicios
↓
Beneficios
↓
Testimonios
↓
FAQ
↓
CTA

Si la página ya está diseñada y únicamente necesitas una sección de testimonios, probablemente sea más conveniente importar una sección independiente.

Elegir correctamente el nivel de importación evita tener que eliminar posteriormente una gran cantidad de elementos innecesarios.

Importar un layout completo

Los layouts completos son especialmente útiles cuando quieres crear rápidamente la estructura inicial de una página.

Un procedimiento habitual sería:

1. Abrir la página en la que quieres trabajar.
2. Acceder al sistema de layouts de Divi.
3. Localizar el diseño que quieres utilizar.
4. Seleccionar el layout.
5. Insertarlo en la página.
6. Revisar las secciones incorporadas.
7. Comenzar la personalización.

Una vez importado, puedes modificar libremente la estructura según las necesidades del proyecto.

Importar una sección concreta

No siempre es necesario importar una página completa.

Si necesitas únicamente un bloque, puedes seleccionar una sección independiente y añadirla al diseño existente.

Por ejemplo:

Página existente
│
├── Hero
├── Servicios
├── Sección propia
├── Contacto
└── Footer

        +

Sección importada
        ↓
Testimonios

        ↓

Página actualizada

Este método resulta especialmente útil para ampliar páginas sin modificar innecesariamente su estructura.

Revisar la estructura después de importar

Una vez incorporado el layout, no conviene empezar inmediatamente a cambiar textos y colores.

Es recomendable revisar primero cómo está construida la estructura.

Comprueba:

• Cuántas secciones contiene.
• Qué filas utiliza.
• Cómo están distribuidas las columnas.
• Qué módulos incluye.
• Qué elementos pueden eliminarse.
• Qué partes deben conservarse.

Esta revisión permite comprender el diseño antes de modificarlo.

Adaptar el contenido

Después de importar un layout, uno de los primeros pasos debe ser sustituir el contenido de demostración por el contenido real del proyecto.

Esto incluye:

• Títulos.
• Textos.
• Imágenes.
• Iconos.
• Botones.
• Enlaces.
• Datos de contacto.

No conviene publicar una página manteniendo textos o imágenes que pertenecen al layout original.

Adaptar los colores

Los layouts pueden utilizar una identidad visual diferente a la del sitio web en el que se están incorporando.

Por ello, después de importar el diseño conviene adaptar los colores principales.

Por ejemplo:

Layout original
├── Color principal
├── Color secundario
├── Fondo
└── Color de botones

        ↓

Identidad del proyecto
├── Color corporativo
├── Color complementario
├── Fondos
└── Estilo de CTA

Si el proyecto utiliza presets, estos pueden ayudar a mantener una identidad visual coherente.

Adaptar la tipografía

La tipografía es otro de los elementos que conviene revisar después de importar un layout.

Comprueba especialmente:

• Fuente utilizada en títulos.
• Fuente utilizada en textos.
• Tamaños.
• Pesos.
• Altura de línea.
• Espaciado entre letras.

Una estructura puede ser adecuada visualmente pero necesitar cambios tipográficos para adaptarse al resto del sitio.

Revisar el responsive

Una vez importado y personalizado el layout, debes comprobar su comportamiento en diferentes tamaños de pantalla.

Es importante revisar especialmente:

• Orden de las columnas.
• Tamaño de los encabezados.
• Ancho de los botones.
• Espaciados verticales.
• Imágenes.
• Elementos que puedan desbordarse.

La importación de un layout no elimina la necesidad de realizar ajustes responsive.

Importar y personalizar por fases

Una forma eficiente de trabajar consiste en realizar la adaptación en diferentes fases.

1. Importar
      ↓
2. Revisar estructura
      ↓
3. Eliminar elementos innecesarios
      ↓
4. Sustituir contenido
      ↓
5. Adaptar identidad visual
      ↓
6. Revisar responsive
      ↓
7. Optimizar
      ↓
8. Publicar

Este orden evita realizar modificaciones innecesarias y facilita detectar posibles problemas.

Importar layouts como base de una nueva página

Cuando empiezas una página desde cero, un layout completo puede servir como estructura inicial.

Por ejemplo, para una página de servicio puedes utilizar un diseño que ya contenga:

• Hero.
• Presentación del servicio.
• Características.
• Beneficios.
• Preguntas frecuentes.
• CTA.

Después puedes adaptar cada sección al contenido específico de la página.

Importar layouts en páginas existentes

Cuando trabajas sobre una página que ya contiene contenido, es preferible evitar importar automáticamente un layout completo si solo necesitas una parte.

En estos casos puede ser más eficiente incorporar únicamente las secciones necesarias.

Por ejemplo:

Página actual
├── Hero
├── Introducción
└── Servicios

Necesidad:
Añadir testimonios

Solución:
Importar únicamente
la sección de testimonios

De esta manera mantienes el trabajo realizado y añades únicamente lo que falta.

Guardar el resultado como nuevo layout

Después de importar un layout y personalizarlo considerablemente, puede resultar interesante guardar la nueva versión en la Biblioteca.

Esto permite conservar el trabajo realizado y utilizarlo posteriormente como base para otros proyectos.

Por ejemplo:

Layout original
      ↓
Personalización
      ↓
Versión propia
      ↓
Guardar en Biblioteca
      ↓
Reutilizar en futuros proyectos

Con el tiempo puedes construir una biblioteca propia adaptada a tu forma de trabajar.

Importar layouts y presets

Los layouts y los presets cumplen funciones diferentes, pero pueden utilizarse conjuntamente.

El layout proporciona principalmente la estructura, mientras que los presets permiten establecer y reutilizar estilos.

Layout
  ↓
Estructura

Presets
  ↓
Estilos

Contenido
  ↓
Información

Resultado
  ↓
Página personalizada

Esta combinación permite adaptar rápidamente un diseño sin tener que modificar manualmente todos los elementos uno por uno.

Comprobar enlaces y elementos interactivos

Después de importar un layout es especialmente importante comprobar los elementos interactivos.

Revisa:

• Botones.
• Enlaces.
• Formularios.
• Menús.
• Elementos desplegables.
• Vídeos.

Algunos layouts pueden incluir enlaces o contenidos de demostración que no tienen ninguna relación con tu proyecto.

Revisar imágenes

Las imágenes de un layout también deben sustituirse o revisarse.

Además de utilizar imágenes adecuadas para el proyecto, conviene comprobar su tamaño y optimización.

Una imagen demasiado grande puede afectar al rendimiento de la página aunque el diseño del layout sea correcto.

Errores habituales al importar layouts

Uno de los errores más frecuentes es importar un diseño y publicarlo prácticamente sin modificarlo.

Otros errores habituales son:

• Mantener contenido de demostración.
• No revisar los enlaces.
• No sustituir imágenes.
• No adaptar los colores.
• No revisar la versión móvil.
• Mantener secciones que no aportan valor.
• No comprobar el SEO.

El layout debe considerarse una herramienta de desarrollo, no un sustituto del trabajo de diseño y optimización.

Buenas prácticas al importar layouts

• Selecciona el layout adecuado: utiliza una página completa o una sección según lo que realmente necesites.
• Revisa la estructura: entiende cómo está construido antes de modificarlo.
• Personaliza el contenido: adapta textos, imágenes y enlaces.
• Adapta la identidad visual: utiliza los estilos propios del proyecto.
• Comprueba el responsive: revisa escritorio, tablet y móvil.
• Optimiza las imágenes: evita cargar archivos innecesariamente grandes.
• Guarda las versiones útiles: conserva en la Biblioteca aquellos diseños que puedan reutilizarse.
• Trabaja de forma ordenada: evita acumular layouts que ya no tengan utilidad.

Flujo recomendado

Para trabajar de forma profesional con layouts en Divi 5, puedes seguir este proceso:

Elegir layout
      ↓
Importarlo
      ↓
Analizar estructura
      ↓
Eliminar lo innecesario
      ↓
Adaptar contenido
      ↓
Aplicar identidad visual
      ↓
Revisar responsive
      ↓
Optimizar
      ↓
Guardar si resulta reutilizable

Importar layouts desde la Biblioteca de Divi 5 permite acelerar considerablemente la creación de páginas y aprovechar estructuras que ya han sido diseñadas previamente.

La clave está en utilizar estos layouts como una base de trabajo, no como un diseño definitivo. Después de importarlos es necesario adaptar el contenido, la identidad visual, la estructura y el comportamiento responsive.

Además, las estructuras que hayas personalizado y que puedan resultar útiles en futuros proyectos pueden guardarse nuevamente en la Biblioteca, creando progresivamente un sistema propio de componentes y layouts reutilizables.

Cuando utilizas layouts predefinidos en Divi 5, una de las mejores prácticas consiste en evitar modificar directamente el diseño original cuando este puede resultar útil posteriormente. Trabajar sobre una copia permite experimentar, personalizar y adaptar el layout sin perder la versión inicial.

Esta forma de trabajar es especialmente importante cuando utilizas layouts que has creado tú mismo, diseños de la Biblioteca o estructuras que quieres reutilizar en diferentes páginas.

¿Por qué trabajar sobre una copia?

Un layout puede representar muchas horas de trabajo. Si modificas directamente la única versión disponible y posteriormente necesitas recuperar el diseño original, es posible que tengas que reconstruirlo manualmente.

Trabajar sobre una copia permite mantener dos versiones independientes:

Layout original
      │
      ├───────────────┐
      ↓               ↓
Versión original   Copia de trabajo
                      ↓
                 Personalización
                      ↓
                 Página final

De esta forma, el diseño original permanece disponible para futuros usos.

El layout original como plantilla

Una buena forma de entender esta práctica es considerar el layout original como una plantilla maestra.

Esta plantilla no debería modificarse cada vez que necesitas crear una nueva página.

En su lugar:

1. Conservas el layout original.
2. Creas una copia.
3. Trabajas sobre la copia.
4. Adaptas el contenido.
5. Personalizas el diseño.
6. Publicas la nueva página.

Esto permite reutilizar posteriormente el mismo diseño para otros proyectos.

Ejemplo práctico

Imagina que tienes guardado en tu Biblioteca un layout denominado:

Landing - Servicio profesional

Necesitas utilizarlo para crear una página concreta.

En lugar de modificar el diseño original, puedes utilizarlo como base:

Landing - Servicio profesional
              ↓
             Copia
              ↓
Landing - Servicio A
              ↓
Personalización
              ↓
Página final

El layout original continúa disponible para crear posteriormente:

Landing - Servicio B
Landing - Servicio C
Landing - Servicio D

Esto convierte la Biblioteca en una colección de plantillas reutilizables.

Copia frente a modificación directa

En proyectos profesionales, conservar una versión maestra suele ser la opción más segura.

Cuándo es especialmente importante trabajar sobre una copia

No todos los diseños requieren exactamente el mismo nivel de precaución, pero esta práctica resulta especialmente recomendable cuando:

• El layout se utilizará en futuras páginas.
• Has invertido mucho tiempo en su diseño.
• Forma parte de una biblioteca de la agencia.
• Se trata de una plantilla base.
• Quieres experimentar con cambios importantes.
• El diseño se utilizará en varios proyectos.

Crear una biblioteca de plantillas maestras

Si trabajas habitualmente con Divi 5, puedes organizar una colección de layouts que actúen como plantillas maestras.

Por ejemplo:

Biblioteca
│
├── Plantillas maestras
│   ├── Corporativa
│   ├── Servicios
│   ├── Landing
│   ├── Portfolio
│   └── Contacto
│
└── Proyectos
    ├── Cliente A
    ├── Cliente B
    └── Cliente C

Las plantillas maestras se mantienen sin modificar, mientras que los proyectos utilizan copias adaptadas.

Nombrar correctamente las copias

Una biblioteca organizada requiere nombres claros.

En lugar de utilizar nombres genéricos como:

Layout 1
Layout 2
Copia
Copia 2
Nuevo layout

es preferible utilizar nombres descriptivos.

Por ejemplo:

MASTER - Landing Servicios
MASTER - Página Corporativa
MASTER - Página de Contacto

CLIENTE A - Landing Servicios
CLIENTE B - Landing Servicios

De esta manera puedes identificar rápidamente qué elementos son plantillas originales y cuáles son versiones adaptadas.

Utilizar prefijos para identificar plantillas

Los prefijos pueden ser especialmente útiles cuando tienes una Biblioteca grande.

Por ejemplo:

• MASTER - para diseños originales.
• SECCIÓN - para bloques independientes.
• LANDING - para páginas orientadas a conversión.
• CLIENTE - para diseños específicos de proyectos.

Esto facilita la clasificación y búsqueda de los elementos.

Evitar modificar accidentalmente la plantilla

Uno de los principales riesgos de trabajar con una biblioteca de diseños es modificar accidentalmente el elemento original cuando en realidad querías trabajar sobre una versión independiente.

Antes de realizar cambios importantes, comprueba siempre qué elemento estás editando.

Especialmente si se trata de un layout que utilizas como plantilla para otros proyectos.

Conservar una versión limpia

Una plantilla maestra debería mantenerse lo más limpia posible.

Por ejemplo, un layout base puede contener:

• Estructura correctamente organizada.
• Estilos coherentes.
• Espaciados definidos.
• Responsive revisado.
• Contenido genérico.
• Elementos fácilmente sustituibles.

La idea es que pueda utilizarse posteriormente sin arrastrar información específica de un proyecto anterior.

Evitar contenido específico en plantillas maestras

Si un layout va a utilizarse como plantilla, conviene evitar que contenga información exclusiva de un cliente o proyecto.

Por ejemplo, en lugar de:

Servicio de reparación de tejados en Madrid

puede ser más útil utilizar:

Título del servicio

De esta forma, la estructura puede reutilizarse posteriormente y el contenido se sustituye en cada proyecto.

Copias y modificaciones importantes

Si vas a realizar cambios estructurales importantes, trabajar sobre una copia resulta todavía más recomendable.

Por ejemplo, si quieres:

• Eliminar varias secciones.
• Cambiar la estructura de columnas.
• Sustituir módulos.
• Modificar completamente la navegación.
• Rediseñar el hero.

Es mejor conservar el original y experimentar con una versión independiente.

Crear versiones de un mismo layout

Una misma plantilla puede evolucionar en diferentes direcciones.

Por ejemplo:

MASTER - Landing Servicios
          │
          ├── Versión corta
          ├── Versión larga
          ├── Versión captación
          └── Versión producto

Esto permite crear diferentes variantes sin perder la estructura inicial.

Copias y pruebas de diseño

Trabajar sobre una copia también facilita la experimentación.

Puedes probar diferentes alternativas:

Versión A
  ↓
Diseño actual

Versión B
  ↓
Nuevo hero

Versión C
  ↓
Nueva estructura

Versión D
  ↓
Nueva llamada a la acción

Después puedes comparar los resultados y decidir qué versión funciona mejor.

Revisar antes de sustituir la plantilla

Si finalmente decides que una versión modificada debe convertirse en la nueva plantilla base, no es recomendable sobrescribir inmediatamente el original.

Primero conviene comprobar:

• Diseño.
• Responsive.
• Compatibilidad.
• Contenido.
• Enlaces.
• Rendimiento.
• Reutilización.

Una vez verificado todo, puedes decidir si esa nueva versión debe convertirse en la plantilla maestra.

Copias y trabajo en equipo

Esta metodología también es útil cuando varias personas trabajan sobre un mismo proyecto.

Si existe una plantilla maestra claramente identificada, los miembros del equipo pueden utilizarla como referencia sin modificarla accidentalmente.

Esto ayuda a mantener un sistema de trabajo más controlado.

La importancia de documentar las plantillas

En una Biblioteca grande puede ser útil documentar brevemente para qué sirve cada layout.

Por ejemplo:

MASTER - Landing Servicios

Uso:
Página de servicio profesional

Incluye:
Hero + beneficios + testimonios + FAQ + CTA

Responsive:
Revisado

Última revisión:
Agosto 2026

No es necesario realizar una documentación compleja. Lo importante es que puedas identificar rápidamente la finalidad del recurso.

Trabajar sobre copias y presets

Los presets añaden otra capa de seguridad y organización al sistema.

El layout puede utilizarse como estructura base mientras los presets controlan determinados estilos.

Plantilla maestra
       ↓
Copia
       ↓
Contenido específico
       ↓
Presets
       ↓
Identidad visual
       ↓
Página final

Esto facilita modificar la apariencia sin tener que alterar la estructura original.

Una metodología profesional

Un flujo de trabajo recomendable puede ser:

1. Crear o seleccionar una plantilla maestra.
2. Guardar la plantilla en la Biblioteca.
3. Identificarla claramente.
4. Crear una copia para el nuevo proyecto.
5. Adaptar la estructura.
6. Sustituir el contenido.
7. Aplicar los estilos correspondientes.
8. Revisar responsive y rendimiento.
9. Publicar la versión final.
10. Mantener intacta la plantilla maestra.

Errores habituales

Al trabajar con layouts, algunos errores pueden evitarse fácilmente siguiendo esta metodología.

• Modificar directamente la plantilla maestra.
• No diferenciar originales y copias.
• Guardar demasiadas versiones sin organización.
• Utilizar contenido específico en plantillas generales.
• No revisar el responsive después de modificar.
• Eliminar accidentalmente una plantilla útil.

Buenas prácticas

• Conserva siempre una versión maestra de los layouts importantes.
• Utiliza copias para cada nuevo proyecto o variante.
• Utiliza nombres descriptivos.
• Separa plantillas generales de diseños específicos.
• Evita introducir contenido exclusivo de clientes en plantillas maestras.
• Revisa las copias antes de convertirlas en nuevas plantillas.
• Mantén organizada la Biblioteca.
• Combina layouts reutilizables con presets.

Trabajar sobre una copia es una de las prácticas más sencillas y útiles cuando utilizas layouts en Divi 5. Permite conservar intactas las plantillas originales y, al mismo tiempo, experimentar y adaptar los diseños a cada proyecto.

La idea fundamental es sencilla: la plantilla maestra se conserva y las modificaciones se realizan sobre copias. Este sistema reduce el riesgo de perder diseños, facilita la reutilización y permite crear una biblioteca organizada de recursos.

Cuando esta metodología se combina con la Biblioteca de Divi 5, los layouts reutilizables y los presets, puedes construir un flujo de trabajo mucho más rápido, seguro y escalable.

Los layouts predefinidos de Divi 5 permiten acelerar la creación de páginas utilizando estructuras que ya están diseñadas. Sin embargo, estos diseños no siempre utilizan los colores, tipografías y estilos de cada proyecto. Para solucionar este problema, los presets permiten aplicar una identidad visual coherente sobre los elementos reutilizados.

Combinar layouts y presets permite separar dos conceptos fundamentales del diseño web: la estructura de la página y su identidad visual.

Layouts y presets cumplen funciones diferentes

Un layout define principalmente cómo está organizada una página.

Por ejemplo:

Hero
↓
Beneficios
↓
Servicios
↓
Testimonios
↓
Preguntas frecuentes
↓
CTA

Los presets, en cambio, permiten establecer estilos reutilizables para diferentes elementos.

Preset de texto
↓
Tipografía + tamaño + color

Preset de encabezado
↓
Fuente + tamaño + peso

Preset de botón
↓
Color + borde + tipografía

De esta forma, un layout puede proporcionar la estructura y los presets adaptar su apariencia al proyecto.

¿Por qué combinar layouts y presets?

Cuando importas un layout predefinido, es habitual que este tenga una identidad visual propia. Si quieres utilizarlo en un sitio web que ya tiene una imagen corporativa definida, tendrás que adaptar sus estilos.

Sin un sistema organizado, podrías tener que modificar manualmente numerosos módulos.

Los presets permiten reducir este trabajo y mantener una mayor coherencia entre las diferentes páginas.

Separar estructura e identidad visual

Una de las principales ventajas de este sistema es que permite separar la estructura del diseño.

LAYOUT
│
├── Secciones
├── Filas
├── Columnas
└── Módulos

        +

PRESETS
│
├── Tipografía
├── Colores
├── Botones
├── Espaciados
└── Estilos

        ↓

PÁGINA FINAL

El layout determina dónde están los elementos y los presets ayudan a determinar cómo deben verse.

Ejemplo práctico

Imagina que importas un layout diseñado originalmente con colores azules y una determinada tipografía.

Tu proyecto utiliza una identidad corporativa diferente:

• Color principal propio.
• Color secundario propio.
• Tipografía corporativa.
• Estilo específico de botones.
• Diseño particular de encabezados.

En lugar de reconstruir el layout desde cero, puedes utilizarlo como estructura y adaptar los elementos mediante tus presets.

Crear primero la identidad visual

Para obtener mejores resultados, es recomendable definir el sistema visual antes de importar y personalizar numerosos layouts.

Como mínimo, deberías tener definidos:

• Colores principales.
• Colores secundarios.
• Tipografías.
• Estilos de encabezados.
• Estilo de texto.
• Botones.
• Elementos recurrentes.

Una vez definidos estos elementos, puedes utilizarlos de forma consistente en las páginas creadas a partir de layouts.

Presets para textos

Los textos son uno de los elementos que más se repiten en una página.

Un preset puede establecer características como:

• Familia tipográfica.
• Tamaño.
• Peso.
• Color.
• Altura de línea.
• Espaciado entre letras.

De esta forma, los textos de diferentes páginas pueden mantener una apariencia coherente aunque procedan de layouts distintos.

Presets para encabezados

Los encabezados también deben formar parte del sistema visual.

Por ejemplo:

H1
↓
Título principal

H2
↓
Título de sección

H3
↓
Subapartado

Definir estos estilos mediante presets ayuda a evitar que cada layout utilice tamaños y tipografías completamente diferentes.

Presets para botones

Los botones son especialmente importantes porque suelen aparecer en diferentes zonas del sitio.

Un preset puede establecer:

• Color de fondo.
• Color del texto.
• Tipografía.
• Tamaño.
• Espaciado interno.
• Bordes.
• Radio de las esquinas.
• Estados interactivos.

Así, un botón procedente de un layout puede adaptarse al lenguaje visual del sitio.

Presets para elementos repetidos

Además de textos y botones, los presets pueden utilizarse para elementos que aparecen repetidamente dentro del proyecto.

Por ejemplo:

• Tarjetas de servicios.
• Bloques de testimonios.
• Formularios.
• Elementos destacados.
• Bloques de llamadas a la acción.

Esto permite que diferentes layouts compartan determinados patrones visuales.

Aplicar una identidad visual sobre diferentes layouts

Una de las ventajas más interesantes de este sistema aparece cuando utilizas varios layouts.

Layout A ──┐
Layout B ──┤
Layout C ──┼── Presets corporativos ──→ Identidad coherente
Layout D ──┤
Layout E ──┘

Aunque las estructuras sean diferentes, los elementos principales pueden compartir los mismos estilos.

Evitar que cada layout tenga un estilo diferente

Un problema habitual al utilizar diseños predefinidos es terminar con una web visualmente inconsistente.

Por ejemplo, una página puede utilizar:

• Una fuente para los títulos.
• Otra fuente para los botones.
• Un color azul diferente.
• Un radio de borde distinto.

Otra página puede utilizar valores completamente diferentes.

El resultado puede parecer una colección de páginas independientes en lugar de un único sitio web.

Los presets como capa de normalización

Los presets pueden actuar como una capa que ayuda a normalizar el diseño.

Layouts diferentes
       ↓
Estructuras diferentes
       ↓
Presets comunes
       ↓
Estilo visual coherente

Esto es especialmente útil cuando utilizas diseños procedentes de diferentes fuentes.

Adaptar un layout sin reconstruirlo

Una de las principales ventajas es que puedes conservar una estructura que funciona sin tener que diseñarla nuevamente.

Por ejemplo, si un layout tiene una buena sección de servicios, puedes conservar:

• La distribución.
• La jerarquía.
• La estructura de columnas.
• La posición de los elementos.

Y adaptar:

• Colores.
• Tipografía.
• Botones.
• Estilos visuales.

Esto reduce considerablemente el tiempo necesario para adaptar diseños.

Layouts como estructura y presets como sistema

Una forma sencilla de entender la metodología es:

LAYOUT
"¿Dónde está cada cosa?"

PRESET
"¿Cómo debe verse?"

CONTENIDO
"¿Qué información muestra?"

La combinación de estos tres elementos permite crear páginas rápidamente sin renunciar a la personalización.

Presets y plantillas maestras

Los presets también pueden combinarse con las plantillas maestras mencionadas anteriormente.

Un flujo profesional puede ser:

Plantilla maestra
      ↓
Crear copia
      ↓
Importar/adaptar layout
      ↓
Aplicar presets
      ↓
Introducir contenido
      ↓
Revisar responsive
      ↓
Página final

La plantilla proporciona una base y los presets ayudan a mantener el sistema visual.

Presets y páginas de diferentes servicios

Este sistema es especialmente útil en sitios web con muchas páginas de servicios.

Por ejemplo:

/servicio-a
/servicio-b
/servicio-c
/servicio-d
/servicio-e

Todas las páginas pueden tener estructuras ligeramente diferentes pero compartir:

• Tipografía.
• Colores.
• Botones.
• Encabezados.
• Tarjetas.
• Elementos de conversión.

Esto proporciona una experiencia visual mucho más consistente.

Presets y layouts para agencias

En una agencia o negocio que crea muchas webs, la combinación de layouts y presets puede convertirse en un sistema de producción.

Por ejemplo:

Biblioteca de layouts
        +
Biblioteca de presets
        ↓
Sistema de diseño
        ↓
Nuevo proyecto
        ↓
Personalización
        ↓
Entrega

En lugar de comenzar cada proyecto desde cero, puedes partir de estructuras y estilos previamente preparados.

No todo debe convertirse en un preset

Aunque los presets son muy útiles, no es necesario convertir absolutamente todos los estilos en elementos globales o reutilizables.

Algunos elementos pueden necesitar un tratamiento específico para una determinada sección.

La clave está en distinguir entre:

• Estilos recurrentes: buenos candidatos para presets.
• Estilos específicos: pueden mantenerse locales.

Esto evita crear un sistema excesivamente complejo.

Cuándo utilizar estilos locales

Un estilo local puede tener sentido cuando el elemento es excepcional y no se repetirá en otras partes del proyecto.

Por ejemplo, una sección especial de una landing puede necesitar un tratamiento visual concreto que no debe afectar al resto del sitio.

En ese caso, no necesariamente necesitas convertir ese diseño en un preset.

Revisar los presets después de importar

Cuando trabajes con layouts procedentes de diferentes fuentes, conviene revisar qué estilos incorporan antes de aplicar modificaciones.

Comprueba especialmente:

• Tipografías.
• Colores.
• Tamaños.
• Espaciados.
• Bordes.
• Sombras.
• Estados hover.

Así podrás identificar qué elementos deben adaptarse al sistema visual del proyecto.

Crear una biblioteca visual coherente

Con el tiempo, puedes construir una biblioteca propia formada por dos tipos de recursos:

LAYOUTS
├── Landing pages
├── Páginas de servicios
├── Páginas corporativas
└── Secciones

PRESETS
├── Textos
├── Encabezados
├── Botones
├── Tarjetas
└── Formularios

Esta combinación puede convertirse en una base de trabajo reutilizable para futuros proyectos.

Buenas prácticas

• Define primero la identidad visual: establece colores y tipografías antes de adaptar numerosos layouts.
• Utiliza presets para elementos recurrentes: textos, encabezados, botones y componentes repetidos.
• Conserva la estructura útil: no reconstruyas una sección que ya funciona si solo necesitas modificar su apariencia.
• Evita estilos innecesariamente diferentes: busca coherencia entre las páginas.
• No conviertas todo en preset: reserva los presets para estilos que realmente se reutilizan.
• Revisa el responsive: la aplicación de estilos debe funcionar correctamente en diferentes dispositivos.
• Mantén organizada la Biblioteca: separa layouts, secciones y presets para encontrarlos fácilmente.

Flujo de trabajo recomendado

Una metodología sencilla para combinar layouts y presets en Divi 5 sería:

1. Definir la identidad visual del proyecto.
2. Crear los presets principales.
3. Seleccionar un layout adecuado.
4. Importar o copiar el layout.
5. Revisar su estructura.
6. Adaptar los elementos al sistema visual.
7. Aplicar los presets correspondientes.
8. Sustituir el contenido.
9. Revisar responsive.
10. Guardar las estructuras que puedan reutilizarse.

Combinar layouts predefinidos y presets en Divi 5 permite aprovechar la velocidad de las estructuras ya diseñadas sin renunciar a una identidad visual propia.

El layout puede utilizarse como punto de partida para la estructura de la página, mientras que los presets ayudan a mantener consistentes elementos como tipografías, colores, botones y componentes repetidos.

Esta separación entre estructura, estilo y contenido permite trabajar de una forma más organizada y facilita especialmente la creación de múltiples páginas o proyectos con una identidad visual coherente.

Cuando este sistema se combina con una Biblioteca organizada y plantillas maestras, Divi 5 puede convertirse en una herramienta mucho más eficiente para crear y mantener sitios web a gran escala.

El módulo Texto es uno de los elementos más básicos y, al mismo tiempo, más importantes de Divi 5. Aunque pueda parecer un módulo sencillo, es el punto de partida para introducir gran parte del contenido de una página: párrafos, títulos, listas, enlaces, destacados y diferentes elementos de contenido escrito.

Aprender a utilizar correctamente el módulo Texto no consiste únicamente en escribir contenido. También implica saber estructurarlo, aplicar estilos de forma coherente, controlar su comportamiento responsive y utilizar los ajustes globales de Divi 5 para mantener una identidad visual consistente en todo el sitio web.

¿Qué es el módulo Texto?

El módulo Texto permite añadir y editar contenido escrito directamente dentro de una página creada con Divi 5. A diferencia de trabajar únicamente con el editor tradicional de WordPress, Divi permite visualizar el resultado del contenido mientras se diseña la página.

El módulo puede utilizarse para crear desde un simple párrafo informativo hasta bloques completos de contenido con diferentes niveles de encabezado, enlaces, listas y formatos.

Una de sus principales ventajas es que contenido y diseño pueden gestionarse desde el mismo entorno visual. Puedes modificar el texto y, al mismo tiempo, controlar aspectos como la tipografía, el tamaño, el color, el interlineado, el espaciado o la alineación.

Cómo añadir un módulo Texto

Para añadir un módulo Texto en Divi 5, primero debes situarte dentro de la estructura de la página y seleccionar el lugar donde quieres introducir el contenido.

1. Añade o selecciona una sección.
2. Accede a la fila o estructura de columnas donde quieras colocar el contenido.
3. Haz clic en Añadir módulo.
4. Selecciona el módulo Texto.
5. Introduce o pega el contenido que quieras mostrar.
6. Configura posteriormente su diseño y comportamiento responsive.

El módulo aparecerá inmediatamente dentro de la estructura visual de Divi 5. A partir de ese momento puedes modificar tanto su contenido como sus propiedades de diseño.

El contenido del módulo Texto

La parte principal del módulo está destinada a introducir el contenido que verá el visitante. Aquí puedes escribir directamente el texto o utilizar el editor disponible para aplicar diferentes formatos.

Un mismo módulo puede contener varios elementos de contenido. Por ejemplo, puedes utilizar un encabezado, varios párrafos y una lista dentro del mismo módulo cuando todos ellos formen parte de un mismo bloque informativo.

Sin embargo, en proyectos profesionales conviene evitar módulos excesivamente grandes. Dividir correctamente el contenido facilita posteriormente la edición, la reutilización y la aplicación de estilos.

Párrafos

Los párrafos son el uso más habitual del módulo Texto. Cada bloque de contenido debe presentar una idea clara y estar separado correctamente para facilitar la lectura.

Una buena estructura visual es especialmente importante en páginas con mucho contenido, como servicios, páginas corporativas, artículos o landing pages.

Encabezados

El módulo Texto también permite introducir encabezados utilizando diferentes niveles HTML, como H2, H3 o H4.

Estos encabezados no deben utilizarse únicamente porque tengan un determinado tamaño visual. Su función principal es organizar jerárquicamente el contenido de la página.

Por ejemplo, un H2 puede introducir una sección principal y los H3 pueden utilizarse para desarrollar diferentes apartados dentro de ella.

La apariencia visual del encabezado debe gestionarse mediante los ajustes de diseño, no utilizando un nivel incorrecto de HTML simplemente para conseguir un tamaño determinado.

Listas

Las listas permiten presentar información de forma mucho más fácil de escanear. Son especialmente útiles para características, ventajas, pasos, requisitos o enumeraciones.

Divi permite trabajar tanto con listas ordenadas como con listas sin ordenar. La elección depende de si el orden de los elementos tiene importancia.

• Utiliza listas sin ordenar cuando el orden no sea relevante.
• Utiliza listas ordenadas cuando exista una secuencia o proceso.
• Evita convertir párrafos completos en listas únicamente para conseguir un efecto visual.

Opciones de diseño del módulo Texto

Una vez introducido el contenido, Divi 5 permite controlar prácticamente todos los aspectos visuales del módulo desde sus opciones de diseño.

Entre los ajustes más importantes se encuentran la tipografía, el tamaño del texto, el peso de la fuente, el color, la alineación, el interlineado y el espaciado.

Tipografía

La elección de la tipografía influye directamente en la identidad visual y en la legibilidad de una página.

En un proyecto profesional es recomendable definir previamente las tipografías principales y utilizarlas de forma consistente. Si cada módulo utiliza una fuente diferente, la página pierde coherencia visual y resulta más difícil de mantener.

Los Presets de Divi 5 permiten llevar esta idea mucho más lejos, ya que determinados estilos pueden definirse de forma global y reutilizarse en diferentes elementos.

Tamaño del texto

El tamaño debe adaptarse al tipo de contenido y al dispositivo desde el que se visualizará la página.

Un tamaño adecuado en escritorio puede resultar excesivo en un teléfono móvil. Por este motivo, Divi permite establecer valores específicos para diferentes dispositivos.

La configuración responsive debe utilizarse para mejorar la experiencia de lectura, no simplemente para hacer que todos los elementos sean proporcionalmente más pequeños.

Color

El color del texto debe proporcionar suficiente contraste con el fondo y mantener la identidad visual definida para el proyecto.

En textos normales es especialmente importante evitar combinaciones con poco contraste. Un texto visualmente atractivo pero difícil de leer perjudica tanto la experiencia de usuario como la accesibilidad.

Alineación

El módulo Texto permite establecer diferentes tipos de alineación, como izquierda, centro, derecha o justificada.

En la mayoría de los contenidos web, la alineación izquierda suele proporcionar una lectura más natural. La alineación centrada puede funcionar bien en titulares, llamadas a la acción o pequeños bloques de contenido, mientras que la justificación debe utilizarse con criterio para evitar espacios irregulares entre palabras.

Espaciado e interlineado

El espacio que existe entre líneas y entre diferentes bloques de contenido tiene una gran influencia en la comodidad de lectura.

Un texto demasiado compacto resulta difícil de leer, mientras que un interlineado excesivo puede romper la continuidad visual del contenido.

Además del interlineado, Divi permite controlar los márgenes y rellenos del módulo. Estos valores determinan la separación entre el texto y los elementos que lo rodean.

Una buena práctica consiste en utilizar un sistema de espaciado coherente en todo el sitio en lugar de ajustar cada módulo de manera independiente.

Diseño responsive del texto

Uno de los aspectos fundamentales al trabajar con el módulo Texto en Divi 5 es comprobar cómo se comporta el contenido en diferentes tamaños de pantalla.

El editor permite modificar determinados valores específicamente para escritorio, tablet y móvil. De esta forma puedes adaptar el diseño sin necesidad de crear diferentes versiones del mismo contenido.

Por ejemplo, un encabezado puede utilizar un tamaño grande en escritorio y reducirse progresivamente en tablet y móvil. Lo mismo puede hacerse con determinados espacios, márgenes o alineaciones.

Antes de dar por terminado un diseño, conviene revisar siempre el módulo en los diferentes dispositivos disponibles.

Texto y Presets en Divi 5

En proyectos pequeños puede parecer suficiente configurar cada módulo de forma independiente. Sin embargo, cuando una web empieza a crecer, esta metodología genera problemas de mantenimiento.

Imagina una página con veinte bloques de texto que utilizan exactamente la misma tipografía, tamaño, color y espaciado. Si todos los estilos se han configurado manualmente, cambiar posteriormente uno de esos valores implica revisar numerosos módulos.

Los Presets permiten definir un estilo reutilizable para los módulos y aplicarlo en diferentes partes del proyecto.

De esta manera, el módulo Texto deja de ser simplemente un elemento individual y pasa a formar parte de un sistema de diseño global.

Esta metodología resulta especialmente útil en webs corporativas, proyectos con muchas páginas y trabajos realizados para clientes.

Buenas prácticas al utilizar el módulo Texto

El módulo Texto es sencillo de utilizar, pero existen algunos errores habituales que conviene evitar.

No utilizar el diseño para sustituir la estructura

El tamaño visual de un texto no debe determinar el nivel de encabezado utilizado. La estructura HTML debe responder a la jerarquía del contenido.

Evitar estilos independientes innecesarios

Si varios módulos utilizan el mismo estilo, es preferible plantearse el uso de un Preset antes que configurar cada elemento manualmente.

No abusar de los saltos de línea

Los saltos de línea pueden utilizarse puntualmente, pero no deberían convertirse en el sistema principal para controlar el espacio entre elementos. Para eso existen los márgenes, rellenos y demás herramientas de diseño de Divi.

Priorizar la legibilidad

El objetivo principal de un bloque de texto es que el usuario pueda leerlo cómodamente. La tipografía, el tamaño, el contraste, el ancho de línea y el espaciado deben trabajar conjuntamente para conseguirlo.

Comprobar siempre el móvil

Un diseño que funciona correctamente en escritorio puede presentar problemas en pantallas pequeñas. Comprueba especialmente los encabezados, los tamaños de fuente, las líneas demasiado largas y los espacios verticales.

Texto, SEO y accesibilidad

El módulo Texto también participa en la construcción de una página correctamente estructurada para buscadores y usuarios.

Los encabezados deben organizar el contenido de manera lógica, los párrafos deben ser fáciles de leer y los enlaces deben utilizar textos descriptivos.

Además, el contraste entre texto y fondo debe ser suficiente y el contenido no debería depender exclusivamente del color para transmitir información.

Divi proporciona las herramientas visuales necesarias para realizar estas configuraciones, pero la responsabilidad de utilizar correctamente cada elemento corresponde al diseñador.

Cuándo utilizar un módulo Texto independiente

No existe una única forma correcta de organizar el contenido. En algunos casos resulta conveniente utilizar un único módulo para un bloque completo, mientras que en otros es mejor separar los elementos.

Por ejemplo, una sección que contiene un título, un párrafo y una llamada a la acción puede construirse utilizando varios módulos independientes. Esto proporciona un mayor control sobre cada elemento y facilita su reutilización.

En cambio, cuando varios párrafos forman una unidad de contenido que siempre debe mantenerse junta, puede ser más práctico utilizar un único módulo Texto.

La decisión debe basarse principalmente en la estructura del contenido y en las necesidades de diseño, no en una regla fija.

El módulo Texto dentro de un flujo de trabajo profesional

En un proyecto profesional, el objetivo no es simplemente conseguir que el texto tenga un aspecto atractivo. Es necesario crear un sistema que permita mantener y ampliar el sitio de forma eficiente.

Por eso, el flujo de trabajo recomendado es comenzar definiendo la estructura del contenido, establecer la jerarquía de encabezados, introducir los textos y posteriormente aplicar los estilos visuales correspondientes.

Una vez definidos los estilos recurrentes, los Presets permiten convertirlos en elementos reutilizables. De esta manera, nuevas páginas pueden construirse mucho más rápido y cualquier modificación global puede aplicarse de forma consistente.

El módulo Texto de Divi 5 es mucho más que una herramienta para escribir párrafos. Es uno de los elementos fundamentales para construir la estructura de contenido de cualquier página y, correctamente utilizado, puede integrarse dentro de un sistema de diseño completo.

Dominar sus opciones de contenido, tipografía, espaciado, responsive y Presets permite crear páginas más coherentes, fáciles de mantener y cómodas de utilizar.

La clave está en no pensar únicamente en cómo se ve un bloque de texto de forma aislada, sino en cómo encaja dentro de la estructura general del sitio. En las siguientes lecciones veremos otros módulos esenciales de Divi 5 y cómo combinarlos para construir interfaces completas y profesionales.

Los títulos son uno de los elementos fundamentales para organizar visualmente y estructuralmente el contenido de una página web. En Divi 5, pueden utilizarse para destacar las diferentes partes de una página, establecer una jerarquía clara y facilitar la lectura tanto para los usuarios como para los motores de búsqueda.

Trabajar correctamente los títulos no consiste simplemente en aumentar el tamaño de una frase. Un buen sistema de encabezados debe combinar estructura HTML, jerarquía visual, legibilidad y coherencia con el diseño general del sitio.

Qué son los títulos en una página web

Los títulos o encabezados son elementos HTML que permiten organizar el contenido de una página en diferentes niveles. Los más habituales son H1, H2, H3, H4, H5 y H6.

Cada nivel tiene una función diferente dentro de la estructura del contenido. El H1 representa normalmente el título principal de la página, mientras que los niveles inferiores se utilizan para organizar las diferentes secciones y subsecciones.

Por ejemplo, una página podría tener esta estructura:

• H1: Diseño de páginas web con WordPress
• H2: Cómo funciona el servicio
• H3: Diseño personalizado
• H3: Optimización para móviles
• H2: Qué incluye el servicio
• H3: Diseño responsive
• H3: Optimización SEO

Esta estructura permite entender rápidamente la organización de la información.

El módulo Títulos de Divi 5

Divi 5 permite crear títulos mediante diferentes módulos y elementos de contenido. El objetivo es disponer de un elemento específico para presentar encabezados de forma independiente y poder controlar su diseño con precisión.

Un título puede utilizarse como elemento independiente dentro de una fila, combinado con otros módulos o como parte de una composición más compleja.

Al trabajar con un módulo específico para títulos, puedes controlar de forma separada aspectos como la tipografía, tamaño, color, alineación, espaciado y comportamiento responsive.

La diferencia entre contenido y apariencia

Uno de los errores más frecuentes al diseñar páginas visualmente es confundir la apariencia de un texto con su función dentro de la estructura HTML.

Por ejemplo, puede ocurrir que quieras mostrar una frase con una apariencia muy grande y destacada. Eso no significa necesariamente que deba convertirse en un H1.

El nivel del encabezado debe elegirse en función de la jerarquía del contenido, mientras que su tamaño y apariencia se pueden modificar mediante CSS y las opciones de diseño de Divi.

De esta forma, puedes tener un H3 visualmente más grande que un H2 si el diseño lo requiere, aunque estructuralmente el H2 siga estando por encima del H3.

Cómo estructurar correctamente los encabezados

Antes de comenzar a diseñar una página conviene definir su estructura de contenido. Esto permite saber qué información debe funcionar como título principal y cuáles serán las diferentes secciones y subsecciones.

Una estructura lógica facilita tanto la navegación visual como la comprensión del contenido.

H1: título principal

El H1 identifica el tema principal de la página. En una página convencional suele existir un único H1 que describe claramente el contenido principal.

Por ejemplo, en una página dedicada a un servicio podría utilizarse:

Diseño de páginas web profesionales

El H1 no debería utilizarse simplemente porque sea el tamaño de título más grande disponible. Su función es identificar el contenido principal de la página.

H2: secciones principales

Los H2 dividen el contenido en grandes bloques temáticos.

Por ejemplo:

• Qué incluye el servicio
• Cómo trabajamos
• Ventajas del diseño profesional
• Preguntas frecuentes

Cada uno de estos apartados puede contener posteriormente diferentes H3.

H3: subsecciones

Los H3 permiten dividir una sección H2 en diferentes partes.

Por ejemplo, dentro de un H2 denominado Qué incluye el servicio podrían aparecer los siguientes H3:

• Diseño responsive
• Optimización SEO
• Integración con WordPress

Los niveles H4, H5 y H6 pueden utilizarse cuando la complejidad del contenido realmente lo justifique.

Diseño visual de los títulos

Una vez definida la estructura HTML, Divi 5 permite controlar la apariencia visual de cada título.

Entre los ajustes más importantes se encuentran:

• Familia tipográfica.
• Tamaño de fuente.
• Peso de la fuente.
• Color.
• Altura de línea.
• Espaciado entre letras.
• Alineación.
• Margen.
• Relleno.

Estos parámetros permiten crear desde títulos sencillos y discretos hasta encabezados de gran impacto visual para una landing page.

Tamaño de los títulos

El tamaño es uno de los aspectos visuales más importantes de un encabezado, pero no debe establecerse de manera aislada.

Un título debe destacar respecto al contenido que tiene debajo, pero también debe mantener una relación visual coherente con los demás niveles de encabezado.

Por ejemplo, puedes establecer una escala como:

• H1: 48 px
• H2: 36 px
• H3: 28 px
• H4: 22 px

Estos valores son simplemente un ejemplo. La escala adecuada dependerá del proyecto, la tipografía utilizada y el diseño general de la web.

Títulos responsive

Uno de los aspectos más importantes al trabajar con títulos en Divi 5 es adaptar su tamaño a cada dispositivo.

Un H1 de gran tamaño puede funcionar perfectamente en una pantalla de escritorio, pero ocupar demasiadas líneas en un teléfono móvil.

Divi permite establecer diferentes valores para escritorio, tablet y móvil. Esto facilita la creación de una jerarquía visual adaptada a cada pantalla.

Por ejemplo, un H1 podría utilizar un tamaño mayor en escritorio y reducirse progresivamente en dispositivos pequeños.

También es importante revisar el interlineado. Cuando un título ocupa dos o tres líneas en móvil, una altura de línea demasiado grande puede generar un espacio excesivo y perjudicar la composición.

Alineación de los títulos

Los títulos pueden alinearse a la izquierda, al centro o a la derecha dependiendo del diseño.

La alineación izquierda suele ser la opción más natural para contenidos informativos y páginas con bastante texto. La alineación centrada puede funcionar especialmente bien en hero sections, encabezados de secciones o landing pages.

Lo importante es mantener una lógica visual. Si todos los títulos principales de una web están alineados a la izquierda, introducir un título centrado sin una razón concreta puede romper la coherencia del diseño.

Tipografía y jerarquía visual

La jerarquía no depende únicamente del tamaño. También puede construirse utilizando diferentes pesos de fuente, colores, espacios y contrastes.

Por ejemplo, un H2 puede diferenciarse de un H3 mediante una combinación de tamaño y peso, mientras que un H4 puede utilizar un tamaño menor pero conservar la misma familia tipográfica.

Una buena jerarquía permite que el usuario pueda recorrer una página rápidamente y entender qué información es más importante.

Utilizar Presets para los títulos

Cuando una web contiene muchas páginas, configurar manualmente cada encabezado puede convertirse en una tarea repetitiva.

Los Presets de Divi 5 permiten definir estilos reutilizables para los diferentes elementos.

Por ejemplo, puedes crear un estilo para los H2 principales del sitio y aplicarlo a todos los módulos correspondientes. Si posteriormente decides modificar la tipografía, el tamaño o el color, puedes realizar el cambio desde el Preset en lugar de editar cada título individualmente.

Esto permite mantener una identidad visual coherente y reduce considerablemente el tiempo necesario para realizar cambios globales.

Errores habituales con los títulos

Utilizar H1 para conseguir un texto grande

El H1 no debe utilizarse simplemente porque sea visualmente más grande. La jerarquía HTML debe responder a la estructura del contenido.

Saltarse niveles sin necesidad

Pasar directamente de H2 a H4 puede dificultar la comprensión de la estructura en determinados contenidos. Lo recomendable es mantener una jerarquía lógica.

Utilizar demasiados estilos diferentes

Si cada título tiene una tipografía, color y tamaño diferente, la página pierde consistencia visual.

No comprobar los títulos en móvil

Los encabezados son uno de los elementos que más problemas pueden generar en pantallas pequeñas. Un título demasiado grande puede provocar saltos de línea poco naturales y alterar toda la composición de la página.

Usar títulos como elementos decorativos

Un texto no debería convertirse en H2 o H3 únicamente para conseguir un determinado estilo visual. Si el contenido no representa realmente una sección, es preferible utilizar otro elemento de diseño.

Títulos y SEO

Los encabezados también forman parte de la estructura que los motores de búsqueda utilizan para interpretar el contenido de una página.

Una jerarquía bien organizada ayuda a entender la relación entre los diferentes contenidos. Sin embargo, esto no significa que debamos introducir palabras clave de forma artificial en todos los encabezados.

Los títulos deben describir de forma natural el contenido que aparece a continuación y facilitar la comprensión de la página.

Por ejemplo, si una sección explica cómo contratar un servicio, un H2 como Cómo contratar el servicio resulta mucho más útil que un encabezado genérico como Más información.

Títulos y accesibilidad

Una estructura correcta de encabezados también mejora la accesibilidad.

Las personas que utilizan lectores de pantalla pueden utilizar los encabezados para desplazarse rápidamente por el contenido y localizar las diferentes secciones.

Por este motivo, los encabezados deben utilizarse de acuerdo con su función estructural y no únicamente como elementos decorativos.

Cómo crear una jerarquía profesional

Un buen método de trabajo consiste en separar el proceso en dos fases.

1. Definir la estructura: decidir qué contenido corresponde al H1, H2, H3 y demás niveles.
2. Diseñar la apariencia: establecer tipografías, tamaños, colores, espaciados y comportamiento responsive.

Esta separación evita uno de los errores más habituales: elegir el nivel del encabezado basándose únicamente en su apariencia.

Cuando además utilizamos Presets, podemos convertir esta jerarquía visual en un sistema reutilizable para todo el proyecto.

Los títulos son mucho más que textos de mayor tamaño. En Divi 5 forman parte de la estructura de la página y deben combinar correctamente jerarquía HTML, diseño visual, responsive, SEO y accesibilidad.

La mejor práctica consiste en definir primero la estructura del contenido y después diseñar visualmente cada nivel. De esta forma, la página será más fácil de entender, mantener y adaptar a diferentes dispositivos.

Además, el uso de Presets permite convertir los estilos de encabezado en una parte del sistema de diseño global del sitio, algo especialmente importante cuando se trabaja con proyectos grandes o profesionales.

El módulo Imagen de Divi 5 permite incorporar imágenes en cualquier parte de una página y controlar tanto su contenido como su presentación visual. Es uno de los módulos fundamentales del builder y resulta imprescindible para crear páginas atractivas, transmitir información de forma visual y reforzar la identidad de un sitio web.

Sin embargo, utilizar imágenes correctamente no consiste simplemente en subir una fotografía y colocarla dentro de una página. Es necesario tener en cuenta aspectos como el tamaño, el formato, la calidad, el rendimiento, el responsive, el SEO, la accesibilidad y la relación de la imagen con el resto del diseño.

Qué es el módulo Imagen

El módulo Imagen permite seleccionar una imagen de la biblioteca de medios de WordPress o utilizar una imagen disponible mediante una URL, dependiendo de las opciones disponibles en el proyecto.

Una vez seleccionada la imagen, Divi 5 permite controlar diferentes aspectos de su presentación, como el tamaño, la alineación, los bordes, las sombras, los espacios y otros efectos visuales.

El módulo puede utilizarse para fotografías, ilustraciones, capturas de pantalla, gráficos, logotipos u otros recursos visuales que formen parte del contenido de una página.

Cómo añadir una imagen

Para añadir una imagen mediante Divi 5, el proceso básico es muy sencillo:

1. Selecciona la sección y la fila donde quieres colocar la imagen.
2. Haz clic en Añadir módulo.
3. Selecciona el módulo Imagen.
4. Abre el selector de imágenes.
5. Selecciona una imagen existente o sube una nueva.
6. Configura las opciones de diseño.
7. Comprueba el resultado en escritorio, tablet y móvil.

Divi muestra inmediatamente el resultado dentro del editor visual, por lo que puedes comprobar cómo encaja la imagen con los demás elementos de la página.

Seleccionar correctamente una imagen

Antes de subir una imagen a WordPress conviene analizar si realmente es adecuada para el uso que se le va a dar.

No todas las imágenes necesitan tener una resolución enorme. Una fotografía utilizada en un pequeño bloque de contenido no necesita necesariamente las mismas dimensiones que una imagen principal de una página.

Utilizar imágenes excesivamente grandes aumenta el peso de la página y puede afectar negativamente al rendimiento.

Por tanto, el objetivo no es conseguir la máxima resolución posible, sino utilizar una imagen con unas dimensiones y una calidad adecuadas para el tamaño en el que realmente se mostrará.

Formatos de imagen

El formato elegido también influye en el peso y la calidad de la imagen.

Los formatos más habituales en una web moderna son JPEG, PNG, WebP y AVIF, aunque la elección dependerá del tipo de imagen y de las necesidades del proyecto.

JPEG

JPEG es un formato tradicional especialmente utilizado para fotografías. Permite conseguir archivos relativamente pequeños mediante compresión con pérdida.

PNG

PNG resulta especialmente útil cuando necesitamos transparencia o cuando trabajamos con determinados gráficos, capturas o imágenes que requieren una mayor precisión.

WebP

WebP ofrece una buena relación entre calidad y tamaño y se ha convertido en una opción habitual para sitios web.

AVIF

AVIF puede proporcionar archivos todavía más pequeños manteniendo una buena calidad visual. Su utilización dependerá de la compatibilidad del entorno y de la configuración de WordPress y del servidor.

En cualquier caso, no existe un formato universalmente mejor. La decisión debe basarse en el tipo de imagen y en las necesidades concretas del proyecto.

Tamaño y dimensiones

Uno de los errores más habituales consiste en subir imágenes con unas dimensiones muy superiores a las que realmente necesita la página.

Por ejemplo, si una imagen va a mostrarse con un ancho aproximado de 600 píxeles, no siempre tiene sentido utilizar un archivo original de 5000 píxeles de ancho.

La imagen puede seguir viéndose correctamente, pero estaremos enviando al navegador muchos más datos de los necesarios.

Lo recomendable es trabajar con imágenes adecuadas para el uso previsto y aprovechar las diferentes versiones que WordPress puede generar para distintos tamaños.

Imágenes responsive

Una misma imagen puede visualizarse en diferentes dispositivos y tamaños de pantalla. Por este motivo, es importante que la web no dependa de una única versión de gran tamaño para todos los usuarios.

WordPress genera diferentes tamaños de imagen y puede proporcionar al navegador información sobre las versiones disponibles. Esto permite seleccionar una versión más adecuada en función del contexto.

Divi 5 se integra dentro de este sistema y permite diseñar el módulo de forma responsive.

Además, desde las opciones de Divi puedes controlar determinados parámetros visuales para cada dispositivo cuando sea necesario.

Proporción y composición

La calidad de una imagen no depende únicamente de su resolución. También es importante su composición y su relación de aspecto.

Una fotografía horizontal puede funcionar perfectamente como imagen principal de una página, mientras que una fotografía vertical puede resultar más apropiada para determinados bloques o dispositivos.

Antes de colocar una imagen conviene analizar el espacio disponible y comprobar si la proporción original encaja correctamente con el diseño.

En determinados casos puede ser preferible utilizar imágenes preparadas específicamente para un formato concreto en lugar de intentar adaptar una fotografía que tiene una proporción completamente diferente.

Ajustes visuales del módulo Imagen

Divi 5 ofrece numerosas posibilidades para personalizar la apariencia del módulo Imagen.

Entre ellas se encuentran diferentes opciones relacionadas con:

• Tamaño.
• Alineación.
• Bordes.
• Radio de las esquinas.
• Sombras.
• Espaciado.
• Filtros y efectos visuales.
• Animaciones.

Estas opciones permiten integrar una imagen dentro de prácticamente cualquier diseño sin necesidad de recurrir inmediatamente a código CSS personalizado.

Bordes y esquinas redondeadas

Los bordes pueden utilizarse para separar visualmente una imagen del fondo o crear determinados estilos gráficos.

El radio de las esquinas permite convertir una imagen rectangular tradicional en un elemento con esquinas redondeadas.

Este recurso es especialmente habitual en diseños modernos, pero debe utilizarse de forma coherente con el resto de elementos de la página.

Sombras

Las sombras pueden ayudar a crear sensación de profundidad y separar una imagen del fondo.

Sin embargo, una sombra demasiado intensa puede hacer que el diseño parezca artificial o visualmente sobrecargado.

En diseños profesionales suele ser preferible utilizar sombras sutiles y mantener una lógica común entre imágenes, tarjetas, botones y otros elementos.

Enlaces en las imágenes

Una imagen también puede utilizarse como elemento enlazable. Esto resulta especialmente útil cuando la imagen representa un producto, un proyecto, una categoría o cualquier otro contenido al que el usuario pueda acceder.

Si una imagen funciona como enlace, es importante que el usuario pueda entender qué ocurrirá al hacer clic sobre ella.

En determinados diseños puede ser conveniente acompañar la imagen de un texto o botón para hacer más evidente la acción disponible.

Texto alternativo y accesibilidad

Uno de los aspectos más importantes al trabajar con imágenes es el texto alternativo, conocido habitualmente como atributo alt.

El texto alternativo permite describir el contenido o función de una imagen cuando esta no puede visualizarse y resulta especialmente importante para usuarios que utilizan tecnologías de asistencia.

Además, los buscadores pueden utilizar esta información para comprender mejor el contenido de determinadas imágenes.

El texto alternativo debe ser descriptivo y natural. No debe utilizarse como un lugar para introducir palabras clave de forma artificial.

Por ejemplo, si una fotografía muestra una persona utilizando un ordenador para diseñar una web, un texto alternativo descriptivo podría ser:

Persona diseñando una página web con WordPress

En cambio, introducir una cadena artificial de palabras clave como diseño web barato páginas web WordPress diseño web profesional no aporta una descripción útil.

Imágenes decorativas

No todas las imágenes necesitan transmitir información.

Una imagen utilizada exclusivamente como elemento decorativo puede tener un tratamiento diferente al de una imagen que aporta contenido.

La diferencia fundamental está en su función dentro de la página. Si eliminar la imagen no supone perder información relevante, probablemente estamos ante un recurso decorativo.

Esta distinción es importante especialmente desde el punto de vista de la accesibilidad.

Optimización de imágenes

Las imágenes suelen representar una parte importante del peso total de una página. Por este motivo, optimizarlas correctamente puede tener un impacto significativo en el rendimiento.

Antes de subir una imagen conviene revisar:

• Sus dimensiones.
• Su formato.
• Su nivel de compresión.
• Si realmente es necesaria.
• El tamaño al que se mostrará.

La optimización no consiste en reducir la calidad al máximo. El objetivo es encontrar un equilibrio entre calidad visual y peso del archivo.

Carga diferida

En páginas con muchas imágenes, cargar todos los recursos inmediatamente puede aumentar el tiempo necesario para mostrar el contenido inicial.

La carga diferida o lazy loading permite retrasar determinadas imágenes hasta que se aproximan a la zona visible del navegador.

Esto puede reducir la cantidad de recursos que se cargan inicialmente y mejorar el rendimiento de páginas con mucho contenido visual.

Sin embargo, las imágenes principales que aparecen inmediatamente al cargar una página deben tratarse con especial cuidado, ya que retrasar innecesariamente su carga puede perjudicar métricas como el LCP.

Imágenes y Core Web Vitals

Las imágenes tienen una relación directa con diferentes aspectos del rendimiento web y pueden influir especialmente en métricas como LCP y CLS.

Una imagen principal demasiado pesada puede retrasar la aparición del contenido principal. Por otro lado, si no se reserva correctamente el espacio que ocupará una imagen, el contenido puede desplazarse cuando esta termina de cargar.

Por eso, optimizar imágenes no significa únicamente comprimir archivos. También implica integrarlas correctamente dentro de la estructura y el comportamiento de la página.

Imágenes y diseño responsive

Una imagen puede necesitar diferentes ajustes dependiendo del dispositivo.

En escritorio puede funcionar perfectamente ocupando una determinada anchura, mientras que en móvil puede necesitar ocupar todo el ancho disponible o utilizar un espaciado diferente.

Divi 5 permite adaptar diferentes valores del diseño a cada dispositivo, facilitando la creación de composiciones responsive sin necesidad de duplicar todo el contenido.

Antes de finalizar una página, revisa siempre:

• El tamaño de la imagen en escritorio.
• Su comportamiento en tablet.
• Su anchura en móvil.
• Los espacios alrededor.
• El comportamiento de las imágenes dentro de columnas.

Cuándo utilizar el módulo Imagen

El módulo Imagen resulta adecuado cuando necesitas mostrar una imagen como un elemento independiente dentro de una composición.

Puede utilizarse para:

• Fotografías de servicios.
• Imágenes de productos.
• Capturas de pantalla.
• Fotografías de proyectos.
• Ilustraciones.
• Gráficos.
• Imágenes informativas.

En otros casos puede ser más apropiado utilizar una imagen como fondo de una sección, fila u otro elemento de diseño. La elección dependerá de la función que tenga la imagen.

Imagen como contenido frente a imagen como fondo

Esta distinción es especialmente importante en Divi.

Cuando una imagen forma parte del contenido, normalmente debe utilizarse como una imagen propiamente dicha. Esto facilita aspectos como el texto alternativo, la accesibilidad y la comprensión del contenido.

En cambio, una imagen utilizada únicamente para crear un fondo visual puede configurarse como fondo del elemento correspondiente.

Por ejemplo, una fotografía decorativa detrás de un titular puede funcionar correctamente como imagen de fondo, mientras que una fotografía de un producto que aporta información debería tratarse como contenido.

Buenas prácticas con imágenes en Divi 5

Para trabajar correctamente con el módulo Imagen, conviene seguir algunas reglas sencillas:

• Utiliza imágenes relevantes para el contenido.
• Evita subir archivos mucho más grandes de lo necesario.
• Selecciona el formato adecuado para cada imagen.
• Utiliza textos alternativos descriptivos cuando la imagen aporte información.
• Comprueba el comportamiento responsive.
• Evita utilizar efectos visuales innecesarios.
• Optimiza especialmente las imágenes principales de la página.
• Mantén una estética coherente con el resto del sitio.

Errores habituales

Subir imágenes enormes

Una imagen de varios miles de píxeles puede ser innecesaria para un pequeño bloque de contenido y aumentar considerablemente el peso de la página.

No utilizar texto alternativo

Las imágenes que transmiten información deberían contar con una descripción alternativa adecuada.

Utilizar imágenes de baja calidad

Reducir demasiado el peso de una imagen puede provocar artefactos, pixelación o pérdida de detalle.

Ignorar el móvil

Una composición que funciona en escritorio puede resultar desproporcionada o generar problemas en pantallas pequeñas.

Utilizar demasiadas imágenes

Una página no mejora necesariamente por añadir más imágenes. Cada recurso visual debe aportar valor al contenido o al diseño.

El módulo Imagen dentro de un sistema de diseño

Al igual que ocurre con los módulos de texto y títulos, las imágenes deben integrarse dentro del sistema visual general del proyecto.

Si todas las imágenes de tarjetas utilizan el mismo radio de esquina, sombra y proporción, la web tendrá una apariencia mucho más coherente.

En Divi 5, esta consistencia puede conseguirse mediante configuraciones reutilizables y Presets cuando las mismas características se repiten en diferentes partes del sitio.

Esto permite que el diseñador no tenga que reconstruir manualmente cada imagen y facilita los cambios posteriores.

El módulo Imagen de Divi 5 es una herramienta fundamental para incorporar contenido visual a una página, pero su correcta utilización requiere mucho más que seleccionar una fotografía.

Es necesario tener en cuenta dimensiones, formato, compresión, responsive, accesibilidad, SEO, rendimiento y coherencia visual.

Una buena imagen debe aportar valor al usuario sin perjudicar la velocidad de carga ni romper la estructura del diseño. Cuando estos aspectos se trabajan correctamente, el módulo Imagen se convierte en una pieza esencial dentro de cualquier proyecto profesional realizado con Divi 5.

Los botones son uno de los elementos interactivos más importantes de una página web. Permiten dirigir al usuario hacia una acción concreta, como solicitar información, comprar un producto, descargar un recurso, contactar con una empresa o acceder a otra página.

En Divi 5, el módulo Botón permite crear llamadas a la acción con un alto grado de personalización visual y controlar aspectos como el texto, el enlace, los colores, la tipografía, el tamaño, los bordes, las sombras y el comportamiento responsive.

Sin embargo, un buen botón no debe diseñarse únicamente pensando en su apariencia. También es importante definir correctamente qué acción debe realizar, dónde debe llevar al usuario y cómo debe integrarse dentro del flujo de navegación.

Qué es el módulo Botón

El módulo Botón permite crear un elemento interactivo que normalmente dirige al usuario hacia una URL cuando hace clic sobre él.

Puede utilizarse de forma independiente o combinarse con otros módulos, como títulos, textos, imágenes o formularios.

Un ejemplo habitual sería una sección formada por un título, un texto explicativo y un botón:

• Título: Diseña tu nueva página web
• Texto: Creamos sitios web profesionales adaptados a tu negocio.
• Botón: Solicitar presupuesto

En este caso, el botón representa el siguiente paso que queremos que realice el visitante.

Cómo añadir un botón

Para añadir un botón en Divi 5, el procedimiento básico es el siguiente:

1. Selecciona la sección y la fila donde quieres colocar el botón.
2. Haz clic en Añadir módulo.
3. Selecciona el módulo Botón.
4. Introduce el texto que quieres mostrar.
5. Configura la URL de destino.
6. Personaliza su apariencia.
7. Comprueba su comportamiento en los diferentes dispositivos.

El botón aparecerá inmediatamente en el diseño y podrás modificar sus propiedades desde las opciones del módulo.

El texto del botón

El texto es uno de los elementos más importantes de un botón. Debe indicar de forma clara qué ocurrirá cuando el usuario haga clic.

Algunos ejemplos pueden ser:

• Solicitar presupuesto
• Contactar ahora
• Ver servicios
• Comprar ahora
• Descargar guía
• Reservar cita
• Ver todos los productos

En general, es preferible utilizar textos específicos frente a expresiones demasiado genéricas como Haz clic aquí o Más información.

Un texto descriptivo permite al usuario comprender mejor la acción disponible incluso antes de interactuar con el botón.

Definir el enlace

El botón debe tener una finalidad clara y, por tanto, un destino correctamente configurado.

El enlace puede dirigir a una página interna del sitio, una URL externa, una sección concreta de la misma página u otro recurso disponible en función de la configuración utilizada.

Antes de publicar una página es importante comprobar que todos los botones funcionan correctamente y que las URL no contienen errores.

Enlaces internos

Los enlaces internos permiten dirigir al usuario hacia otra página del mismo sitio.

Son especialmente útiles para conducir al visitante hacia servicios, páginas de contacto, categorías, productos o contenidos relacionados.

Enlaces externos

También puedes utilizar un botón para dirigir al usuario hacia otro sitio web.

En estos casos conviene revisar cuidadosamente el destino y comprobar si la navegación debe realizarse en la misma pestaña o en una nueva, según el contexto.

Diseño visual de los botones

Divi 5 permite personalizar prácticamente todos los aspectos visuales del botón.

Entre las opciones más habituales se encuentran:

• Tipografía.
• Tamaño del texto.
• Color del texto.
• Color de fondo.
• Color del borde.
• Grosor del borde.
• Radio de las esquinas.
• Espaciado interno.
• Alineación.
• Sombras.
• Efectos al pasar el cursor.

Estas opciones permiten crear desde botones muy sencillos hasta llamadas a la acción completamente personalizadas.

Color y contraste

El color del botón debe permitir identificarlo fácilmente como un elemento interactivo.

En muchos diseños se utiliza un color principal de la identidad visual para los botones y otro tratamiento para acciones secundarias.

Además, debe existir suficiente contraste entre el texto y el fondo. Un botón puede resultar visualmente atractivo, pero si el texto apenas se distingue, la experiencia de usuario será deficiente.

Botones principales y secundarios

No todas las acciones de una página tienen la misma importancia. Por este motivo, puede ser útil establecer diferentes niveles visuales.

Un botón principal puede utilizar un color más destacado y mayor contraste, mientras que una acción secundaria puede utilizar un diseño más discreto.

Por ejemplo:

• Acción principal: Solicitar presupuesto
• Acción secundaria: Ver nuestros servicios

Esta diferenciación ayuda a establecer una jerarquía visual y evita que todos los botones compitan por la atención del usuario.

Estados del botón

Un botón no tiene por qué presentar exactamente el mismo aspecto en todas las situaciones.

El estado normal es el que aparece cuando el usuario simplemente visualiza la página. Cuando coloca el cursor sobre el botón, puede utilizarse un estado hover para proporcionar una respuesta visual.

Este cambio puede consistir en modificar el color, el fondo, el borde, la sombra o algún otro aspecto visual.

El objetivo no es crear un efecto llamativo por sí mismo, sino proporcionar una indicación clara de que el elemento es interactivo.

Efectos hover

Los efectos hover pueden mejorar la percepción de interactividad de un botón.

Por ejemplo, un botón podría cambiar ligeramente de color al pasar el cursor por encima o modificar su sombra.

Los efectos deben ser sutiles y coherentes con el diseño general. Una animación excesiva puede distraer al usuario y hacer que la interfaz parezca poco profesional.

Además, hay que recordar que el hover es un comportamiento propio de dispositivos con puntero y no debe utilizarse como único mecanismo para comunicar información importante.

Tamaño y área de interacción

Un botón debe tener un tamaño suficiente para poder pulsarlo cómodamente, especialmente en dispositivos móviles.

Un botón demasiado pequeño puede resultar difícil de utilizar con un dedo y aumentar la posibilidad de pulsaciones incorrectas.

Por tanto, al diseñar botones responsive no debemos pensar únicamente en el tamaño del texto. También debemos considerar el espacio disponible alrededor del contenido y el área total de interacción.

Botones responsive

Divi 5 permite adaptar diferentes propiedades del botón según el dispositivo.

En escritorio puede funcionar correctamente un botón relativamente compacto, mientras que en móvil puede resultar conveniente aumentar su anchura o modificar su tamaño.

En determinados diseños puede ser interesante que el botón ocupe prácticamente todo el ancho disponible en móvil, especialmente cuando se trata de una acción principal.

Siempre conviene comprobar el resultado real en diferentes tamaños de pantalla.

Alineación de los botones

La alineación debe responder a la estructura de la sección.

Un botón puede alinearse a la izquierda dentro de un bloque de contenido, centrarse debajo de un título o situarse junto a otros elementos en una composición más compleja.

La decisión debe depender del diseño y de la función del botón, evitando utilizar una alineación diferente simplemente para crear variedad visual.

Botones dentro de una llamada a la acción

Un botón suele funcionar mejor cuando forma parte de un contexto que explica al usuario qué debe hacer y por qué debería hacerlo.

Por ejemplo, una llamada a la acción puede estar formada por:

• Un título que presenta la propuesta.
• Un texto que explica el beneficio.
• Un botón que permite realizar la acción.

De esta manera, el botón no aparece de forma aislada, sino como el siguiente paso lógico dentro de la experiencia del usuario.

Jerarquía y posición

La posición del botón dentro de la página puede influir considerablemente en su eficacia.

Una acción importante debería aparecer en un lugar donde el usuario pueda encontrarla fácilmente y después de disponer de suficiente información para tomar una decisión.

Por ejemplo, en una página de servicio puede aparecer un primer botón en la zona superior y posteriormente repetirse la llamada a la acción después de explicar las características, ventajas y condiciones del servicio.

Repetir una acción importante no significa necesariamente duplicar contenido de forma innecesaria. Puede facilitar la navegación cuando la página es extensa.

Botones y conversión

Los botones tienen una relación directa con la conversión porque representan muchas de las acciones que queremos que realice el visitante.

Sin embargo, mejorar la conversión no significa simplemente utilizar botones más grandes o utilizar colores más llamativos.

Es necesario analizar el contexto completo: el contenido que rodea al botón, la propuesta de valor, la confianza que transmite la página, la claridad de la acción y el momento en el que se presenta.

Uso de Presets para botones

En un proyecto profesional es habitual utilizar botones con un estilo común en diferentes páginas.

Por ejemplo, todos los botones principales podrían utilizar:

• La misma tipografía.
• El mismo color.
• El mismo radio de borde.
• El mismo tamaño.
• El mismo espaciado.
• El mismo efecto hover.

En Divi 5, los Presets permiten centralizar este tipo de configuraciones y reutilizarlas.

Esto facilita mantener una identidad visual coherente y permite modificar el diseño de los botones de forma global cuando sea necesario.

Botones y sistema de diseño

Un sistema de diseño profesional puede establecer diferentes tipos de botones según su función.

Por ejemplo, puede existir un estilo para las acciones principales, otro para acciones secundarias y otro para acciones menos relevantes.

De esta manera, el usuario aprende visualmente qué significa cada tipo de botón y puede interpretar la interfaz con mayor rapidez.

La ventaja de trabajar de esta manera en Divi 5 es que estos estilos pueden convertirse en elementos reutilizables mediante Presets.

Accesibilidad de los botones

Los botones deben ser fácilmente identificables y utilizables por todas las personas.

El texto debe ser suficientemente claro, el contraste debe ser adecuado y el área de interacción debe tener un tamaño razonable.

También es importante que el botón pueda identificarse como una acción y que su texto explique claramente qué sucederá al activarlo.

Un texto como Enviar formulario resulta generalmente más descriptivo que un texto ambiguo como Continuar, especialmente cuando existen varias acciones posibles en la misma página.

Errores habituales al diseñar botones

Utilizar demasiados botones destacados

Si todos los botones tienen exactamente el mismo nivel visual, ninguno destaca realmente. La jerarquía ayuda a indicar cuál es la acción principal.

Usar textos genéricos

Expresiones como Haz clic aquí proporcionan poca información sobre el destino o resultado de la acción.

Hacer botones demasiado pequeños

Especialmente en móvil, un botón pequeño puede dificultar la interacción.

Utilizar efectos excesivos

Animaciones, sombras o cambios de color demasiado agresivos pueden distraer y perjudicar la percepción profesional del sitio.

No comprobar los enlaces

Un botón visualmente perfecto no sirve de nada si conduce a una URL incorrecta o a una página inexistente.

No revisar el móvil

Un botón puede funcionar perfectamente en escritorio y resultar incómodo en un teléfono. La revisión responsive es imprescindible.

Botones frente a enlaces de texto

No todos los enlaces necesitan convertirse en botones.

Los botones deben reservarse principalmente para acciones que queremos destacar, mientras que los enlaces de texto son adecuados para navegación secundaria o referencias dentro del contenido.

Si una página contiene decenas de botones destacados, estos pierden parte de su capacidad para establecer una jerarquía visual.

Buenas prácticas para trabajar con botones en Divi 5

• Utiliza textos claros y orientados a la acción.
• Define correctamente la URL de destino.
• Mantén una jerarquía entre acciones principales y secundarias.
• Utiliza suficiente contraste.
• Comprueba el área de interacción en móvil.
• Utiliza efectos hover sutiles.
• Mantén los estilos coherentes en todo el sitio.
• Utiliza Presets cuando un estilo se repita.
• Comprueba todos los enlaces antes de publicar.
• No conviertas todos los enlaces de una página en botones.

El módulo Botón de Divi 5 es una herramienta fundamental para crear interfaces orientadas a la acción. Su función no se limita a mostrar un elemento visual atractivo, sino que debe facilitar al usuario el siguiente paso dentro de la navegación.

Un buen botón combina texto claro, destino correcto, diseño coherente, accesibilidad, responsive y una jerarquía visual adecuada.

Además, el uso de Presets permite convertir los estilos de los botones en una parte del sistema de diseño global del proyecto, facilitando tanto la creación de nuevas páginas como el mantenimiento posterior.

Cuando los botones se diseñan teniendo en cuenta todo el recorrido del usuario, dejan de ser simples elementos decorativos y se convierten en una herramienta esencial para mejorar la experiencia y los objetivos de conversión de una web.

El módulo Galería de Divi 5 permite mostrar varias imágenes dentro de un mismo bloque de contenido y organizarlas de forma visual para que el usuario pueda recorrerlas fácilmente. Es especialmente útil en proyectos donde las imágenes tienen un papel importante, como portfolios, restaurantes, alojamientos, tiendas online, eventos, proyectos profesionales o páginas de servicios.

Una galería bien diseñada no consiste simplemente en colocar muchas imágenes juntas. Es necesario decidir qué imágenes mostrar, cómo organizarlas, qué tamaño deben tener, cómo se comportarán en dispositivos móviles y qué experiencia tendrá el usuario al interactuar con ellas.

Qué es el módulo Galería

El módulo Galería permite seleccionar varias imágenes y mostrarlas agrupadas dentro de un único elemento de Divi 5.

En lugar de añadir un módulo Imagen independiente para cada fotografía, la galería permite gestionar un conjunto de imágenes desde un mismo módulo.

Esto resulta especialmente práctico cuando varias imágenes forman parte de un mismo contenido y deben mantener una presentación visual común.

Algunos ejemplos habituales son:

• Portfolio de trabajos realizados.
• Galería de fotografías de un alojamiento.
• Imágenes de las instalaciones de una empresa.
• Presentación de proyectos.
• Galería de productos.
• Fotografías de eventos.
• Trabajos realizados por profesionales.

Cómo añadir una galería

Para crear una galería en Divi 5, el proceso básico consiste en:

1. Seleccionar la sección y la fila donde quieres colocar la galería.
2. Hacer clic en Añadir módulo.
3. Seleccionar el módulo Galería.
4. Abrir el selector de imágenes.
5. Seleccionar las imágenes que quieres mostrar.
6. Ordenarlas según la composición deseada.
7. Configurar las opciones de diseño.
8. Comprobar el resultado en escritorio, tablet y móvil.

La ventaja de trabajar de esta forma es que todas las imágenes de la galería pueden gestionarse desde un único elemento.

Seleccionar las imágenes

La selección de imágenes es probablemente una de las decisiones más importantes al crear una galería.

No siempre es mejor mostrar más imágenes. Una galería con veinte fotografías relevantes puede resultar mucho más efectiva que una con cincuenta imágenes repetitivas o de poca calidad.

Las imágenes deberían tener una relación clara con el contenido y aportar información, confianza o valor visual.

Por ejemplo, en la página de una empresa de reformas puede ser más útil mostrar diferentes proyectos terminados que incluir numerosas fotografías prácticamente idénticas del mismo trabajo.

Orden de las imágenes

El orden también influye en la experiencia del usuario.

La primera imagen suele recibir una atención especial, por lo que conviene colocar en ella una fotografía representativa y de buena calidad.

En una galería de proyectos puede ser interesante ordenar las imágenes siguiendo una secuencia lógica: primero una vista general, después diferentes detalles y finalmente el resultado.

En otros casos, como una galería de productos, puede ser más apropiado ordenar las imágenes por categorías o características.

Diseño de la galería

Divi permite controlar diferentes aspectos de la presentación visual de la galería.

Dependiendo de la configuración utilizada, puedes controlar elementos como:

• Número de columnas.
• Espaciado entre imágenes.
• Relación de aspecto.
• Alineación.
• Tamaño de las imágenes.
• Bordes.
• Radio de las esquinas.
• Sombras.
• Tipografía de elementos asociados.

La configuración exacta dependerá del tipo de galería que quieras construir y del diseño general de la página.

Número de columnas

El número de columnas determina cuántas imágenes aparecen en cada fila.

En una pantalla de escritorio puede resultar adecuado mostrar tres o cuatro imágenes por fila, mientras que en una pantalla pequeña será necesario reducir el número de columnas para mantener un tamaño razonable.

La elección debe realizarse pensando en el tamaño real de las imágenes y en la cantidad de información que contienen.

Una galería con demasiadas columnas puede convertir las fotografías en pequeños elementos difíciles de apreciar.

Galerías responsive

El diseño responsive es especialmente importante en las galerías porque el espacio disponible cambia considerablemente entre dispositivos.

Una configuración habitual podría utilizar:

• Escritorio: tres o cuatro columnas.
• Tablet: dos o tres columnas.
• Móvil: una o dos columnas.

No existe una configuración universalmente correcta. La decisión dependerá de las dimensiones de las imágenes y del objetivo de la galería.

Lo importante es evitar que las fotografías sean tan pequeñas que pierdan su utilidad.

Proporción de las imágenes

Cuando una galería contiene fotografías con proporciones muy diferentes, el resultado puede ser visualmente irregular.

Por ejemplo, combinar fotografías horizontales, verticales y cuadradas sin ningún criterio puede generar una composición poco equilibrada.

En determinadas galerías puede ser recomendable utilizar imágenes con una proporción similar para conseguir una cuadrícula más uniforme.

En otros casos, mantener las proporciones originales puede ser importante porque la composición de cada fotografía forma parte del contenido.

La elección dependerá de si la prioridad es la uniformidad visual o conservar la fotografía tal como fue creada.

Miniaturas y visualización ampliada

Una galería puede utilizar miniaturas para presentar muchas imágenes en un espacio reducido y permitir posteriormente una visualización ampliada.

Este tipo de comportamiento resulta especialmente útil cuando las imágenes contienen detalles que no pueden apreciarse correctamente en la cuadrícula inicial.

La visualización ampliada permite al usuario concentrarse en una imagen concreta sin abandonar necesariamente la página.

Lightbox

El lightbox permite mostrar una imagen en un formato ampliado sobre la página cuando el usuario hace clic sobre ella.

Es una solución habitual para portfolios, fotografías y galerías donde el detalle visual es importante.

Cuando se utiliza correctamente, el lightbox mejora la experiencia porque permite visualizar las imágenes con mayor tamaño sin tener que crear una página independiente para cada fotografía.

Sin embargo, no siempre es necesario. Si una imagen no contiene detalles adicionales relevantes, abrirla en un lightbox puede añadir una interacción innecesaria.

Galería y experiencia de usuario

El objetivo de una galería debe ser facilitar la exploración de las imágenes.

Por este motivo, conviene evitar composiciones excesivamente complejas, animaciones innecesarias o efectos que dificulten la navegación.

El usuario debe poder identificar rápidamente que las imágenes forman parte de una colección y entender cómo puede interactuar con ellas.

Uso de títulos y descripciones

Dependiendo del tipo de galería, puede ser interesante acompañar las imágenes de títulos o descripciones.

Esto resulta especialmente útil cuando la imagen por sí sola no explica completamente lo que estamos mostrando.

Por ejemplo, en una galería de proyectos de arquitectura puede ser útil mostrar el nombre del proyecto, su ubicación o el tipo de trabajo realizado.

En una galería puramente decorativa, añadir texto a cada imagen puede ser innecesario.

Optimización de las imágenes de una galería

Las galerías pueden contener un número elevado de imágenes y, por tanto, convertirse fácilmente en uno de los elementos más pesados de una página.

Antes de subir las imágenes conviene optimizar:

• Dimensiones.
• Formato.
• Compresión.
• Calidad.
• Peso del archivo.

No tiene sentido cargar imágenes de varios megabytes cuando van a mostrarse como pequeñas miniaturas.

También es importante evitar subir múltiples copias innecesarias de la misma imagen.

Galerías y carga de imágenes

Cuando una página contiene muchas imágenes, la forma en la que se cargan los recursos puede tener un impacto importante sobre el rendimiento.

La carga diferida puede resultar especialmente útil para las imágenes que se encuentran fuera de la zona visible inicialmente.

Sin embargo, las imágenes que aparecen inmediatamente en pantalla deben analizarse de forma diferente. Retrasar su carga innecesariamente puede empeorar la percepción de velocidad y determinadas métricas de rendimiento.

Texto alternativo en las galerías

Las imágenes de una galería también deben tratarse correctamente desde el punto de vista de la accesibilidad.

Cuando una imagen aporta información, su texto alternativo debe describir de forma adecuada aquello que representa.

Por ejemplo, una fotografía de una instalación podría utilizar un texto alternativo como:

Instalación de paneles solares en una vivienda unifamiliar

La descripción debe ser natural y útil. No debe convertirse en una lista artificial de palabras clave.

Galerías y SEO

Una galería correctamente estructurada puede complementar el contenido de una página, pero las imágenes no deben utilizarse como sustituto del contenido textual cuando este sea necesario para explicar un tema.

Los textos alternativos, nombres descriptivos de archivo y el contexto que rodea a las imágenes pueden ayudar a los buscadores a comprender mejor su contenido.

Sin embargo, la optimización de imágenes debe formar parte de una estrategia SEO más amplia y no limitarse a introducir palabras clave en los atributos de las fotografías.

Galería frente a módulos Imagen independientes

La elección entre utilizar una galería o varios módulos Imagen dependerá del objetivo.

Una galería es especialmente adecuada cuando todas las imágenes forman parte de una colección y comparten comportamiento y diseño.

Los módulos Imagen independientes ofrecen más control individual sobre cada fotografía y pueden ser preferibles cuando cada imagen tiene una función diferente dentro de la composición.

Por ejemplo, una sección con tres servicios diferentes podría utilizar tres módulos Imagen independientes, mientras que un portfolio con veinte trabajos puede beneficiarse mucho más de una galería.

Uso de galerías en diferentes tipos de webs

Portfolios

Las galerías son especialmente útiles para diseñadores, fotógrafos, arquitectos, estudios creativos y otros profesionales que necesitan mostrar trabajos realizados.

Restaurantes

Pueden utilizarse para mostrar platos, instalaciones, eventos o diferentes espacios del establecimiento.

Alojamientos

Una galería permite presentar habitaciones, zonas comunes, exteriores y otros espacios importantes para la decisión de reserva.

Tiendas online

Las fotografías adicionales de productos pueden ayudar al usuario a comprender mejor sus características y apariencia.

Empresas de servicios

Las galerías pueden utilizarse para mostrar trabajos realizados, instalaciones, maquinaria o resultados antes y después.

Buenas prácticas para galerías en Divi 5

• Utiliza únicamente imágenes relevantes.
• Prioriza la calidad sobre la cantidad.
• Mantén una composición coherente.
• Utiliza un número de columnas adecuado al tamaño de las imágenes.
• Adapta la galería a móvil y tablet.
• Optimiza el peso de las fotografías.
• Utiliza textos alternativos descriptivos cuando corresponda.
• Utiliza lightbox cuando realmente aporte valor.
• Evita animaciones y efectos innecesarios.
• Comprueba la velocidad de carga de la página.

Errores habituales

Mostrar demasiadas imágenes

Una galería excesivamente extensa puede dificultar la navegación y aumentar considerablemente el peso de la página.

Utilizar fotografías repetitivas

Mostrar muchas imágenes prácticamente iguales no aporta necesariamente más información al usuario.

No optimizar las imágenes

Las fotografías originales de una cámara o teléfono pueden tener un tamaño muy superior al necesario para una página web.

Ignorar el móvil

Una cuadrícula que funciona correctamente en escritorio puede generar miniaturas demasiado pequeñas en dispositivos móviles.

Utilizar demasiados efectos

Las animaciones, zooms y transiciones deben utilizarse con moderación para no convertir la galería en un elemento visualmente pesado.

Galerías y sistema de diseño

Las galerías también pueden formar parte del sistema visual general de un sitio.

Si diferentes galerías utilizan la misma separación entre imágenes, el mismo radio de esquinas, sombras y tratamiento visual, el sitio transmitirá una mayor sensación de coherencia.

Cuando estos estilos se repiten, los Presets de Divi 5 pueden ayudar a reducir el trabajo manual y facilitar futuras modificaciones.

El módulo Galería de Divi 5 es una herramienta especialmente útil para presentar colecciones de imágenes de forma organizada y atractiva.

Para obtener un buen resultado no basta con seleccionar fotografías. Es necesario trabajar también aspectos como composición, número de columnas, responsive, proporciones, lightbox, optimización, accesibilidad y rendimiento.

Una buena galería debe facilitar la exploración de las imágenes sin convertirse en un elemento pesado o innecesariamente complejo. Cuando se integra correctamente dentro del diseño general, puede mejorar considerablemente la presentación de un proyecto y la experiencia del usuario.

El vídeo se ha convertido en uno de los formatos más utilizados para presentar información en una página web. Permite explicar procesos, mostrar productos, presentar proyectos, crear tutoriales o transmitir una idea de forma mucho más visual que un bloque de texto.

En Divi 5, el módulo Vídeo permite incorporar contenido audiovisual dentro de una página y controlar diferentes aspectos de su presentación. Su correcta utilización requiere tener en cuenta no solo el diseño, sino también el peso de los archivos, la velocidad de carga, la experiencia del usuario y el comportamiento responsive.

Qué es el módulo Vídeo

El módulo Vídeo permite insertar un vídeo dentro de una página diseñada con Divi 5.

Puede utilizarse para mostrar un vídeo alojado en el propio sitio o para integrar contenido procedente de plataformas externas, dependiendo de las necesidades del proyecto y de la configuración utilizada.

Algunos usos habituales son:

• Tutoriales.
• Vídeos corporativos.
• Demostraciones de productos.
• Presentaciones de servicios.
• Vídeos de proyectos.
• Testimonios.
• Vídeos educativos.
• Presentaciones comerciales.

Cómo añadir un vídeo

El procedimiento básico para añadir un vídeo en Divi 5 consiste en:

1. Seleccionar la sección y la fila donde quieres colocar el vídeo.
2. Hacer clic en Añadir módulo.
3. Seleccionar el módulo Vídeo.
4. Configurar la fuente del vídeo.
5. Introducir o seleccionar el contenido audiovisual.
6. Configurar las opciones de diseño.
7. Revisar el comportamiento responsive.

Una vez configurado, Divi mostrará el vídeo dentro del diseño y podrás ajustar su posición y apariencia.

Vídeo alojado en la web o plataforma externa

Una de las primeras decisiones que debemos tomar es dónde estará alojado el vídeo.

Existen dos planteamientos principales: alojarlo directamente en nuestro servidor o utilizar una plataforma especializada en vídeo.

Vídeo alojado en el propio servidor

Alojar el archivo directamente en el servidor proporciona un mayor control sobre el contenido y su presentación, pero también implica gestionar el almacenamiento y la transferencia de datos.

Los vídeos pueden ocupar cientos de megabytes o incluso varios gigabytes, por lo que alojarlos directamente puede aumentar considerablemente el consumo de recursos del servidor.

Vídeo alojado en una plataforma externa

Otra opción consiste en utilizar una plataforma especializada y mostrar el vídeo dentro de la página.

Este sistema puede reducir la carga directa sobre el servidor y simplificar la gestión de los archivos audiovisuales.

La elección dependerá del tipo de proyecto, el nivel de control que necesites y la experiencia que quieras ofrecer al usuario.

El peso de los vídeos

El vídeo es uno de los recursos más pesados que puede incorporar una página web.

Una fotografía optimizada puede ocupar unos cientos de kilobytes, mientras que un vídeo puede ocupar decenas o cientos de megabytes.

Por este motivo, subir directamente vídeos grandes sin optimizarlos puede perjudicar seriamente el rendimiento de una página.

Antes de publicar un vídeo conviene revisar su resolución, duración, formato y nivel de compresión.

Resolución del vídeo

No todos los vídeos necesitan estar disponibles en resolución 4K.

Si el vídeo va a mostrarse dentro de una columna relativamente pequeña, utilizar una resolución excesivamente elevada puede suponer un consumo de datos innecesario.

La resolución debe adaptarse al tamaño al que realmente se mostrará el vídeo y al tipo de contenido.

En muchos proyectos web, una resolución Full HD puede ser más que suficiente para ofrecer una buena calidad visual.

Formato y compresión

La compresión permite reducir considerablemente el tamaño de un vídeo manteniendo una calidad visual razonable.

El objetivo no debe ser conseguir el archivo más pequeño posible, sino encontrar un equilibrio entre calidad, compatibilidad y peso.

Antes de subir un vídeo conviene asegurarse de que ha sido exportado correctamente y de que no contiene una calidad excesiva para el uso que tendrá en la web.

Vídeo responsive

Al igual que ocurre con las imágenes, el vídeo debe adaptarse a diferentes tamaños de pantalla.

Un vídeo que ocupa una gran parte del ancho de una pantalla de escritorio debe reducirse correctamente en tablet y móvil sin desbordar su contenedor.

La relación de aspecto también debe mantenerse para evitar que la imagen aparezca deformada.

Divi permite controlar diferentes aspectos del diseño responsive para conseguir que el módulo se integre correctamente dentro de la estructura de la página.

Relación de aspecto

La relación de aspecto determina la proporción entre el ancho y la altura del vídeo.

El formato panorámico tradicional suele funcionar bien para vídeos corporativos, tutoriales y presentaciones.

Sin embargo, determinados contenidos creados originalmente para dispositivos móviles pueden utilizar formatos verticales.

Antes de introducir un vídeo en una página conviene comprobar que su proporción es coherente con el espacio disponible.

Vídeos en una página de inicio

Los vídeos pueden utilizarse como elemento principal de una página de inicio, especialmente en una sección hero.

Sin embargo, hay que prestar especial atención al rendimiento.

Un vídeo pesado que comienza a cargarse inmediatamente puede aumentar considerablemente la cantidad de datos necesarios para mostrar la página inicial.

Por este motivo, en muchos casos puede ser preferible mostrar inicialmente una imagen de portada y cargar el vídeo cuando el usuario decide reproducirlo.

Miniatura o imagen de portada

La imagen de portada permite mostrar una representación visual del vídeo antes de iniciar la reproducción.

Una buena miniatura puede ayudar al usuario a comprender rápidamente qué contenido encontrará en el vídeo y, al mismo tiempo, evitar una carga innecesaria hasta que exista intención de reproducción.

La imagen utilizada debería ser relevante, de buena calidad y coherente con el diseño de la página.

Reproducción automática

La reproducción automática puede resultar atractiva en determinados diseños, pero debe utilizarse con mucho cuidado.

Un vídeo que comienza a reproducirse sin que el usuario lo haya solicitado puede consumir datos, generar ruido y resultar molesto, especialmente en dispositivos móviles.

Cuando se utiliza autoplay, conviene analizar cuidadosamente el contexto y asegurarse de que la experiencia sigue siendo adecuada para el usuario.

Controles del vídeo

Los controles permiten al usuario realizar acciones como reproducir, pausar, avanzar, retroceder o modificar el volumen.

La disponibilidad de estos controles depende de cómo se haya integrado el vídeo.

En contenidos donde el usuario debe decidir cuándo reproducir el vídeo, ofrecer controles claros es fundamental.

Vídeo y experiencia de usuario

Un vídeo debe aportar valor y no convertirse simplemente en un elemento decorativo.

Antes de incluirlo, conviene preguntarse qué información proporciona y si realmente mejora la experiencia respecto a utilizar una imagen o un texto.

Un vídeo puede ser especialmente útil cuando necesitamos mostrar un proceso, explicar una interacción o transmitir una experiencia que sería difícil describir únicamente mediante texto.

Vídeo como complemento del contenido

En muchos casos, el vídeo funciona mejor cuando acompaña a un contenido textual.

Por ejemplo, una página puede explicar las características de un servicio mediante texto y utilizar un vídeo para mostrar visualmente cómo funciona.

Esto permite que cada usuario elija el formato que le resulte más cómodo.

Además, el contenido textual facilita que la información principal siga siendo accesible incluso si el usuario no puede o no quiere reproducir el vídeo.

Vídeo y accesibilidad

La accesibilidad debe tenerse en cuenta también al incorporar contenido audiovisual.

Cuando el vídeo contiene información hablada importante, resulta recomendable proporcionar subtítulos o una alternativa textual adecuada.

Los subtítulos permiten que las personas que no pueden escuchar el audio comprendan el contenido y también son útiles en situaciones donde el usuario está navegando sin sonido.

Si el vídeo transmite información esencial para comprender una página, esa información no debería estar disponible exclusivamente dentro del vídeo.

Vídeo y SEO

Los vídeos pueden contribuir a mejorar la experiencia y complementar el contenido de una página, pero no deben utilizarse como sustituto de una estructura textual adecuada.

Cuando un vídeo es relevante para una página, conviene acompañarlo de un título descriptivo y contenido que explique qué puede encontrar el usuario.

También es importante utilizar una miniatura adecuada y proporcionar la información necesaria para que los buscadores puedan comprender el contexto del vídeo cuando corresponda.

Vídeos y rendimiento

El impacto de un vídeo sobre el rendimiento puede ser mucho mayor que el de una imagen.

Antes de incorporar un vídeo conviene analizar:

• Su tamaño.
• Su duración.
• Su resolución.
• Su formato.
• Cómo se cargará.
• Si comienza automáticamente.
• Si se encuentra dentro de la zona visible inicialmente.

El objetivo debe ser evitar que el vídeo interfiera con la carga del contenido principal.

Carga diferida del vídeo

La carga diferida permite retrasar determinados recursos hasta que realmente son necesarios.

En vídeos situados más abajo en una página, esta estrategia puede reducir la cantidad de recursos que deben cargarse inicialmente.

En cambio, un vídeo situado en la parte superior debe analizarse de forma diferente, especialmente si forma parte del contenido principal visible al entrar en la página.

La optimización debe adaptarse siempre a la posición y función del vídeo.

Vídeo dentro de una landing page

En una landing page, el vídeo puede utilizarse para explicar una propuesta, mostrar un producto o reforzar una llamada a la acción.

Una estructura habitual puede ser:

• Título principal.
• Propuesta de valor.
• Vídeo explicativo.
• Beneficios.
• Prueba social.
• Llamada a la acción.

En este contexto, el vídeo debe tener una función concreta dentro del recorrido del usuario.

Vídeo y conversión

Un vídeo puede ayudar a resolver dudas, explicar características complejas o mostrar un producto en funcionamiento.

Esto puede ser especialmente útil cuando el usuario necesita información adicional antes de realizar una acción.

Sin embargo, el vídeo no debe convertirse en una barrera para acceder a la información. Si un usuario no quiere reproducirlo, la página debería seguir proporcionando la información esencial mediante otros elementos.

Vídeo y diseño visual

Divi permite integrar el vídeo dentro de diferentes composiciones visuales.

Puede colocarse a ancho completo, dentro de una columna, junto a un bloque de texto o dentro de una sección especialmente diseñada para contenido audiovisual.

El tratamiento visual debe mantener la coherencia con el resto del sitio.

Por ejemplo, si las imágenes del proyecto utilizan esquinas redondeadas y sombras sutiles, el vídeo puede seguir el mismo lenguaje visual.

Bordes, sombras y esquinas

Los ajustes visuales de Divi permiten aplicar bordes, radios y sombras al módulo de vídeo.

Estos recursos pueden ayudar a integrarlo dentro del diseño, pero deben utilizarse con moderación.

Un vídeo con demasiados efectos puede parecer desconectado del resto de la interfaz.

Uso de Presets

Si una web utiliza vídeos de forma recurrente, puede resultar útil establecer un estilo común.

Por ejemplo, diferentes vídeos pueden compartir el mismo radio de esquinas, sombra, separación respecto al contenido y tratamiento visual.

Los Presets de Divi 5 permiten convertir estas configuraciones repetitivas en estilos reutilizables.

De esta manera, el vídeo pasa a formar parte del sistema de diseño general del proyecto.

Errores habituales

Subir vídeos demasiado pesados

Los archivos de vídeo pueden consumir una cantidad importante de almacenamiento y ancho de banda. Utilizar archivos sin optimizar puede perjudicar considerablemente el rendimiento.

Utilizar autoplay sin necesidad

La reproducción automática puede resultar molesta y consumir recursos innecesariamente.

No adaptar el vídeo al móvil

Un vídeo correctamente dimensionado en escritorio puede generar problemas en pantallas pequeñas si no se revisa su comportamiento responsive.

Depender únicamente del vídeo

La información esencial de una página no debería estar disponible exclusivamente dentro de un contenido audiovisual.

No utilizar subtítulos cuando son necesarios

Los subtítulos mejoran la accesibilidad y permiten consumir el contenido en situaciones donde el audio no está disponible.

Utilizar vídeo como decoración

Un vídeo consume muchos más recursos que una imagen estática. Si no aporta información o valor real, puede ser preferible utilizar una alternativa más ligera.

Buenas prácticas con vídeos en Divi 5

• Utiliza vídeos únicamente cuando aporten valor.
• Optimiza siempre los archivos.
• Utiliza una resolución adecuada al tamaño de visualización.
• Evita vídeos innecesariamente largos.
• Revisa el comportamiento responsive.
• Utiliza una miniatura adecuada.
• Evita la reproducción automática salvo que tenga una finalidad clara.
• Proporciona subtítulos cuando sean necesarios.
• No dependas exclusivamente del vídeo para transmitir información importante.
• Comprueba el impacto del vídeo sobre el rendimiento.

El módulo Vídeo de Divi 5 permite incorporar contenido audiovisual de forma integrada dentro del diseño de una página. Sus posibilidades son especialmente interesantes para tutoriales, demostraciones, presentaciones, portfolios y páginas orientadas a conversión.

Sin embargo, el vídeo requiere una planificación mayor que otros elementos debido a su impacto sobre el rendimiento. Es necesario controlar peso, resolución, formato, carga, responsive, accesibilidad y experiencia de usuario.

La mejor práctica consiste en utilizar vídeo cuando realmente mejora la comprensión o la experiencia del visitante y optimizarlo para que no se convierta en un obstáculo para la velocidad de la página.

Cuando se integra correctamente dentro del diseño y se combina con texto, imágenes y llamadas a la acción, el vídeo puede convertirse en uno de los recursos más efectivos para comunicar información en una web creada con Divi 5.

Las llamadas a la acción, conocidas habitualmente como CTA (Call To Action), son elementos diseñados para indicar al usuario qué acción puede realizar a continuación dentro de una página web.

Una llamada a la acción puede utilizarse para conseguir una venta, solicitar información, descargar un recurso, reservar una cita, contactar con una empresa o simplemente continuar navegando hacia otra parte del sitio.

En Divi 5, las llamadas a la acción pueden construirse mediante diferentes módulos y combinaciones de elementos. El objetivo no es simplemente colocar un botón, sino crear un punto dentro de la página que facilite al usuario tomar una decisión.

Qué es una llamada a la acción

Una llamada a la acción es un elemento que invita explícitamente al usuario a realizar una acción.

Algunos ejemplos habituales son:

• Solicitar presupuesto.
• Contactar con nosotros.
• Comprar ahora.
• Reservar una cita.
• Ver servicios.
• Descargar una guía.
• Crear una cuenta.
• Ver todos los productos.

La acción debe estar relacionada con el objetivo de la página y con el momento del recorrido en el que aparece.

CTA no significa únicamente botón

Uno de los errores más habituales es considerar que una llamada a la acción es simplemente un botón.

Un botón puede ser el elemento principal de una CTA, pero una llamada a la acción puede estar formada por varios elementos.

Por ejemplo, una sección puede incluir:

• Un título.
• Un texto explicativo.
• Una ventaja o beneficio.
• Un botón.

El conjunto funciona como una llamada a la acción porque proporciona contexto y conduce al usuario hacia una acción concreta.

Objetivo de una CTA

Antes de diseñar una llamada a la acción es importante definir qué queremos que haga el usuario.

Una página puede tener diferentes objetivos, pero cada CTA debería tener una función clara.

Por ejemplo, una página de servicios puede tener como objetivo principal que el usuario solicite un presupuesto. En ese caso, una CTA como Solicitar presupuesto será más clara que un botón genérico como Haz clic aquí.

Texto de la llamada a la acción

El texto del botón debe explicar de forma clara qué ocurrirá cuando el usuario haga clic.

Algunos textos habituales son:

• Solicitar presupuesto.
• Contactar ahora.
• Reservar cita.
• Ver precios.
• Comprar ahora.
• Descargar el catálogo.
• Conocer el servicio.

Es preferible utilizar textos específicos antes que expresiones genéricas.

Por ejemplo, Ver planes y precios proporciona más información que Más información.

Jerarquía visual

Una CTA debe destacar dentro de la composición, pero destacar no significa necesariamente utilizar colores llamativos o tamaños excesivos.

La jerarquía visual puede conseguirse mediante:

• Contraste.
• Tamaño.
• Espaciado.
• Posición.
• Tipografía.
• Color.
• Forma.

El usuario debe poder identificar rápidamente cuál es la acción principal de una sección.

CTA principal y CTA secundaria

Una página puede tener una acción principal y otras acciones secundarias.

Por ejemplo, una página de servicios podría utilizar:

• CTA principal: Solicitar presupuesto.
• CTA secundaria: Ver nuestros trabajos.

La diferencia visual entre ambas acciones ayuda a establecer una jerarquía.

Si todos los botones tienen exactamente el mismo peso visual, el usuario puede tener dificultades para identificar cuál es la acción más importante.

Color de las llamadas a la acción

El color es uno de los recursos más utilizados para destacar botones y llamadas a la acción.

Sin embargo, no existe un color universal que convierta mejor en todos los sitios web.

Lo importante es conseguir suficiente contraste respecto al fondo y mantener la coherencia con la identidad visual del proyecto.

Si un sitio utiliza un color corporativo como principal, ese color puede utilizarse para las acciones importantes siempre que proporcione suficiente contraste y no se confunda con otros elementos.

Posición de la CTA

La posición de una llamada a la acción puede influir en su visibilidad.

Una CTA puede aparecer:

• En la cabecera.
• En la sección principal o hero.
• Después de explicar un servicio.
• Después de presentar beneficios.
• Después de mostrar testimonios.
• Al final de una página.

La posición adecuada dependerá del contexto y del nivel de información que necesita el usuario antes de tomar la decisión.

CTA en la sección hero

En muchas páginas comerciales, la primera llamada a la acción aparece dentro de la sección hero.

El usuario puede encontrar:

• Un título principal.
• Una propuesta de valor.
• Una breve explicación.
• Una CTA principal.
• Una CTA secundaria.

Esta estructura permite comunicar rápidamente qué ofrece la empresa y cuál es el siguiente paso recomendado.

CTA después de explicar un servicio

Cuando una página explica un servicio, puede ser recomendable colocar una llamada a la acción inmediatamente después de presentar sus beneficios.

En ese momento el usuario ya ha recibido información suficiente para comprender la propuesta y puede estar preparado para avanzar.

Por ejemplo:

¿Necesitas una página web profesional?

Solicita presupuesto sin compromiso.

La CTA aparece como continuación natural de la información anterior.

Evitar demasiadas llamadas a la acción

Una página no mejora necesariamente por tener muchos botones.

Si cada bloque utiliza una llamada a la acción diferente, el usuario puede recibir demasiadas instrucciones y perder de vista el objetivo principal.

Es preferible establecer una jerarquía clara y repetir estratégicamente la acción principal cuando sea necesario.

Repetir una CTA

Repetir una llamada a la acción no significa necesariamente saturar la página.

En páginas largas puede tener sentido ofrecer varias oportunidades para realizar la acción principal.

Por ejemplo, una landing page extensa puede incluir una CTA al principio, otra después de explicar los beneficios y otra al final.

La clave es que cada aparición se encuentre en un punto lógico del recorrido del usuario.

Diseño del botón

En Divi 5 puedes controlar numerosos aspectos visuales del botón utilizado como CTA.

Entre ellos se encuentran:

• Tipografía.
• Tamaño del texto.
• Color del texto.
• Color de fondo.
• Espaciado interno.
• Bordes.
• Radio de las esquinas.
• Sombra.
• Iconos.
• Estados interactivos.

Estos controles permiten crear botones coherentes con el sistema visual del sitio.

Espaciado alrededor de la CTA

El espacio que rodea a una llamada a la acción es tan importante como el propio botón.

Si el botón está demasiado cerca de otros elementos, puede perder importancia visual.

Un margen adecuado permite separarlo del contenido anterior y posterior y facilita su identificación.

Hover y estados interactivos

Una llamada a la acción puede cambiar visualmente cuando el usuario coloca el cursor sobre ella.

Este comportamiento, conocido como hover, proporciona una señal visual de que el elemento es interactivo.

El cambio debe ser perceptible pero sutil. No es necesario utilizar efectos excesivamente llamativos.

En dispositivos táctiles no existe el mismo comportamiento de hover que en un ordenador, por lo que el botón debe seguir siendo perfectamente comprensible sin depender de este efecto.

Tamaño y área de interacción

Los botones deben tener un tamaño suficiente para que puedan utilizarse cómodamente.

Esto es especialmente importante en dispositivos móviles, donde el usuario interactúa con los dedos.

Un botón demasiado pequeño puede provocar errores de interacción y empeorar la experiencia.

CTA responsive

Una llamada a la acción debe revisarse en diferentes tamaños de pantalla.

En escritorio puede funcionar correctamente un botón colocado junto a otro elemento, mientras que en móvil puede ser necesario colocarlo en una posición diferente o aumentar su tamaño.

Divi permite utilizar ajustes específicos para diferentes dispositivos, por lo que es posible adaptar la presentación de la CTA sin tener que crear una versión completamente independiente.

CTA de ancho completo en móvil

En determinados diseños puede ser útil utilizar botones más anchos en dispositivos móviles.

Esto facilita la interacción táctil y proporciona una zona de clic más cómoda.

Sin embargo, el botón debe mantener márgenes laterales adecuados y no ocupar innecesariamente todo el ancho de la pantalla.

CTA y accesibilidad

Las llamadas a la acción deben ser accesibles para todos los usuarios.

El texto del botón debe ser comprensible y no depender exclusivamente del color para transmitir su significado.

También es importante mantener un contraste suficiente entre el texto y el fondo y proporcionar un área de interacción adecuada.

Los textos genéricos como Haz clic aquí suelen ser menos descriptivos que acciones concretas como Descargar guía de Divi 5.

CTA y conversión

Una llamada a la acción facilita el paso entre la intención del usuario y la acción que queremos que realice.

Sin embargo, una CTA por sí sola no garantiza una conversión.

Su efectividad depende también de factores como:

• La propuesta de valor.
• La confianza que transmite la página.
• La información disponible.
• El precio.
• La facilidad del proceso.
• La relevancia de la oferta.
• La experiencia de usuario.

Por este motivo, diseñar una CTA debe formar parte de una estrategia global de la página.

Microconversiones

No todas las llamadas a la acción tienen como objetivo conseguir una venta inmediata.

Algunas buscan conseguir una acción intermedia, conocida como microconversión.

Por ejemplo:

• Descargar un documento.
• Ver un vídeo.
• Consultar una página de servicios.
• Suscribirse a una newsletter.
• Añadir un producto al carrito.
• Solicitar más información.

Estas acciones pueden formar parte del recorrido que finalmente conduce a una conversión principal.

CTA y contenido

Una buena llamada a la acción debe estar relacionada con el contenido que la precede.

Si acabamos de explicar un servicio de diseño web, una CTA como Solicitar presupuesto resulta coherente.

En cambio, una llamada a la acción que no guarda relación con el contenido puede generar confusión.

La CTA debe aparecer como una continuación natural del argumento de la página.

CTA y confianza

Antes de realizar determinadas acciones, el usuario puede necesitar señales de confianza.

Una CTA puede acompañarse de pequeños elementos que reduzcan la fricción, como:

• Sin compromiso.
• Respuesta en 24 horas.
• Pago seguro.
• Cancelación gratuita.
• Sin permanencia.

Estas indicaciones deben ser reales y utilizarse únicamente cuando correspondan al servicio ofrecido.

Crear un sistema de CTA

En un proyecto profesional es recomendable definir un sistema de llamadas a la acción en lugar de diseñar cada botón de forma independiente.

Por ejemplo, puedes establecer:

• Un estilo para la CTA principal.
• Un estilo para la CTA secundaria.
• Un estilo para enlaces o acciones menos importantes.

De esta forma, el usuario aprende visualmente qué significa cada tipo de elemento interactivo.

Presets para botones y CTA

Los Presets de Divi 5 resultan especialmente útiles para este objetivo.

En lugar de configurar manualmente cada botón, puedes crear un preset para la CTA principal y reutilizarlo en diferentes páginas.

Si posteriormente modificas el diseño del preset, podrás mantener una apariencia coherente en todos los elementos que utilicen ese estilo.

Esto es especialmente importante en proyectos grandes y en trabajos de agencia donde se crean muchas páginas con estructuras similares.

Errores habituales

Utilizar textos genéricos

Expresiones como Haz clic aquí no explican claramente qué sucederá después del clic.

Utilizar demasiados botones

Una página llena de llamadas a la acción puede generar confusión y reducir la jerarquía visual.

No diferenciar acciones principales y secundarias

Si todos los botones tienen exactamente el mismo peso visual, resulta más difícil identificar la acción prioritaria.

Ignorar el móvil

Una CTA correctamente diseñada para escritorio puede resultar incómoda en una pantalla táctil si no se adapta correctamente.

Utilizar poco contraste

Un botón debe poder identificarse claramente respecto al fondo y al resto de elementos.

Diseñar la CTA sin contexto

El botón debe formar parte de un recorrido lógico y estar relacionado con el contenido que lo rodea.

Buenas prácticas para llamadas a la acción

• Define primero el objetivo de la acción.
• Utiliza textos claros y específicos.
• Establece una jerarquía entre CTA principales y secundarias.
• Utiliza suficiente contraste.
• Proporciona un área de interacción cómoda.
• Adapta los botones a dispositivos móviles.
• Utiliza hover de forma sutil.
• Evita saturar la página con botones.
• Repite la CTA principal únicamente cuando tenga sentido.
• Utiliza Presets para mantener la coherencia visual.

Las llamadas a la acción son una parte fundamental del diseño de una página web porque ayudan a convertir la navegación del usuario en acciones concretas.

En Divi 5, su diseño puede controlarse mediante diferentes módulos y opciones visuales, pero el aspecto más importante no es simplemente conseguir un botón atractivo. La CTA debe tener un objetivo claro, un texto descriptivo, una jerarquía adecuada y una buena adaptación a todos los dispositivos.

Cuando las llamadas a la acción se integran dentro de un sistema de diseño basado en Presets, además de mejorar la experiencia del usuario se consigue una mayor coherencia y eficiencia en el desarrollo del sitio.

El módulo Separador de Divi 5 permite introducir una línea u otro recurso visual destinado principalmente a dividir diferentes bloques de contenido. Aunque se trata de un elemento sencillo, utilizado correctamente puede mejorar la estructura visual de una página y ayudar al usuario a identificar diferentes áreas de contenido.

El separador no debe utilizarse simplemente para llenar espacios. Su función principal es establecer una división visual entre elementos que necesitan cierta separación, especialmente cuando esa división aporta información sobre la estructura de la página.

Qué es el módulo Separador

El módulo Separador permite crear una línea visual dentro de una página construida con Divi 5.

Puede utilizarse para dividir diferentes bloques, marcar cambios de contenido o añadir un elemento decorativo dentro de una composición.

Algunos usos habituales son:

• Separar bloques de contenido.
• Dividir diferentes apartados de una página.
• Marcar una transición entre secciones.
• Separar información dentro de una composición.
• Crear recursos decorativos.
• Reforzar la jerarquía visual.

Separador como elemento estructural

Una línea horizontal puede ayudar al usuario a interpretar la estructura de una página.

Por ejemplo, en una página con diferentes bloques de información, un separador puede marcar claramente dónde termina una sección y comienza otra.

Esto puede ser especialmente útil cuando los bloques tienen un diseño similar y necesitan una señal visual adicional que indique su separación.

Separador como elemento decorativo

No todos los separadores tienen una función estructural.

También pueden utilizarse como elementos decorativos para reforzar el lenguaje visual de un diseño.

Por ejemplo, una línea corta situada debajo de un título puede funcionar como recurso gráfico que aporta personalidad a la composición.

En este caso, el separador no necesariamente divide dos bloques de contenido, sino que forma parte de la identidad visual.

Cómo añadir un separador

Para añadir un separador en Divi 5:

1. Selecciona la sección y la fila donde quieres colocarlo.
2. Haz clic en Añadir módulo.
3. Selecciona el módulo Separador.
4. Configura el tipo y la apariencia de la línea.
5. Ajusta su tamaño y posición.
6. Configura los valores responsive si son necesarios.
7. Comprueba el resultado en los diferentes dispositivos.

Una vez colocado, el separador puede integrarse dentro de la estructura de la sección y combinarse con otros módulos.

Estilo de la línea

El aspecto de la línea debe adaptarse al diseño general del sitio.

Dependiendo de la configuración utilizada, podemos trabajar con diferentes grosores, estilos y colores.

Las líneas finas suelen funcionar bien en diseños minimalistas, mientras que una línea más gruesa puede utilizarse cuando el recurso tiene un protagonismo visual mayor.

La elección debe realizarse siempre teniendo en cuenta el resto de elementos de la página.

Grosor del separador

El grosor modifica considerablemente la percepción visual de la línea.

Un separador muy fino puede funcionar como una división sutil entre contenidos.

Un separador más grueso adquiere mayor presencia y puede convertirse en un elemento gráfico dentro de la composición.

En la mayoría de interfaces, no es necesario utilizar líneas excesivamente gruesas para conseguir una separación efectiva.

Longitud del separador

Un separador no tiene por qué ocupar todo el ancho disponible.

Una línea corta puede funcionar especialmente bien como elemento decorativo asociado a un título.

Por ejemplo, podemos colocar un pequeño separador debajo de un encabezado para reforzar visualmente el inicio de una sección.

En cambio, una línea de mayor longitud puede utilizarse para dividir bloques completos de contenido.

Separador a ancho completo

Un separador que ocupa todo el ancho de su contenedor puede ser útil para marcar una división clara entre diferentes bloques.

Es habitual utilizar este tipo de separador en listas, tablas, contenidos editoriales o composiciones donde necesitamos una línea continua.

Su uso debe ser moderado para evitar que la página parezca excesivamente fragmentada.

Separador corto decorativo

Los separadores cortos son frecuentes en diseños corporativos y páginas de servicios.

Pueden colocarse debajo de títulos o entre diferentes elementos para reforzar la identidad visual.

Por ejemplo:

• Título.
• Separador corto.
• Texto introductorio.

Este patrón permite crear una señal visual sencilla que puede repetirse en diferentes secciones.

Separadores y jerarquía visual

El separador puede ayudar a establecer una jerarquía entre diferentes bloques.

Sin embargo, no debe utilizarse para sustituir una estructura lógica de encabezados.

Un H2 o un H3 proporciona información semántica sobre el contenido, mientras que un separador únicamente proporciona una señal visual.

Por este motivo, primero debe construirse correctamente la estructura del contenido y después utilizar separadores cuando aporten valor visual.

Separadores y espaciado

Un separador no sustituye al espacio.

Cuando colocamos una línea entre dos bloques, normalmente también necesitamos establecer una separación adecuada antes y después de ella.

Si el separador está demasiado cerca de los contenidos, puede parecer pegado a uno de ellos.

Si existe demasiado espacio, puede parecer desconectado del contenido.

La combinación de línea + espacio debe considerarse como un único recurso visual.

Separadores dentro de una sección

Un separador puede utilizarse para dividir diferentes partes de una misma sección.

Por ejemplo, una sección de servicios podría contener:

• Título.
• Descripción.
• Separador.
• Características.
• CTA.

En este caso, la línea puede ayudar a distinguir la introducción de la información adicional.

Separadores entre secciones

También pueden utilizarse para marcar el cambio entre diferentes áreas de una página.

Sin embargo, cuando existe una separación clara mediante fondos, colores, padding o cambios de composición, añadir otra línea puede resultar innecesario.

El diseño debe evitar utilizar varios recursos para transmitir exactamente la misma información.

Separadores y diseño minimalista

En diseños minimalistas, los separadores pueden ser especialmente útiles porque permiten organizar el contenido sin recurrir a grandes elementos decorativos.

Una línea fina y discreta puede proporcionar suficiente estructura sin competir con los elementos principales.

En este tipo de diseño, el control del grosor, longitud y espacio alrededor de la línea es especialmente importante.

Separadores y diseño corporativo

En páginas corporativas, un separador puede utilizarse como parte del lenguaje visual de la marca.

Puede adoptar el color corporativo o utilizar una variante más discreta para mantener la jerarquía.

Si se utiliza de forma repetida, conviene mantener siempre los mismos criterios de diseño.

Separadores responsive

Los separadores también deben revisarse en diferentes tamaños de pantalla.

Una línea que funciona correctamente en escritorio puede resultar demasiado larga o demasiado prominente en móvil.

Divi permite utilizar ajustes específicos para diferentes dispositivos cuando sea necesario.

En la mayoría de los casos, una línea sencilla puede adaptarse automáticamente al ancho disponible, pero siempre conviene comprobar visualmente el resultado.

Separadores y accesibilidad

Un separador puramente decorativo no debe convertirse en un elemento imprescindible para comprender el contenido.

La estructura semántica de la página debe seguir siendo comprensible aunque eliminemos las líneas decorativas.

Esto es especialmente importante porque diferentes usuarios pueden experimentar la página de maneras distintas.

El separador debe reforzar la estructura visual, no ser el único recurso que indique cómo está organizada la información.

Separadores y SEO

El separador no tiene un valor SEO directo significativo.

Su función es principalmente visual y relacionada con la experiencia de usuario.

Por este motivo, no debemos utilizar separadores pensando que mejorarán por sí mismos el posicionamiento de una página.

El SEO dependerá principalmente de aspectos como la calidad del contenido, la estructura semántica, la relevancia, la experiencia de usuario, el rendimiento y otros factores técnicos.

Separador frente a borde

En determinados diseños, una línea puede conseguirse utilizando un borde en lugar del módulo Separador.

Por ejemplo, una tarjeta puede utilizar un borde inferior para dividir visualmente su contenido.

En estos casos, el borde puede ser más apropiado porque forma parte del propio elemento.

El módulo Separador tiene más sentido cuando la línea debe funcionar como un elemento independiente dentro de la estructura.

Separador frente a Espaciador

El Espaciador y el Separador tienen funciones diferentes.

El espaciador crea espacio vacío, mientras que el separador introduce una señal visual que divide o decora.

En ocasiones pueden utilizarse conjuntamente:

• Espacio superior.
• Separador.
• Espacio inferior.

Esta combinación permite controlar tanto la posición de la línea como la distancia respecto al contenido.

Uso de separadores en listas

Los separadores pueden utilizarse para dividir elementos repetitivos, aunque no siempre son necesarios.

Por ejemplo, una lista de servicios puede utilizar líneas sutiles entre cada elemento para facilitar la identificación de los diferentes bloques.

Si los elementos ya están suficientemente separados mediante espacio, añadir líneas puede generar un resultado visual demasiado cargado.

Separadores y Presets

Cuando un separador forma parte de la identidad visual de un sitio, puede ser interesante establecer un estilo coherente para todos los separadores utilizados en el proyecto.

Por ejemplo, podemos definir una combinación concreta de color, grosor y longitud para los separadores decorativos utilizados debajo de los encabezados.

De esta forma, las diferentes páginas mantendrán un lenguaje visual común.

Errores habituales

Utilizar separadores en exceso

Si cada bloque de una página está separado por una línea, el diseño puede resultar demasiado fragmentado.

Utilizar líneas demasiado gruesas

Un separador excesivamente grueso puede competir visualmente con los títulos y otros elementos importantes.

No dejar espacio alrededor

La línea necesita una separación adecuada respecto al contenido que divide.

Utilizar líneas cuando no son necesarias

Si el fondo, el espacio o la estructura ya separan correctamente los bloques, añadir otra línea puede resultar redundante.

Utilizar el separador para sustituir una estructura semántica

Una línea no sustituye a los encabezados ni a una organización lógica del contenido.

No mantener coherencia

Si cada separador de una web tiene un diseño diferente, puede perderse la sensación de unidad visual.

Buenas prácticas con Separadores en Divi 5

• Utiliza separadores cuando aporten estructura o valor visual.
• Evita utilizarlos entre todos los bloques.
• Controla cuidadosamente su grosor.
• Utiliza una longitud coherente con su función.
• Deja espacio suficiente antes y después.
• Adapta su presentación a dispositivos pequeños cuando sea necesario.
• No dependas del separador para transmitir información estructural.
• Utiliza bordes cuando la línea pertenezca al propio elemento.
• Mantén un estilo coherente en todo el sitio.
• Prioriza la simplicidad en diseños minimalistas.

El módulo Separador de Divi 5 permite introducir líneas y divisiones visuales que ayudan a organizar el contenido y reforzar el diseño de una página.

Aunque se trata de un módulo sencillo, su utilización debe responder a una finalidad concreta. Un buen separador puede mejorar la jerarquía y facilitar la lectura, mientras que un exceso de líneas puede hacer que la página resulte fragmentada y visualmente pesada.

La clave está en combinar correctamente separadores, espacios, estructura y jerarquía tipográfica para conseguir una composición equilibrada.

Cuando los separadores forman parte de un sistema visual coherente, pueden convertirse en un recurso sencillo pero efectivo para mantener la identidad y consistencia de un sitio creado con Divi 5.