8 técnicas para crear sitios web mínimos con Divi

Los sitios web mínimos se han vuelto realmente populares en los últimos años. Le permiten concentrarse en brindar a sus visitantes una sensación fresca y limpia al navegar. El estilo de diseño web minimalista está influenciado por el estilo de diseño de interiores escandinavo. Seguramente ha visto imágenes de salas de estar escandinavas en Internet. Al reducir los muebles y usar principalmente colores blancos o grises, la luz y la serenidad son libres de ingresar a la habitación. Eso es exactamente lo que hacen los sitios web mínimos. Están enfocados en brindar a sus visitantes una sensación de tranquilidad para que puedan concentrarse en el contenido que usted brinda sin sentirse abrumados.

Esta es una segunda publicación de la serie de publicaciones donde manejaremos 4 estilos de sitios web diferentes y cómo lograrlos usando Divi:

1. Limpio y abstracto
2. Mínimo
3. Plano
4. Atrevido y colorido

¡Hagámoslo!

1. Menos es más

Lo primero que debe tener en cuenta al crear un sitio web mínimo es tratar de reducir los elementos de diseño que utiliza en su sitio web. En lugar de usar más, intente aprovechar al máximo los pocos elementos que usa.

Se sorprenderá de lo mucho que puede obtener de su diseño ajustando los elementos de su diseño de manera que se vuelvan complementarios. El uso de menos elementos en su sitio web también le permite tener una visión general y entregar su mensaje de una manera más coherente y clara.

2. El margen y el relleno son tus mejores amigos

Los sitios web mínimos suelen tener muchos espacios en blanco. Los espacios en blanco en sus páginas y publicaciones permiten a los visitantes respirar durante su visita a su sitio web. Dan una sensación de serenidad y le permiten concentrarse en el contenido que desea compartir.

La mejor manera de agregar espacios en blanco a su sitio web es mediante el uso de colores de fondo blanco y / o gris claro en combinación con un relleno y / o margen adicional. No tenga miedo de jugar con los diferentes valores para ver qué resultado se obtiene.

3. Utilice un color de acento

Si desea mantener su sitio web lo más mínimo posible, también debe evitar usar demasiados colores diferentes. Vaya lo más neutral posible usando mucho blanco y gris. Utilice colores más oscuros para su contenido escrito. Y para que su diseño sea un poco más atrevido, elija un color de acento. Este color generalmente será el mismo que usas en tu logo.

4. Imágenes o ilustraciones, no ambas

En general, se recomienda elegir entre imágenes o ilustraciones de la vida real al crear su sitio web. Usar ambos al mismo tiempo realmente puede complicar su sitio web y mezclar diferentes estilos de sitios web, que es algo que definitivamente desea evitar.

Sin embargo, hay una excepción. Siéntase libre de usar imágenes en combinación con ilustraciones de iconos en sus Módulos de Blurb, por ejemplo. Si son mínimos y apoyan el contenido de su página, está listo para comenzar.

5. Considere la posibilidad de utilizar módulos de texto en lugar de módulos de botones para las llamadas a la acción

¿Alguna vez ha intentado utilizar un módulo de texto en lugar de un módulo de botones? Definitivamente deberías. Aunque los módulos de botones le brindan la mayoría de las opciones a las que está acostumbrado en Visual Builder, tiene la tendencia de agregar bordes a todos los lados de su botón. Con un módulo de texto, puede evitarlo. Simplemente puede hacer clic en su copia y agregar un borde inferior como puede ver en la pantalla de impresión a continuación.

6. Los divisores pueden ayudar a equilibrar el espacio en blanco

Si desea agregar un toque moderno a su sitio web, definitivamente debería intentar usar múltiples divisores en su sitio web y diseñarlos para que coincidan con el resto de su diseño.

Tienden a conectar diferentes elementos de diseño entre sí y crean un resultado coherente.

7. Use formas simples y sutiles

Este es uno de mis favoritos. A veces, tendemos a descuidar las funciones a las que estamos más acostumbrados, como los fondos degradados. Claro, usar una imagen de fondo tiene su encanto, pero ¿alguna vez ha intentado usar un fondo degradado radial de una manera sutil? Permite a sus visitantes centrarse en sus titulares y le ayuda a desencadenar acciones.

8. Utilice animaciones sutiles (si es que son necesarias)

Por último, pero no menos importante, un sitio web mínimo suele mejorar aún más cuando se utilizan animaciones sutiles. Y cuando decimos sutil, nos referimos a realmente sutil. Se sorprenderá de lo suave que puede resultar un efecto con solo reducir drásticamente la intensidad de la animación. Siempre que la animación sea sutil, puede agregarla a cualquier elemento y no afectará la legibilidad y la experiencia del usuario de su sitio web.

Avance

Ahora que hemos pasado por todas las técnicas, comencemos a ponerlas en práctica. Vamos a recrear el siguiente ejemplo paso a paso:

Comencemos a crear: agregue una nueva sección estándar

Configuración de la sección

Espaciado

Para crear el ejemplo anterior, necesitaremos dos secciones en total. Comencemos agregando el primero a una página nueva o existente y agregando el siguiente espaciado:

• Acolchado superior e inferior: 50px

Agregar una nueva fila

Estructura de la columna

Continúe agregando una nueva fila que contenga una columna.

Fondo degradado de columna

Abra la configuración de esta fila y agregue el siguiente fondo de degradado de columna:

• Color # 1: #ffffff
• Color # 2: #efefef
• Tipo de gradiente de columna: radial
• Dirección radial de la columna: centro
• Posición inicial de la columna: 40%
• Posición final de la columna: 40%

Dimensionamiento

Luego, aumente el ancho de la fila realizando los siguientes cambios en la configuración de Tamaño:

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 2

Espaciado

Por último, agregue también el siguiente espaciado a su fila:

• Acolchado superior e inferior: 0px
• Relleno superior e inferior de la columna: 250 px
• Relleno de la columna izquierda: 150 px (escritorio), 20 px (tableta), 0 px (teléfono)

Primer módulo de texto

Configuración de texto

Una vez que haya modificado la configuración de su fila, puede comenzar a agregar los módulos que necesita. Comenzaremos con una breve descripción del módulo de texto utilizando la siguiente configuración de texto:

• Peso de la fuente del texto: Semi negrita
• Estilo de fuente de texto: mayúsculas
• Espaciado de letras de texto: 8px

Animación

También estamos agregando animaciones muy sutiles a este diseño, comenzando con este Módulo de texto. Abra la configuración de Animación y agregue la siguiente animación:

• Estilo de animación: diapositiva
• Dirección de animación: Derecha
• Intensidad de animación: 5%

Segundo módulo de texto

Configuración de texto H1

Justo debajo del módulo de texto anterior, continúe y agregue un módulo de texto H1 que contenga las siguientes configuraciones de texto H2:

• Fuente de encabezado: Georgia
• Color del texto del encabezado: # 666666
• Tamaño del texto del encabezado: 78 px (escritorio), 50 px (tableta), 40 px (teléfono)
• Espaciado entre letras del encabezado: 3px

Espaciado

Vamos a crear el espacio alrededor de este módulo usando la siguiente configuración de espaciado:

• Margen superior e inferior: 100 px
• Margen izquierdo: 100 px (escritorio y tableta), 20 px (teléfono)
• Relleno izquierdo: 40px

Frontera

También necesitaremos un borde izquierdo, así que continúe y agregue un borde izquierdo con la siguiente configuración:

• Ancho del borde izquierdo: 6px
• Color del borde izquierdo: # d67787

Módulo de texto de botón

Añadir enlace

En lugar de usar un módulo de botones, estamos usando un módulo de texto al que agregaremos un enlace. Agregue su CTA y enlace dentro del cuadro Contenido.

Configuración del texto del enlace

Luego, aplique la siguiente configuración de texto del enlace a su módulo de texto:

• Peso de la fuente del enlace: Semi negrita
• Estilo de fuente de enlace: cursiva y mayúscula
• Alineación del texto del enlace: izquierda
• Color del texto del enlace: # 666666
• Espaciado de letras de enlace: 8px

Dimensionamiento

Como usaremos un borde inferior, más adelante también reduciremos el Ancho de este Módulo de Texto:

• Ancho: 46%
• Alineación del módulo: izquierda

Espaciado

Y para asegurarnos de que el borde inferior no esté demasiado cerca de nuestro texto, también agregaremos un relleno inferior '10px'.

• Acolchado inferior: 10px

Frontera

Ahora podemos continuar agregando un borde inferior usando la siguiente configuración:

• Ancho del borde inferior: 1 px
• Color del borde inferior: # 666666

Animación

También estamos agregando una animación sutil:

• Estilo de animación: diapositiva
• Dirección de animación: Derecha
• Retraso de animación: 100 ms
• Intensidad de animación: 5%

Agregar módulo divisor

Visibilidad

El último módulo que necesitaremos en esta fila es un módulo divisor. Asegúrese de dejar habilitada la opción 'Mostrar divisor'.

Color

Estamos usando el mismo color para este divisor que para el borde izquierdo del título Módulo de texto: '# d67787'.

Dimensionamiento

Abra la configuración de Tamaño a continuación y cambie el Peso del divisor a '2px'.

Espaciado

Empujaremos el módulo divisor hacia la derecha usando la siguiente configuración de espaciado:

• Margen izquierdo: 200px
• Margen derecho: -100px

Animación

Por último, pero no menos importante, incluiremos la siguiente animación:

• Estilo de animación: diapositiva
• Dirección de animación: izquierda
• Retraso de animación: 150 ms
• Intensidad de animación: 5%

Agregar una segunda sección estándar

Configuración de la sección

Espaciado

Hemos terminado con la primera sección, por lo que ahora podemos continuar y agregar una nueva sección justo debajo de la anterior. Abra la configuración de la sección y agregue el siguiente margen:

• Margen superior e inferior: 80 px

Agregar una nueva fila

Estructura de la columna

Continúe agregando una fila con la siguiente estructura de columnas:

Dimensionamiento

Luego, abra la configuración de la fila y aumente el ancho de su fila usando la siguiente configuración:

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 2

Espaciado

También necesitaremos agregar algo de relleno en la columna 2:

• Columna 2 Relleno izquierdo: 100 px (escritorio), 0 px (tableta y teléfono)

Agregar módulo de imagen a la columna 1

Cargar imagen

Ahora podemos comenzar a agregar módulos a nuestras dos columnas. Comience agregando un módulo de imagen a su primera columna y cargue una imagen de su elección.

Espaciado

Aumentaremos el ancho del Módulo de imagen agregando un margen derecho negativo:

• Margen derecho: -100px

Sombra de la caja

También usaremos la siguiente sombra de cuadro para crear un elemento de diseño adicional en la página:

• Posición horizontal de la sombra del cuadro: 100px
• Posición vertical de la sombra del cuadro: 100px
• Fuerza de propagación de la sombra de caja: -14px
• Color de sombra: #efefef

Módulo de texto del botón Clonar y colocar debajo del módulo de imagen

Módulo de texto del botón Localizar y clonar

Vamos a reutilizar los tres módulos de texto de la primera sección comenzando con el botón Módulo de texto. Adelante, clónalo.

Colocar debajo de la imagen

Luego, colóquelo justo debajo del Módulo de imagen en la primera columna.

Clonar el primer módulo de texto en la primera sección y colocarlo en la columna 2

Módulo de localización y clonación de texto

El siguiente módulo de texto que necesitaremos es el primero de nuestra sección. Adelante, clona este también.

Colocar en la columna 2

En lugar de colocarlo en la primera columna, colóquelo en la segunda.

Clonar el módulo de texto del título y colocarlo en la columna 2

Módulo de localización y clonación de texto

Por último, también reutilizaremos el título Módulo de texto.

Colocar en la columna 2

Una vez que lo haya clonado, colóquelo en la segunda columna de su nueva fila.

Cambiar contenido a H2

Cambie el contenido de su cuadro de contenido a H2.

Configuración de texto H2

Luego, agregue la siguiente configuración a su configuración de texto H2:

• Fuente del encabezado 2: Georgia
• Título 2 Color del texto: # 666666
• Tamaño del texto del encabezado 2: 58px
• Encabezado 2 espaciado de letras: 3px

Agregar módulo de texto de descripción

Configuración de texto

Debajo del título Módulo de texto, vamos a agregar una descripción del Módulo de texto con la siguiente configuración de texto:

• Peso de la fuente del texto: Ligero
• Espaciado de letras de texto: 1px

Dimensionamiento

Continúe y cambie el tamaño de este módulo de texto:

• Ancho: 70%
• Alineación del módulo: derecha

Agregue el módulo divisor n. ° 1

Visibilidad

El siguiente módulo que necesitaremos es un módulo divisor. Asegúrese de que la opción Mostrar divisor esté habilitada.

Color

Cambie el color de su divisor a '# 666666'.

Espaciado

Agregue un poco de espacio a continuación:

• Margen superior: 100 px
• Margen izquierdo: 400 px (escritorio), 300 px (tableta), 200 px (teléfono)
• Margen derecho: -100px

Animación

Y, por supuesto, también usaremos una animación sutil:

• Estilo de animación: diapositiva
• Dirección de animación: izquierda
• Intensidad de animación: 5%

Agregar módulo divisor n. ° 2

Visibilidad

Por último, pero no menos importante, agregaremos otro módulo divisor. Nuevamente, asegúrese de que la opción Mostrar divisor esté habilitada.

Color

Cambie el color de su divisor a '# d67787'.

Dimensionamiento

Utilice '2px' para el peso del divisor.

Espaciado

Y agregue la siguiente configuración de espaciado:

• Margen izquierdo: 200 px (escritorio y tableta), 150 px (teléfono)
• Margen derecho: -100px

Animación

Para terminar, agregue una animación sutil a su divisor:

• Estilo de animación: diapositiva
• Dirección de animación: izquierda
• Retraso de animación: 100 ms
• Intensidad de animación: 5%

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 excelentes técnicas de Divi sobre cómo crear sitios web mínimos. Esta es la segunda publicación de la serie sobre cómo hacer que sucedan hermosos estilos de diseño utilizando su creatividad y algunas de las mejores opciones integradas de Divi. En las próximas publicaciones, compartiremos técnicas sobre cómo lograr estilos de diseño más impresionantes. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar una sección de comentarios a continuación!