Dominar la relación dorada en el diseño

Su diseño se ve casi bien, pero algo se siente fuera. El espacio parece incómodo. Las proporciones no funcionan. Ajuste los márgenes y el relleno, pero esa sensación de desequilibrio persistente permanece. La pieza faltante podría ser la relación dorada.

Este principio matemático ha guiado un gran diseño durante siglos. Y, nuestros ojos, naturalmente, prefieren estas proporciones específicas. La mayoría de los diseñadores se saltan las proporciones doradas o las aplican mal por lo difícil que es romper. Sin embargo, con un constructor de páginas como Divi 5, puede aplicar proporciones perfectas sin cálculos complejos.

Averigüemos más.

¿Cuál es la relación dorada?

La relación dorada es igual a

1.618.

¿De dónde vino? Obtiene este número cuando divide una línea en dos partes, donde la parte más larga dividida por la parte más corta es igual a toda la línea dividida por la parte más larga.

Puede calcular la relación dorada usando la secuencia Fibonacci. Comience con 0 y 1. Agreglos para obtener 1. Luego agregue 1 y 1 para obtener 2. Sigue agregando los dos últimos números: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144. Cuando divide cualquier número mayor por el número anterior, se acerca a 1.618.

Esta proporción aparece en todas partes en la naturaleza. Las espirales de semillas de girasol lo siguen. Las conchas de Nautilus crecen usando estas proporciones. Incluso su cara probablemente sigue las mediciones de la relación dorada entre sus características. Cuando algo sigue esta proporción, su cerebro lo reconoce como naturalmente agradable.

Imágenes cortesía: Lucas y Dynamic Wang en Unsplash y Milena Carolina Dos Santos Mangueira

El símbolo φ (Phi) representa una relación matemática única que los antiguos griegos descubrieron alrededor de 300 a. C. Se refirieron a él como la "proporción divina", creyendo que reveló un equilibrio y belleza visual especiales.

Por qué es importante: desde edificios antiguos hasta diseño web

Los griegos utilizaron esta proporción para el Templo del Partenón, y las pirámides egipcias siguen estas mediciones. Artistas como Leonardo da Vinci estudiaron estas proporciones durante años. Da Vinci dibujó al famoso "hombre vitruviano", que muestra las proporciones doradas en el cuerpo humano.

Imagen representativa

Los diseñadores bien establecidos todavía usan esto. El logotipo de Apple usa las proporciones de la relación dorada. El antiguo logotipo de Twitter Bird siguió estas medidas. Las revistas colocan contenido importante en puntos de oro en lugar de justo en el centro.

Imágenes Cortesía: Widewalls & Design Shack

Los científicos estudiaron por qué a las personas les gustan las formas de la relación dorada. Los escaneos cerebrales muestran más actividad en las áreas de placer cuando las personas miran los rectángulos de relación dorada. Esto es inherente a los humanos, ya que esto sucede en todas las culturas y edades.

Su cerebro procesa estas proporciones más rápido que otras proporciones, lo que significa una mejor experiencia de usuario. Cuando las proporciones del sitio web se alejan demasiado de 1.618, los visitantes se sienten incómodos y se van antes.

La proporción crea equilibrio sin ser perfectamente uniforme. La simetría perfecta puede parecer aburrida en los sitios web. La relación dorada ofrece suficiente asimetría para crear interés visual mientras mantiene el aspecto limpio y profesional que los usuarios esperan.

Por qué sus diseños se sienten "apagados" (y cómo las proporciones solucionan esto)

Acabas de pasar horas perfeccionando tu diseño. Los colores son correctos. Las fuentes trabajan juntas. Pero algo todavía se siente fuera. La barra lateral parece demasiado ancha. El encabezado se ve un poco apretado. El área de contenido no fluye con el resto.

Esta es una experiencia común. Muchos diseñadores ajustan los tamaños en función de lo que se siente bien en el momento. Tal vez establece el contenido principal en 70 por ciento y la barra lateral al 30 por ciento. Estos números suenan razonables, pero no siempre se ven naturales.

Nuestros ojos buscan equilibrio y patrones familiares. Cuando las proporciones no son del todo correctas, todo el diseño se siente incómodo, incluso si no puede explicar por qué. Puede que no sea un gran error, solo un pequeño detalle que te perturba.

El verdadero problema es a menudo proporción. Cuando los diseños ignoran lo que se siente equilibrado, su cerebro se da cuenta. Algo se siente fuera, incluso si no puedes decirlo.

Cómo las relaciones equivocadas Sabotaje Experiencia del usuario

Las malas proporciones hacen que las cosas se vean extrañas. Tu cerebro espera que ciertas formas y tamaños vayan bien juntas. Imagine una sección de héroes que ocupa exactamente la mitad de su pantalla. Se ve rígido e incómodo.

Ahora, considere uno que usa el 43 por ciento o el 67 por ciento del espacio. Eso parece desequilibrado y desordenado.

Esto puede dañar su sitio web. La gente decide muy rápido si confían en lo que ven. Si la página mira, podrían pensar que su negocio no es confiable. El diseño desordenado hace que la gente crea que su trabajo no es bueno.

La relación dorada puede ayudar a solucionar esto. En lugar de hacer que la sección del 70 por ciento de su héroe, pruebe el 61.8 por ciento, dejando la siguiente sección 38.2 por ciento visible.

Estos números no son aleatorios. Siguen un patrón especial llamado 1.618 que se ve en la naturaleza, como en flores y conchas. Tus ojos saben este patrón y se sienten tranquilos cuando lo ven.

El truco es cómo las partes se relacionan entre sí. Todo se siente bien si el tamaño de su encabezado coincide con su área de contenido usando la relación dorada. Su pie de página, menú y contenido comienzan a encajar en lugar de parecer que están luchando por el espacio.

Cómo calcular las proporciones de la relación de oro

No necesitas matemáticas elegantes. Solo recuerde 62 y 38. Estos números suman 100, por lo que funcionan como porcentajes.

Divida cualquier espacio dando 62% a la parte más grande y 38% a la parte más pequeña. Su sitio web tiene 1000 píxeles de ancho. Haga su contenido principal 620 píxeles. Pon tu barra lateral en 380 píxeles. Relación dorada perfecta.

Tengo una sección de 500 píxeles de altura. Su área principal tiene 310 píxeles. El resto recibe 190 píxeles.

Reglas rápidas para piezas del sitio web

La sección de héroes debe tomar alrededor del 60% de lo que la gente ve primero. El resto va a su vista previa de contenido principal. Haga tarjetas 60% tan altas como las que son amplias. Una tarjeta de 300 píxeles de ancho se convierte en 180 píxeles de altura.

Los botones funcionan de la misma manera. Un ancho de 100 píxeles significa una altura de 60 píxeles. Su columna de texto tiene 600 píxeles de ancho. Deje de agregar contenido alrededor de 370 píxeles hacia abajo. Luego agregue su siguiente sección.

¿Se ve bien?

Retrocede de su pantalla. Las piezas deben sentirse equilibradas ahora. Su ojo fluye suavemente de sección a otra. Si sigues mirando un lugar, las proporciones podrían estar apagadas.

Los sitios web populares usan estas mismas 62/38 divisiones en todas partes. Comenzará a ver el patrón una vez que sepa qué buscar. Las matemáticas permanecen ocultas, pero la armonía visual se destaca de inmediato.

Los errores de la relación de oro común que cometen los diseñadores

La mayoría de los diseñadores saben que la relación dorada existe y quieren usarla. Aquí es donde comúnmente luchan.

El mayor error es aplicar las relaciones al azar sin un sistema. Utiliza relaciones doradas para su encabezado, tercios para su cuadrícula de contenido y porcentajes aleatorios para su pie de página. Elija un enfoque y úselo constantemente en su diseño.

Muchos diseñadores redondean 1.618 a números fáciles como 1.5 o 1.7. Su cerebro nota la diferencia entre 62% y 60%, y esa pequeña brecha afecta la armonía visual que está trabajando para crear.

Otro problema común son los elementos de la relación de falta de coincidencia. Por ejemplo, puede crear una sección de héroes perfectamente proporcionada, pero luego agregar una galería de imágenes que usa relaciones de espaciado completamente diferentes. La desconexión visual rompe el flujo que estableció.

Algunos diseñadores aplican la relación dorada al texto sin considerar la comodidad de lectura. Una longitud de línea que sigue a las proporciones matemáticas perfectas podría exceder el ancho de lectura cómodo. La legibilidad tiene prioridad sobre la precisión matemática.

Los diseñadores web también a menudo pasan por alto la capacidad de respuesta. Las proporciones de escritorio que se ven equilibradas pueden sentirse estrechas o estiradas en pantallas más pequeñas. Las proporciones de oro necesitan diferentes aplicaciones en todos los tamaños de dispositivo.

Muchos constructores de páginas predeterminados a diseños arbitrarios que ignoran la armonía proporcional. Las cuadrículas estándar de tres columnas usan divisiones 33/33/33 en lugar de relaciones más naturales.

El error más limitante es abandonar el enfoque después de los intentos iniciales. Las proporciones de oro funcionan mejor cuando se aplican sistemáticamente en su estructura de diseño, no como ajustes aislados.

¿Por qué muchos constructores de páginas ignoran las proporciones doradas?

Los constructores de páginas crecieron en torno al pensamiento del programador. Los desarrolladores aman los números que se dividen limpiamente. Doce columnas, cuatro secciones, divisiones de cincuenta y cincuenta.

Muchas empresas de constructor realmente creen que los usuarios deberían controlar sus propias opciones de diseño. No quieren impulsar teorías estéticas específicas en personas que puedan preferir diferentes enfoques. Algunos diseñadores odian la relación dorada y prefieren otros sistemas de proporción. ¿Por qué forzar un principio matemático cuando la creatividad prospera en las opciones?

El verdadero problema técnico es más desordenado que la filosofía de diseño. Las proporciones doradas crean decimales extraños que se rompen en dispositivos más antiguos. Intente construir una cuadrícula receptiva donde una columna tenga un 61.8% de ancho. Porcentajes limpios como el 25% o el 33% se comportan previsiblemente en cada dispositivo.

La mayoría de las empresas de constructor de páginas comenzaron como soluciones técnicas, no herramientas de diseño. Se construyen alrededor de diseños sistemáticos y lógicos que funcionan de manera confiable.

Los usuarios rara vez se quejan de proporciones. Se quejan de diseños móviles rotos y tiempos de carga lenta. Las prioridades de la empresa siguen la retroalimentación real de los usuarios, no la teoría del diseño.

Algunos constructores se preocupan por principiantes abrumadores. Los nuevos usuarios ya enfrentan docenas de opciones de diseño, y agregar consideraciones matemáticas podría asustar a las personas que solo quieren algo limpio y profesional.

Construyendo proporciones perfectas con Divi 5

Antes de sumergirnos en las decas de cómo Divi 5 convierte el diseño de la relación dorada de un dolor de cabeza matemático en simplicidad de apuntar y hacer clic, tomemos un breve desvío y comprendamos lo que hace que Divi sea la opción para los diseñadores de WordPress que desean resultados profesionales sin la pesadilla de codificación.

¿Qué es Divi?

Divi es un constructor de páginas de WordPress diseñado para personas que se preocupan por el diseño visual sin comprometer las características.

Puede arrastrar y dejar más de 200 módulos, cambiar de texto y elegir nuevos colores. Todo sucede en su página, para que vea exactamente lo que los visitantes verán.

El tema viene lleno de más de 2000 diseños prefabricados. Estas no son plantillas básicas, sino diseños completos para restaurantes, fotógrafos, consultores y docenas de otras empresas. Elija uno que se ajuste a su estilo y personalice desde allí.

Si vende productos en línea, Divi incluye más de 20 módulos hechos específicamente para tiendas. Sus páginas de productos se verán profesionales y realmente ayudarán a convertir los navegadores en compradores.

Crear sitios web sin los dolores de cabeza

El constructor de temas le permite diseñar cada parte de su sitio. Puede crear encabezados personalizados que coincidan con su marca, creen diseños de blog únicos e incluso haga que sus 404 páginas se vean increíbles.

Divi Ai trae la conveniencia de AI directamente a su lienzo de diseño. Puedes generar texto,

imágenes,

código,

y secciones de página enteras usando Divi ai.

Incluso puede editar sus fotos existentes simplemente describiendo lo que necesita.

Los sitios rápidos de Divi resuelven el mayor problema que enfrentan los constructores de sitios web: mirar una página en blanco sin saber por dónde empezar. Puede elegir entre sitios de inicio profesionales, que tienen plantillas de sitios web profesionales, creadas por nuestro equipo de diseño y presenta imágenes y obras de arte únicas que no encontrará en ningún otro lugar.

O deje que Divi AI cree diseños personalizados basados ​​en la descripción de su negocio.

Este sitio web generado por IA no es solo una estructura alámbrica. Contendrá encabezados, copias e imágenes relevantes según su descripción. Puede pedirle a Divi AI que genere todas las imágenes, use una de Unsplash o use a los marcadores de posición para que pueda reemplazarlas usted mismo.

Incluso puede pre-seleccionar sus fuentes y colores y dejar que la IA corra con ellas. Y, por supuesto, los sitios web siguen siendo editables al igual que los sitios web regulares, por lo que puede ajustar lo que necesite según su gusto.

Obtener Divi

Divi 5: el siguiente paso

La creación de sitios web debe sentirse natural, como dibujar ideas en papel. Tiene una visión, y sus herramientas deberían ayudarlo a darle vida sin interponerse en el camino. Eso es exactamente lo que nos llevó a reconstruir Divi desde cero por completo.

Divi 5, disponible hoy como un alfa y listo para ser utilizado en nuevos sitios web , representa años de escuchar lo que necesita al crear sitios web. No son campanas y silbatos o características que nadie usa realmente, sino mejoras reales las que hacen que su trabajo sea más rápido y agradable. Mantuvimos todo lo que amas de Divi y lo llevamos al siguiente nivel.

Reconstruimos todo desde cero usando nuevas herramientas web. Las páginas se cargan más rápido ahora, y los controles funcionan mejor. Puede mantener sus diseños iguales en todo su sitio sin trabajo adicional.

¿Qué ha mejorado? ¿Qué hay de nuevo?

• El marco completo reconstruye los viejos códigos cortos. Todo se ejecuta en un nuevo código basado en bloque que se carga más rápido y funciona mejor.
• La edición de un solo clic le permite hacer clic en cualquier parte de su página para editarla de inmediato. No más caza de pequeños iconos o cavando a través de los menús.
• Los puntos de interrupción personalizables le dan siete tamaños de pantalla para trabajar en lugar de tres. Puede cambiar cada uno para satisfacer sus necesidades exactas.
• El soporte de unidades avanzadas le permite usar calc (), clamp (), min (), max () y todas las nuevas unidades CSS directamente en el constructor.
• Las variables de diseño le permiten guardar colores, fuentes, tamaños, imágenes, texto y enlaces en un solo lugar. Cámbialos una vez, y se actualizarán en todas partes en su sitio.
• Los preajustes del grupo de opciones le permiten guardar y reutilizar estilos para bordes, fuentes, sombras y espacios. Estos funcionan en diferentes partes de su sitio.
• Las filas anidadas te permiten colocar filas dentro de otras filas. Puede construir diseños complejos sin secciones especiales.
• Los grupos de módulos combinan varios módulos en una unidad. Esto hace que los diseños complejos sean más fáciles de administrar. También puede hacer sus módulos personalizados.
• El espacio de trabajo de múltiples paneles le permite colocar paneles donde los desea. Puede trabajar con varias configuraciones abiertas al mismo tiempo.
• Atribute Management le brinda control exacto cuando copia, pega y restablece estilos, contenido y preajustes entre diferentes partes.
• El modo Light/Dark te permite elegir el tema que es más fácil para tus ojos mientras trabajas.
• La escala de lienzo le permite cambiar el tamaño de su área de trabajo para ver cómo se ve su sitio en diferentes pantallas. No es necesario cambiar los modos de vista previa.
• Las mejoras de rendimiento hacen que las páginas se carguen más rápido, muestren más rápido y se sientan más suaves cuando está construyendo.

Prueba Divi 5 hoy

Divi 5 ahora está disponible para nuevos proyectos de sitios web. Lo reconstruimos desde cero para hacer que su flujo de trabajo sea más rápido y más fácil. Descargue el Alpha Public y pruébelo en su próximo nuevo sitio para ver las mejoras. Es gratis para todos los miembros de Divi, nuevos y viejos.

Sugerimos usarlo solo para nuevos sitios mientras mejoramos el sistema de migración para los sitios Divi 4 existentes. Si está comenzando de nuevo, ahora es un buen momento para probar la interfaz actualizada y un mejor rendimiento.

Cómo usar proporciones doradas usando Divi 5

Suficiente dicho. Hagamos una inmersión profunda y veamos cómo podemos implementar las proporciones doradas en su sitio web usando Divi 5 y, mejor aún, cómo se pueden estandarizar para que no tenga que revolverse con matemáticas cada vez que crea una nueva sección o página.

Las variables de diseño le permiten guardar y reutilizar valores en su sitio. Forman el ADN de identidad visual de su sitio. Divi 5 tiene seis tipos: colores, fuentes, imágenes, cadenas de texto, enlaces y números. Cada uno tiene un papel específico:

• Las variables de color contienen colores de marca, fondos, colores de texto y otros tonos utilizados en todo el sitio.
• Las variables de fuentes mantienen las fuentes consistentes para encabezados, texto del cuerpo y elementos especiales.
• Las variables de imagen almacenan gráficos comunes como logotipos o patrones de fondo para facilitar su uso.
• Las variables de cadena de texto guardan contenido reutilizable como lemas, contactos y notas legales.
• Las variables de enlace mantienen las URL que usa a menudo, como las redes sociales o las páginas clave.
• Las variables numéricas manejan las mediciones en píxeles, porcentajes, EMS, REMS y unidades de ventana gráfica y trabajan con funciones CSS como Calc () para mantener las proporciones directamente en cualquier pantalla.

Configuración de sus variables doradas

Abra su tablero Divi 5 y busque el icono de administrador de variables en la barra lateral izquierda.

Haga clic para abrir el panel Variables. Agregue sus colores, fuentes, imágenes, texto y variables de enlace.

Luego, vaya a la pestaña Números para crear sus variables de relación dorada. Comience agregando estas variables numéricas:

Variables de tipografía

• Tamaño H1: Clamp (47px, 4.7VW, 76px)
  • 47px Mínimo: incluso en los teléfonos más pequeños (320 px de ancho), su H1 se mantiene lo suficientemente grande como para establecer la jerarquía. Cualquier cosa más pequeña pierde el impacto como un encabezado principal.
  • Valor medio de 4.7VW: esta unidad de ancho de la visión hace que el texto se escala sin problemas. Al ancho de la pantalla de 1000px, 4.7VW = 47px. A 1600px, crece a 75px
  • 76px máximo: obtenemos esto multiplicando 18px × 1.618 tres veces (18 × 1.618 × 1.618 × 1.618 = 76.244px)
• Tamaño H2: Clamp (29px, 3.5VW, 47px)
  • 29px Mínimo: mantiene H2 notablemente más pequeño que H1 en el móvil mientras se mantiene legible
  • Escala de 3.5 VW: escalado proporcionalmente más pequeño que H1 para mantener la jerarquía
  • 47px máximo: exactamente 76px ÷ 1.618 = 47.122px
• Tamaño H3: Clamp (18px, 2.9VW, 29px)
  • 18px mínimo: coincide con el tamaño del texto del cuerpo en el móvil para guardar el espacio vertical
  • Escalado de 2.9 VW: crece más suavemente que los encabezados más grandes
  • 29px máximo: precisamente 47px ÷ 1.618 = 29.124px
• Tamaño H4: Clamp (14px, 2.2VW, 22.4px): Continúe dividiendo ~ 29px ÷ 1.618 = 17.994px, pero establecemos un mínimo a 22.4px para su legibilidad
• Tamaño H5: Clamp (13px, 1.8VW, 18px): nuestro tamaño de fuente base de 18px se ajusta perfectamente a la escala aquí
• Tamaño del texto del cuerpo: abrazadera (16px, 1.6vw, 18px): base estándar 18px que todos los cálculos provienen de

La función Clamp () permite cambiar el tamaño del texto sin problemas entre las pantallas. Se necesitan tres valores: el tamaño más pequeño para los teléfonos, el valor medio para la escala y el más grande para escritorios. Usamos el ancho de la vista (VW) en el medio porque hace que el texto crezca gradualmente a medida que las pantallas se hacen más grandes. No hay saltos repentinos entre tamaños.

En el escritorio, nos mantenemos en proporciones doradas perfectas. Las pantallas móviles necesitan ajustes menores para mantener el texto legible. Los cálculos puros pueden sugerir 11px para algunos títulos, pero eso se esfuerza por los ojos de sus visitantes. Establecer mínimos prácticos como 14px conserva la armonía visual de la relación dorada al tiempo que garantiza que todos puedan leer cómodamente su contenido. Las relaciones proporcionales permanecen intactas; Simplemente se mudaron ligeramente para su legibilidad.

Variables de espacio

Cada valor multiplica el anterior por exactamente 1.618:

• Space XS: Clamp (8px, 1VW, 10px)
  • Por qué la base de 10px: este es el relleno de Touch Target más pequeño y cómodo en el móvil. La sabiduría de la industria recomienda objetivos táctiles mínimos de 44px y acolchado de 10px en todos los lados, además de que el contenido lo lleva allí. Más pequeño de 10px hace que los elementos se sientan estrechos.
  • Por qué 8px mínimo: en teléfonos con menos de 360 ​​px de ancho, incluso 10px puede sentirse demasiado espacioso. Llegamos a 8px para maximizar el espacio de contenido mientras mantenemos elementos distinguibles.
  • Por qué 1VW: crece el espacio proporcionalmente y le brinda exactamente 10px al ancho de la pantalla de 1000px
• Espacio pequeño: abrazadera (13px, 1.6VW, 16.18px): ideal para el acolchado de botones y el espaciado de campo de forma.
• Space Medium: Clamp (21px, 2.6VW, 26.18px): excelente para espaciar entre bloques de contenido relacionados.
• Espacio grande: abrazadera (34px, 4.2VW, 42.36px): crea espacio para respirar entre las secciones principales mientras se escala con el tamaño de la pantalla.
• Space XL: Clamp (55px, 6.8VW, 68.54px): excelente para el relleno superior/inferior en las secciones de héroes y los principales bloques de características. Las secciones de héroes necesitan acolchado sustancial incluso en los dispositivos móviles. Por debajo de 50px, el contenido de héroe se siente estrecho contra los bordes.
• Space XXL: Clamp (89px, 11VW, 110.89px): use con moderación. Tal vez para secciones especiales que necesitan espacio de respiración dramática.

Variables de diseño

• Ancho de columna primaria: 61.803%
  • Cómo lo obtenemos: Divida 1 por 1.618 = 0.61803 (o 61.803%)
  • Use esto para su área de contenido principal en cualquier diseño de dos columnas
• Ancho de columna secundaria: 38.197%
  • Usar para su columna de barra lateral en la misma fila
  • Derivado del 100% - 61.803% = 38.197%
• Ancho máximo de contenedor: 1165px
  • El texto se vuelve difícil de leer cuando las líneas se extienden más allá de 72 caracteres,
    • y suponiendo 10px como tamaño mínimo de texto, el ancho de lectura óptimo (720px) × relación dorado (1.618) = 1165px
  • Aplicar a su sección principal o fila que contenga su contenido
• Relación de altura dorada: Calc (100% / 1.618)
  • Esto se puede utilizar como un valor en las alturas para grupos de módulos/módulos, como imágenes, cuadros de llamada a acción, secciones de héroes, tarjetas para miembros del equipo, etc.
  • Esto crearía rectángulos en lugar de cuadrados o formas aleatorias. Su cerebro encuentra estas proporciones naturalmente atractivas, como una foto perfectamente enmarcada.
  • ¿Cómo obtenemos esto? La relación dorada dice que si es ancho = 1.618, entonces altura = 1. Entonces, si ancho = 100%, entonces altura = 100%÷ 1.618 = 61.8%. Esta fórmula hace esa matemática automáticamente.

Guarde estas variables en el administrador variable de Divi 5. Luego, úselos en cualquier lugar haciendo clic en el icono de variables junto al ancho, la altura o los campos de ancho máximo. Después de la configuración inicial, no se necesitan matemáticas. Además, ninguna de estas etiquetas variables es fija; Puede intercambiar las etiquetas con algo que tenga sentido.

Creando una sección de héroes con proporciones doradas

Construyamos una sección de héroes para la página de destino de un libro, inspirada en uno de los diseños de la colección de sitios iniciales, utilizando las variables de relación dorada que acabamos de crear. Y esa es la parte divertida. Puede tomar esas variables cuidadosamente calculadas y observar cómo afectan una sección de héroes real.

Comience creando una nueva sección en Visual Builder de Divi 5. Establezca la altura utilizando su variable de relación de altura dorada. Esto hace que sea natural que su cerebro lo reconozca como agradable.

Agregue su variable XL Space al relleno superior e inferior. Esto proporciona suficiente espacio para respirar en el móvil mientras se expanda adecuadamente en el escritorio.

Para el fondo de la sección, tiene dos opciones principales utilizando sus variables de diseño:

Opción 1: fondo de color sólido

• Haga clic en el campo Color de fondo y seleccione su variable de color principal del menú desplegable. Esto mantiene su sección de héroe consistente con su identidad de marca. Si su color principal es demasiado ligero para el contraste de texto, use su variable de color secundaria. Asegúrese de que el color que elija proporcione suficiente contraste para que su texto permanezca legible. Manteniendo nuestra inspiración, agregaremos un gradiente de fondo y colores primarios con una parada del 72% y a 90 °.

Opción 2: fondo de imagen

• Aplique su variable de imagen Hero (si creó una) a través del campo de imagen de fondo. Haga clic en el icono de variables junto a la configuración de la imagen de fondo y seleccione su variable de imagen guardada. Al usar imágenes de fondo, agregue una superposición para la legibilidad de texto. Establezca el color de superposición en su variable de color primaria y ajuste la opacidad al 40-60%. Esto oscurece la imagen lo suficiente como para hacer que el texto blanco sea crujiente y legible.
• También puede usar su variable de color secundaria para la superposición si contrasta mejor la imagen de fondo elegida.

Creando el diseño de dos columnas

Agregue una fila con dos columnas.

Establezca el ancho de la columna izquierda en la variable de ancho de su columna primaria y la columna derecha en la variable de ancho de la columna secundaria. También encenderemos la opción "igualar alturas de columna". Luego, la variable de ancho máximo del contenedor se aplicará para mantener el contenido legible en pantallas más grandes. Esto evita que las líneas de texto se estiren demasiado, especialmente en pantallas más amplias.

También habilitaremos "Usar el ancho de canalones personalizados" y establecerlo en 1. Esto nos ayudará a usar espacios de relación dorada entre nuestros módulos.

Aplique su variable de medio de espacio a la primera columna de la primera columna y el relleno izquierdo de la segunda columna para agregar espacio de respiración entre columnas. Esto crea suficiente separación entre las columnas sin hacer que se sientan desconectadas.

La columna más grande mantendrá su mensaje principal y su llamado a la acción. La columna más pequeña puede contener una imagen de héroe simple o permanecer vacía para un diseño limpio y centrado en el texto.

Configuración de tipografía que fluye

En su columna principal, agregue dos módulos de encabezado.

Establezca el primero en H5 y aplique la variable de tamaño H5. En este ejemplo, este módulo de texto lleva el contenido "autor más vendido". También usaremos el color secundario para este texto y aplicaremos un estilo de fuente mayúscula. También aplicaremos la fuente del cuerpo al texto para hacerlo distintivo y aumentar su peso en negrita.

Establezca el segundo en H1 y aplique su variable de tamaño H1. Este se convierte en tu principal titular. En este ejemplo, utilizaremos el nombre del autor, que se agregó anteriormente, como una variable de diseño. Si le faltan ideas, puede usar Divi Ai para ayudarlo con un excelente texto de encabezado.

Debajo de eso, agregue un módulo de texto para su párrafo de soporte. Aplique la variable de tamaño de texto de su cuerpo y la variable de color. Mantenga esto en 2-3 oraciones explicando su propuesta de valor central. Para este ejemplo, agregaremos una breve introducción a nuestro autor. También puede usar Divi AI para ayudarlo con la copia aquí.

Espace estos elementos utilizando su medio de espacio como margen entre el titular y el párrafo.

Luego, agregue un módulo de botón debajo de su texto. Aplica tus colores. Estamos utilizando la variable de diseño de color primaria y el texto del botón.

Agregue su variable Medium de espacio al acolchado izquierdo y derecho y el espacio pequeño a la parte superior e inferior para las dimensiones del botón. Esto crea un botón que es proporcional a su texto sin ser de gran tamaño. Use su variable grande de espacio como el margen superior para separarla del párrafo.

El texto del botón debe usar la variable de tamaño de texto de su cuerpo para mantener la consistencia con el texto de su párrafo. También aplicaremos la variable de diseño del enlace del botón que agregamos anteriormente.

Estilizar la columna derecha

La columna derecha puede contener cualquier cosa, desde una imagen hasta un formulario de incorporación. Si usa una imagen en la columna más pequeña, manténgala simple. Una foto de su equipo, su oficina o una ilustración limpia funciona bien. No piense demasiado en la colocación de la imagen: céngela normalmente dentro de la columna. Para este ejemplo, incluiremos la variable de diseño de imágenes de un libro reciente. Y también agregue una sombra de caja para que se destaque.

También ajustaremos el ancho de la imagen para que sea alrededor del 90%, por lo que parece más alineado.

Para consultar sitios web, a veces dejar la columna correcta vacía crea un aspecto más limpio y profesional que se enfoca completo en su mensaje.

El resultado

El siguiente es el resultado:

Use la escala de lienzo de Divi 5 para probar la apariencia de su héroe en diferentes tamaños de pantalla. Las funciones Clamp () en sus variables deben manejar la capacidad de respuesta automáticamente.

Si bien las variables de relación dorada proporcionan una excelente armonía proporcional, es posible que necesite ajustes menores basados ​​en su contenido específico. Los titulares largos pueden necesitar texto ligeramente más pequeño. Los lemas cortos y contundentes pueden manejar tamaños más grandes. Algunos estilos de marca requieren un espacio más ajustado o más flexible.

La belleza de las variables de diseño es que estos cambios toman solo dos clics. Abra el Administrador de variables, ajuste su tamaño H1 o una gran variable de espacio, y observe que el cambio se aplique instantáneamente en todo su sitio.

Su H1 debe permanecer prominente pero legible en dispositivos móviles (mínimo de 47 px). Su espacio debe sentirse generoso pero no excesivo en ningún tamaño de pantalla. La división de dos columnas le brinda un diseño clásico y profesional que funciona bien para las empresas de servicios donde la confianza y la claridad importan más que elementos de diseño llamativos.

Mantener proporciones doradas en todo el sitio con preajustes de grupos de opciones

Las variables de diseño manejan los números, pero los preajustes de los grupos de opciones aseguran que se usen de manera consistente en todo el sitio.

Construya su primera sección usando las variables que creamos. Obtenga la tipografía, el espacio y el diseño exactamente correcto. Luego haga clic en el icono preestablecido al lado de cada grupo de estilo (tipografía, espaciado, borde, etc.) y guárdelos como preajustes de grupo de opciones.

Esto crea bloques de diseño reutilizables que ya contienen sus proporciones de relación dorada. En lugar de comenzar desde cero, aplique estos presets cada vez que agrega una nueva sección o módulo.

Cuando necesite ajustar las proporciones en todo el sitio, cambie la variable una vez. Cada preajuste que usa se actualiza en todo su sitio al instante. No cazar a través de páginas individuales para hacer cambios.

Sus proporciones de oro se mantienen consistentes sin el trabajo manual.

Matemáticas a un diseño hermoso, Divi 5 lo hace fácil

Esa sensación persistente cuando los diseños se ven "casi correctos" finalmente tiene sentido. No estabas siendo exigente: tu cerebro estaba captando relaciones proporcionales que se sentían.

Las proporciones doradas le dan un punto de partida confiable, pero la mayoría de los constructores te hacen hacer los cálculos cada vez. El sistema de variables de diseño de Divi 5 lo cambia por completo. Calcule sus proporciones 1.618 una vez, guárdelas como variables, luego haga clic para aplicarlas en cualquier lugar de su sitio.

¿Necesita ajustar el espacio en cincuenta páginas? Cambie una variable en lugar de editar cada página individualmente. ¿Quieres una tipografía consistente que siga las proporciones doradas? Establezca sus valores de Clamp () una vez y mire los escala perfectamente en todos los dispositivos.

Las matemáticas funcionan en todas partes, pero Divi 5 en realidad hace que sea práctico usar de manera consistente.