8 técnicas para lograr diseños limpios y abstractos con Divi

Decidir qué estilo desea que siga su sitio web puede llevar mucho tiempo. No es una sorpresa si considera todos los estilos de diseño que puede seguir. El estilo que elija será una representación de todo lo que representa su sitio web y definitivamente desea que coincida con las tendencias de diseño en 2018. En esta serie de publicaciones, exploraremos algunos de los más populares y atractivos. allá:

  1. Limpio y abstracto
  2. Mínimo
  3. Departamento
  4. Audaz y colorido

Para cada uno de los estilos de diseño, vamos a repasar algunas técnicas de Divi que harán que llegar a ese tipo de diseño sea mucho más fácil. Comenzaremos con el estilo de diseño limpio y abstracto. Compartiremos 8 técnicas que puede aplicar a sus elementos de diseño usando el constructor visual de Divi y luego, ¡crearemos dos impresionantes ejemplos desde cero!

¡Hagámoslo!

1. Evite los colores de fondo coloridos de la sección principal

En la mayoría de los casos, el término ‘limpio’ también significa mucho ‘blanco’. Eso no significa que deba evitar los colores en general, pero evitar los colores en los principales elementos estructurales de su sitio web (como las secciones) puede contribuir mucho a dar a los visitantes una impresión limpia.

2. Use fondos de patrón de fila sutil en su lugar

Para reducir la sensación blanca y limpia de su sección, no necesariamente tiene que concentrarse en la configuración de su sección. Puede crear fácilmente un diseño sutil y abstracto usando imágenes de fondo de patrón de fila, por ejemplo. Solo cubrirá el fondo de su fila y dejará suficiente espacio en blanco para mantener esa sensación general de limpieza y blancura. El fondo del patrón que use debe contener un color de fondo blanco y solo una parte de ese fondo blanco debe estar cubierto con patrones. Asegúrese de no agregar ningún patrón a los bordes o esquinas. Esto permite que los fondos de las filas y las secciones se mezclen. Más adelante en esta publicación, en la parte donde recrearemos los ejemplos, ¡podrá guardar la imagen del patrón y usarla para sus propios proyectos de diseño web!

3. Rompe el patrón con los colores de fondo del módulo blanco

La jerarquía de diseño que contiene Divi (sección → fila → columna → módulo) te permite hacer lo mismo con el fondo de tu patrón de fila. Al usar un color de fondo blanco para los módulos de su elección, puede anular el fondo del patrón de fila que ocupa su módulo. Esto, en combinación con un color de fondo de sección blanco, le permite fusionar módulos y fondos de sección mientras mantiene intacto el fondo del patrón de fila para otros módulos que está utilizando.

4. Crea contraste con tamaños de fuente

El uso de un color de fondo de sección blanco significa que deberá buscar elementos llamativos en otro lugar. Una de las cosas que puedes hacer para llamar la atención es crear contraste en los tamaños de fuente. Cuanto mayor sea la diferencia de tamaño entre el subtítulo y el título principal, por ejemplo, más aparecerá el título principal.

5. Use el espacio entre letras para la elegancia

Al igual que jugar con los tamaños de fuente, el uso de espaciado de letras adicional en diferentes puede brindar resultados sorprendentes. Ayuda a mejorar el contraste entre el contenido que está compartiendo sin tener que integrar una paleta de varios colores en su diseño. Al igual que los tamaños de fuente, atrae la atención de su visitante pero de una manera diferente a como lo hacen los tamaños de fuente grandes.

6. Use CTA degradados, divisores y secciones vacías para fines abstractos

Otra forma de equilibrar el diseño limpio y blanco de su sitio web es mediante el uso de colores de forma abstracta. El uso de colores degradados para sus llamadas a la acción, los divisores y las secciones vacías en combinación con los divisores de sección son algunas de esas cosas que le permitirán crear resultados sorprendentes sin perder ese factor limpio y blanco.

 

7. Crea profundidad con sutiles sombras de caja

En combinación con elementos de diseño degradado y abstracto en su diseño web, un sitio web limpio también requiere algo de profundidad. No es el tipo de profundidad ‘difícil de perder’, sino más bien el tipo sutil que te ayuda a llevarlo a un nivel superior. Las sombras de cuadro sutiles se caracterizan por una fuerza de desenfoque alta en combinación con una fuerza de dispersión baja y un color de sombra de cuadro de color claro que no llama demasiado la atención sino que potencia los otros elementos de diseño en su sitio web.

8. Elementos de diseño superpuestos con margen negativo

Hemos mencionado el uso de elementos de diseño degradado como divisores y secciones vacías en combinación con divisores de sección. Estos elementos ya son hermosos, pero para ayudar a que su diseño sea más complejo (de una manera positiva) y abstracto, puede usar fácilmente un margen superior negativo para hacer que los diferentes elementos de diseño dentro de su sección se superpongan. También puede modificar este margen superior negativo de acuerdo con cómo desea que se vea en diferentes tamaños de pantalla, ya sea de escritorio, tableta o teléfono.

Avance

Ahora que hemos repasado todas las técnicas Divi, es hora de ponerlas en práctica. Echemos un vistazo al diseño que recrearemos en diferentes tamaños de pantalla teniendo en cuenta las diferentes técnicas.

¡Comencemos a Crear!

Pasos generales

Agregar nueva sección

Vamos a crear dos ejemplos diferentes. Los ejemplos son similares pero difieren en los elementos de diseño. Para facilitar el proceso, primero vamos a seguir los pasos generales y, una vez que los hayamos hecho, nos centraremos en cada uno de los ejemplos individualmente. Comience abriendo una nueva página con Visual Builder de Divi y agregue una nueva sección estándar. Esta sección contiene, por defecto, un color de fondo blanco y así lo mantendremos.

Agregar nueva fila

Estructura de la columna

A continuación, agregue una fila a su sección que contenga una columna.

Imagen de fondo

Como se mencionó en una de las técnicas, puede mejorar fácilmente el fondo de la sección blanca usando un fondo de patrón para su fila. Continúe y guarde la imagen a continuación, cárguela y utilícela junto con la siguiente configuración de imagen de fondo:

  • Tamaño de la imagen de fondo: Ajuste
  • Posición de la imagen de fondo: Centro
  • Repetición de la imagen de fondo: sin repetición

Dimensionamiento

Abra la configuración de tamaño a continuación y habilite la opción ‘Hacer esta fila de ancho completo’.

Añadir Módulo de Texto #1

Color de fondo

¡Ahora, comencemos a agregar módulos! Comenzaremos con un subtítulo y, como se mencionó en la técnica número 2, vamos a romper el patrón de este módulo usando un color de fondo blanco.

Configuración de texto

Abra su configuración de texto a continuación y aplique los siguientes cambios:

  • Peso de fuente de texto: Negrita
  • Estilo de fuente de texto: Mayúsculas
  • Color del texto: #000000
  • Tamaño del texto: 18px
  • Espaciado entre letras de texto: 29 px (tableta), 25 px (tableta), 18 px (teléfono)
  • Orientación del texto: Centro

Espaciado

Para crear algo de espacio entre el comienzo del patrón y nuestro Módulo de texto, agregaremos ‘100px’ al margen superior de nuestro Módulo de texto.

Añadir Módulo de Texto #2

Configuración de texto

Justo debajo del módulo de texto anterior, continúe y agregue uno nuevo que contenga el título que desea mostrar. Abra la configuración de texto de su módulo y realice los siguientes cambios:

  • Peso de fuente de texto: ultra negrita
  • Color del texto: #000000
  • Tamaño del texto: 200 px (escritorio), 130 px (tableta), 100 px (teléfono)
  • Espaciado entre letras de texto: -6px
  • Altura de línea de texto: 1em

Agregar módulo de botones

Alineación de botones

El tercer y último módulo de nuestra fila es un módulo de botones. Después de agregar la copia, vaya a la configuración de Alineación y use la Alineación del botón central.

Configuración de botones

Para cambiar la apariencia de su botón, abra la configuración del Botón y aplique las siguientes modificaciones:

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 16px
  • Color del texto del botón: #FFFFFF
  • Color degradado #1: #fd5056
  • Color degradado #2: #bd3cb5
  • Dirección del gradiente: 153 grados
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 54px
  • Peso de fuente: ultra negrita
  • Estilo de fuente: Mayúsculas

Espaciado

Dar a tu botón suficiente relleno es una parte importante de la creación de un CTA legible y atractivo. Abra la configuración de Espaciado de su botón y aplique el siguiente margen y relleno personalizados:

  • Margen superior e inferior: 100px
  • Relleno superior e inferior: 15px
  • Relleno izquierdo y derecho: 40px

Sombra de la caja

Por último, pero no menos importante, vamos a crear profundidad (como se menciona en la técnica número 7) para crear un diseño atractivo:

  • Fuerza de desenfoque de sombra de cuadro: 80px
  • Fuerza de propagación de la sombra del cuadro: -7px
  • Color de sombra de cuadro: rgba (0,0,0,0.34)

Ejemplo #1: Pasos Adicionales

Agregar nueva fila

Estructura de la columna

Ahora que hemos seguido los pasos generales, creemos los dos ejemplos diferentes individualmente. Para el primer ejemplo, comience agregando una nueva fila a la misma sección con la siguiente estructura de columnas:

 

Dimensionamiento

Abra la configuración de su fila y permita que sus módulos de fila ocupen todo el ancho de su pantalla usando la siguiente configuración de tamaño:

  • Hacer esta fila de ancho completo: Sí
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 1

Agregar módulo divisor

Agregar y ocultar divisor

Agregue un Módulo divisor a su fila y deshabilite la opción ‘Mostrar divisor’ en la configuración de Visibilidad de la pestaña Contenido.

Fondo degradado

En su lugar, usaremos un fondo degradado para nuestro divisor:

  • Color degradado #1: #fd5056
  • Color degradado #2: #bd3cb5
  • Dirección del gradiente: 168 grados

Espaciado

Para hacer que el Módulo divisor se superponga a nuestra fila anterior y sus módulos, usaremos ‘-400px’ para el margen superior.

Opacidad

Y para que el título Módulo de texto de nuestra fila anterior aún se vea, vamos a ajustar la opacidad dentro de la configuración de Filtros a ‘43%’.

Sombra de la caja

Por último, pero no menos importante, aplicaremos una sombra de cuadro sutil para mejorar la profundidad de nuestro diseño:

  • Fuerza de desenfoque de sombra de cuadro: 80px
  • Fuerza de propagación de la sombra del cuadro: 3px
  • Color de sombra de caja: rgba (0,0,0,0.49)

Ejemplo #2: Pasos Adicionales

Cambiar espaciado del módulo de texto #1

Para el segundo ejemplo, necesitaremos hacer algunas modificaciones a nuestros módulos existentes comenzando con el primer módulo de texto. Abra su configuración de Espaciado y agregue el siguiente margen personalizado:

  • Margen inferior: 150 px (teléfono)

Cambiar espaciado del módulo de texto #2

Abra el segundo módulo de texto a continuación y use la siguiente configuración de espaciado:

  • Margen inferior: 150 px (tableta y teléfono)

Cambiar el color del texto del botón

Luego, abra el Módulo de botones y cambie su Color de texto a ‘#bd3cb5’.

Quitar el fondo degradado del botón

Continúe y elimine el Fondo degradado de su Módulo de botones a continuación.

Agregar color de fondo del botón

Y agregue un color de fondo blanco en su lugar.

Agregar nueva sección

Fondo degradado

Una vez que haya terminado de modificar los módulos existentes, puede continuar y agregar una nueva sección debajo de la existente. Abra la configuración de su sección y use el siguiente fondo degradado para ello:

  • Color degradado #1: #fd5056
  • Color degradado #2: #bd3cb5
  • Dirección del gradiente: 165 grados

Divisor superior

Continúe agregando un divisor superior a su sección:

  • Estilo de divisor: Buscar en la lista
  • Color del divisor: #ffffff

Divisor inferior

Use la misma configuración para el divisor inferior.

Espaciado

Lo último que deberá hacer para su nueva sección es modificar su configuración de Espaciado:

  • Margen superior: -460px
  • Margen inferior: 100px
  • Relleno superior e inferior: 0px

Agregar nueva fila

Estructura de la columna

Ahora, para asegurarnos de que nuestra sección se muestre en todos los tamaños de pantalla, vamos a agregarle una fila con un módulo divisor invisible. Comience agregando su fila primero:

Agregar módulo divisor

Ocultar divisor

Agregue su módulo divisor a continuación y asegúrese de desactivar la opción ‘Mostrar divisor’ dentro de la configuración de visibilidad y ¡listo!

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales

En esta publicación, le mostramos algunas técnicas excelentes sobre cómo lograr un estilo de sitio web limpio y abstracto. Esta es la primera publicación de la serie sobre cómo crear hermosos estilos de diseño utilizando algunas de las mejores opciones integradas de Divi. En la próxima serie, compartiremos técnicas sobre cómo lograr estilos de diseño más sorprendentes. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar una sección de comentarios a continuación!