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.
Un layout define principalmente cómo está organizada una página.
Por ejemplo:
Hero
↓
Beneficios
↓
Servicios
↓
Testimonios
↓
Preguntas frecuentes
↓
CTALos 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íaDe esta forma, un layout puede proporcionar la estructura y los presets adaptar su apariencia al proyecto.
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.
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 FINALEl layout determina dónde están los elementos y los presets ayudan a determinar cómo deben verse.
Imagina que importas un layout diseñado originalmente con colores azules y una determinada tipografía.
Tu proyecto utiliza una identidad corporativa diferente:
En lugar de reconstruir el layout desde cero, puedes utilizarlo como estructura y adaptar los elementos mediante tus presets.
Para obtener mejores resultados, es recomendable definir el sistema visual antes de importar y personalizar numerosos layouts.
Como mínimo, deberías tener definidos:
Una vez definidos estos elementos, puedes utilizarlos de forma consistente en las páginas creadas a partir de layouts.
Los textos son uno de los elementos que más se repiten en una página.
Un preset puede establecer características como:
De esta forma, los textos de diferentes páginas pueden mantener una apariencia coherente aunque procedan de layouts distintos.
Los encabezados también deben formar parte del sistema visual.
Por ejemplo:
H1
↓
Título principal
H2
↓
Título de sección
H3
↓
SubapartadoDefinir estos estilos mediante presets ayuda a evitar que cada layout utilice tamaños y tipografías completamente diferentes.
Los botones son especialmente importantes porque suelen aparecer en diferentes zonas del sitio.
Un preset puede establecer:
Así, un botón procedente de un layout puede adaptarse al lenguaje visual del sitio.
Además de textos y botones, los presets pueden utilizarse para elementos que aparecen repetidamente dentro del proyecto.
Por ejemplo:
Esto permite que diferentes layouts compartan determinados patrones visuales.
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.
Un problema habitual al utilizar diseños predefinidos es terminar con una web visualmente inconsistente.
Por ejemplo, una página puede utilizar:
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 pueden actuar como una capa que ayuda a normalizar el diseño.
Layouts diferentes
↓
Estructuras diferentes
↓
Presets comunes
↓
Estilo visual coherenteEsto es especialmente útil cuando utilizas diseños procedentes de diferentes fuentes.
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:
Y adaptar:
Esto reduce considerablemente el tiempo necesario para adaptar diseños.
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.
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 finalLa plantilla proporciona una base y los presets ayudan a mantener el sistema visual.
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-eTodas las páginas pueden tener estructuras ligeramente diferentes pero compartir:
Esto proporciona una experiencia visual mucho más consistente.
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
↓
EntregaEn lugar de comenzar cada proyecto desde cero, puedes partir de estructuras y estilos previamente preparados.
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:
Esto evita crear un sistema excesivamente complejo.
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.
Cuando trabajes con layouts procedentes de diferentes fuentes, conviene revisar qué estilos incorporan antes de aplicar modificaciones.
Comprueba especialmente:
Así podrás identificar qué elementos deben adaptarse al sistema visual del proyecto.
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
└── FormulariosEsta combinación puede convertirse en una base de trabajo reutilizable para futuros proyectos.
Una metodología sencilla para combinar layouts y presets en Divi 5 sería:
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.
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
