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.
Podemos dividir los layouts de Divi 5 en tres grandes grupos:
Cada uno tiene una finalidad diferente y puede utilizarse como punto de partida según el tipo de página que quieras construir.
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
└── ContactoAl importar este tipo de diseño, obtienes una estructura amplia sobre la que puedes trabajar directamente.
Los layouts completos son especialmente útiles cuando necesitas crear rápidamente una página con una estructura convencional.
Pueden resultar interesantes para:
También pueden utilizarse como referencia para estudiar cómo está organizada una página y posteriormente modificarla completamente.
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:
Sin embargo, no significa que el layout deba mantenerse exactamente igual.
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ónEste tipo de layout resulta especialmente útil cuando ya tienes una página estructurada y únicamente necesitas añadir un determinado bloque.
Una biblioteca de secciones puede incluir elementos como:
En lugar de importar una página completa, puedes seleccionar únicamente la estructura que necesitas.
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
↓
FooterEsto permite combinar elementos propios con diseños previamente preparados.
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:
Por este motivo, una landing page suele tener una estructura diferente a una página corporativa convencional.
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ónEl objetivo es conducir progresivamente al usuario hacia la acción que queremos conseguir.
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:
La estructura visual debe facilitar que el usuario comprenda la propuesta y sepa qué hacer a continuación.
| Tipo de layout | Objetivo | Uso habitual |
|---|---|---|
| Layout completo | Crear una página completa | Webs corporativas, servicios y páginas informativas |
| Sección suelta | Añadir un bloque concreto | Complementar páginas existentes |
| Landing page | Conseguir una acción | Ventas, contactos, registros y campañas |
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 personalizadaEste sistema permite aprovechar las ventajas de cada recurso.
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:
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.
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
└── ContactoDe esta forma, cuando necesites construir una nueva página, puedes seleccionar rápidamente los bloques que necesitas.
También puedes conservar páginas completas que hayas diseñado y que puedan servir como base para futuros proyectos.
Por ejemplo:
Con el tiempo, esta colección puede convertirse en una herramienta de productividad muy importante.
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áginaEl objetivo no es copiar páginas indiscriminadamente, sino aprovechar estructuras que ya han demostrado ser útiles.
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 finalLa 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.
Como regla general:
En muchos proyectos la mejor solución será combinar los tres.
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.
Rellena la mayor cantidad de datos posibles y acepta las políticas de privacidad para obtener más información de nuestros servicios:
© 2009-2025 webkamy diseño de páginas web y seo
