6 técnicas Divi para crear diseño web plano con Divi

El diseño web plano es popular debido a sus valores fundamentales. Se centra en la usabilidad y prioriza la experiencia del usuario en primer lugar. Eso, en combinación con un diseño elegante y moderno, lo convierte en un buen sitio web plano. Cada elemento de diseño en un sitio web plano debe estar bien pensado antes de agregarlo a una página. También debe enfocarse en ser simple pero hermoso y atractivo al mismo tiempo. No olvide que debe captar la atención de sus visitantes y hacer que sientan curiosidad por saber de qué se trata su empresa.

En esta publicación, vamos a compartir algunas técnicas para crear diseño web plano con Divi. Esta es la tercera publicación de la serie de publicaciones donde manejamos 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. Mantenga la sección de héroes limpia y comprensible

Como se mencionó en la introducción de esta publicación, la usabilidad es un aspecto muy importante del estilo de diseño web plano. Le permite ir al grano y compartir información relevante con los visitantes sin sobrecargarlos. Al mismo tiempo, utiliza un diseño magnífico que coincide con la marca de su empresa.

Hay muchas formas de crear diseños web planos, pero lo que noté en casi todas partes es la simplicidad de la sección de héroes. Y el diseño simple definitivamente no significa aburrido. Significa que no es necesario andar por las ramas. Puede ir al grano sin tener que exagerar el diseño que está creando para intentar impresionar a los visitantes.

2. Enfatice las estructuras de caja

Otra cosa típica de los estilos de diseño web plano es el uso de estructuras de caja. Si conoce Divi, sabrá que puede encontrar estructuras de caja básicamente en todas partes dentro del constructor. Le dan una cierta estructura a su sitio web y le permiten construir un marco por adelantado.

Dentro de los diseños planos, generalmente se enfatizan las estructuras de caja. Esto permite a las personas navegar fácilmente y encontrar lo que buscan en cuestión de tiempo.

3. Elija 3 colores brillantes

Hemos mencionado el uso de estructuras de caja y una sección de héroe simple hasta ahora. En teoría, eso suena aburrido, ¿verdad? Para equilibrar ese factor de usabilidad en su sitio web, puede darle vida usando una paleta de colores brillantes. Puede optar por dos o tres colores brillantes que personalizarán su sitio web y lo harán coincidir con los valores de su empresa.

4. Utilice combinaciones de colores de degradado muy sutiles

Otra cosa que puede ayudarlo a romper el ciclo es usar combinaciones de colores de degradado muy sutiles. Utilice el mismo color pero un tono diferente para ambos colores degradados. Uno de ellos debe ser más brillante mientras que el otro tiene una sensación más profunda. No aparecerán inmediatamente como un degradado para las personas, pero ayudarán a darle a su sitio web un poco más de profundidad y detalle.

5. Combine un estándar con una familia de fuentes elegante

Por lo general, muchos sitios web utilizan una familia de fuentes más elegante para los títulos y una estándar para el cuerpo del texto. ¿Por qué no cambiar las cosas? Esto definitivamente hará un cambio. Además, la gente tiende a saltarse las descripciones y solo lee los títulos. Si ese es el caso, desea que sus títulos sean lo más fáciles de leer posible, ¿verdad? Una gran combinación de familias de fuentes utiliza Arial para los títulos y Georgia para el texto del cuerpo. Georgia todavía es muy legible, solo un poco más elegante, y le da ese contraste necesario a su sitio web.

6. Juega con las alturas

El último de los consejos es jugar con la altura de los elementos de diseño en sus páginas. Se sorprenderá de lo mucho que eso puede contribuir a la apariencia general de su sitio web. Aún mantiene la estructura de caja que se recomienda para diseños planos, pero al mismo tiempo, también brinda interacción a sus visitantes.

Avance

Hemos visto varias técnicas en la parte anterior de la publicación, ahora es el momento de poner en práctica los consejos. Crearemos el siguiente resultado sorprendente paso a paso:

Comencemos a crear: agregue la sección estándar n. ° 1

Configuración de la sección

Fondo degradado

Comience creando una nueva página y agregando una sección a esa página. Sin agregar ninguna fila todavía, abra la configuración de la sección. Estamos usando un fondo degradado sutil con la siguiente configuración:

• Color 1: # 5214ff
• Color 2: # 420fc1
• Tipo de degradado: lineal
• Dirección del gradiente: 146 grados
• Posición inicial: 30%

Espaciado

También estamos agregando algo de relleno superior e inferior a nuestra sección:

• Acolchado superior: 55px
• Acolchado inferior: 130px

Agregar fila n. ° 1

Configuración de filas

Estructura de la columna

Continúe agregando su primera fila. Esta sección constará, en total, de tres filas diferentes. Para la primera fila, usamos la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de la fila de inmediato y habilite la opción 'Hacer esta fila de ancho completo' en la configuración de Tamaño.

Agregar un módulo de texto de título

Configuración de texto H1

Solo necesitaremos agregar un módulo de texto H1 a esta fila. Una vez que haya agregado su contenido (y se haya asegurado de que sea H1), abra la configuración de texto H1 y aplique los siguientes cambios:

• Fuente de encabezado: Arial
• Alineación del texto del encabezado: izquierda
• Color del texto del encabezado: #FFFFFF
• Tamaño del texto del encabezado: 86 px (escritorio), 65 px (tableta), 45 px (teléfono)
• Altura de la línea de rumbo: 1.2em

Agregar fila n. ° 2

Configuración de filas

Estructura de la columna

Pasemos a la siguiente fila. De nuevo, estamos usando una fila con una sola columna.

Dimensionamiento

Antes de agregar módulos, abra la configuración de la fila y aplique la siguiente configuración de tamaño:

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

Agregar un módulo divisor

Color

Continúe agregando un módulo divisor a su columna. Estamos usando '# edf000' como color divisor.

Dimensionamiento

Vamos a ajustar la configuración de tamaño de nuestro módulo divisor a continuación:

• Peso del divisor: 10px
• Ancho: 64%
• Alineación del módulo: derecha

Agregar fila n. ° 3

Configuración de filas

Estructura de la columna

Por último, pero no menos importante, agregue una fila con dos columnas.

Dimensionamiento

Abra la configuración de la fila y habilite la opción 'Hacer esta fila de ancho completo' en la configuración de Tamaño.

Espaciado

Elimine el relleno personalizado de la fila agregando '0px' al relleno superior e inferior.

Agregar un módulo de texto descriptivo a la columna 2

Configuración de texto

Continúe agregando un módulo de texto de descripción a la segunda columna usando la siguiente configuración de texto:

• Fuente de texto: Georgia
• Color del texto: #FFFFFF
• Tamaño del texto: 27px (escritorio), 22px (tableta), 18px (teléfono)
• Altura de la línea de texto: 1.9em
• Alineación de texto: derecha

Agregar un módulo de botones a la columna 2

Alineación de botones

Alinee su fila a la derecha también dentro de la configuración de Alineación de su Módulo de Texto.

Configuración de botones

El siguiente y último módulo que necesitaremos agregar a nuestra sección de héroe es un módulo de botones. Una vez que agregue la copia, aplique la siguiente configuración de botón:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 27px
• Color del texto del botón: # 303030
• Color de fondo del botón: # edf000
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px
• Fuente del botón: Georgia

Agregar sección estándar n. ° 2

Configuración de la sección

Espaciado

¡Podemos pasar a nuestra segunda sección! Abra la configuración de la sección y use el siguiente relleno:

• Acolchado superior: 155px
• Acolchado inferior: 200px

Agregar fila n. ° 1

Configuración de filas

Estructura de la columna

La primera fila que agregaremos contendrá nuestro círculo rojo. Elija la siguiente estructura de columnas para su fila:

Columna 1 Fondo degradado

En lugar de cargar un módulo de imagen, usaremos un fondo de degradado radial de columna 1. Estamos usando el color rojo en nuestra paleta de colores en combinación con un color completamente transparente.

• Color 1: # ff3233
• Color 2: rgba (255,255,255,0)
• Columna 1 Tipo de degradado: radial
• Posición inicial de la columna 1: 45%
• Posición final de la columna 1: 45%

Dimensionamiento

Continúe cambiando su configuración de tamaño:

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

Agregar un módulo divisor

Ocultar divisor

Para asegurarnos de que se muestre el fondo de nuestra columna, agregaremos un módulo divisor a la primera columna. Sin embargo, no queremos que aparezca el divisor. Es por eso que deshabilitaremos la opción 'Mostrar divisor'.

Espaciado

Y para que se vea el fondo del degradado de la columna, agregaremos el siguiente margen al Módulo Divisor:

• Superior: 150 px (escritorio), 200 px (tableta y teléfono)
• Abajo: 150px (escritorio), 200px (tableta y teléfono)

Volver a la configuración de la fila

Agregar espacio

Vamos a hacer que este círculo rojo se superponga a ambas secciones de nuestra página. Para hacer eso, volveremos a abrir la configuración de la fila y agregaremos un margen negativo:

• Margen superior: -350px (escritorio), -400px (tableta y teléfono)
• Margen izquierdo: -250px (escritorio y teléfono), -400px (tableta)

Agregar fila n. ° 2

Configuración de filas

Estructura de la columna

Pasemos a nuestra segunda fila. Esta fila contendrá un módulo de texto de título y un divisor. Elija la siguiente estructura de columnas:

Espaciado

Reduzca el espacio que crea esta fila usando '0px' para el relleno superior.

Agregar un módulo de texto de título

Configuración de texto H2

Ahora podemos agregar nuestros módulos. Comience agregando un nuevo módulo de texto H2 con la siguiente configuración de texto:

• Fuente del encabezado 2: Arial
• Alineación del texto del encabezado 2: centro
• Color del texto del encabezado: # 303030
• Tamaño del texto del encabezado 2: 50 px (escritorio), 45 px (tableta), 32 px (teléfono)
• Altura de la línea del rumbo 2: 1.3em

Agregar un módulo divisor

Color

Justo debajo del módulo de texto, agregue un módulo divisor. Esta vez, queremos que se muestre el divisor. Déle el código de color '# 5214ff'.

Dimensionamiento

A continuación, cambie la configuración de tamaño de su módulo divisor:

• Peso del divisor: 10px
• Ancho: 30%
• Alineación del módulo: centro

Agregar fila n. ° 3

Configuración de filas

Estructura de la columna

Es hora de crear nuestra última fila usando cuatro columnas.

Copiar fondo degradado de sección

Usaremos el mismo fondo degradado que usamos para la sección de héroes. Entonces, para ahorrarnos algo de tiempo, simplemente vamos a copiar esa configuración.

Pegar fondo degradado en las columnas 1 y 3

Y pégalos en la columna uno y tres.

Dimensionamiento

Vaya a la configuración de Tamaño a continuación y haga que su fila ocupe todo el ancho de la pantalla.

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

Espaciado

También cambiaremos la configuración de Espaciado:

• Margen superior: 100 px
• Acolchado superior e inferior: 0px

Agregar un módulo Blurb

Seleccionar icono

Ahora que hemos terminado con la configuración de la fila, ¡podemos comenzar a agregar nuestros módulos! Necesitaremos cuatro módulos Blurb, uno para cada columna. En lugar de crearlos por separado, crearemos uno y lo duplicaremos después. Una vez que agregue el contenido de su propaganda, continúe y seleccione un ícono de su elección.

Configuración de iconos

A continuación, abra la configuración de su icono y use el color del icono '# edf000'.

Configuración de texto

Continúe usando la siguiente configuración de texto:

• Orientación del texto: centro
• Color del texto: claro

Configuración del texto del título

Abra la configuración del texto del título a continuación y realice algunos cambios:

• Fuente del título: Arial
• Tamaño del texto del título: 31px
• Altura de la línea de título: 2.6em

Configuración del texto del cuerpo

Del mismo modo, haremos que el texto del cuerpo coincida con el diseño que estamos creando:

• Fuente del cuerpo: Georgia
• Tamaño del texto del cuerpo: 18px
• Altura de la línea del cuerpo: 2.2em

Espaciado

Y, por último, para darle a su módulo Blurb algo de espacio para respirar, agregue el siguiente relleno personalizado:

• Acolchado superior e inferior: 50px
• Relleno izquierdo y derecho: 20px

Clonar y cambiar módulo Blurb

Clonar módulo de propaganda y colocarlo en la columna 2

Clone el módulo Blurb que acaba de crear y coloque el duplicado en la segunda columna.

Cambiar el ícono

Lo primero que deberá cambiar es el ícono.

Cambiar el color del icono

Cambie también el color del icono a '# ff3233'.

Cambiar el color del texto

Dado que estamos tratando con un color de fondo blanco, deberá cambiar el color del texto a 'Oscuro' dentro de la configuración del texto.

Espaciado

Estamos jugando con la altura de los módulos Blurb para hacer que todo salga un poco más. Para hacer eso, abra la configuración de espaciado y use los siguientes valores de margen superior:

• Margen superior: 100 px (escritorio), 0 px (tableta y teléfono)

Sombra de la caja

Para colmo, también agregaremos una sombra muy sutil:

• Fuerza de desenfoque de sombra de caja: 80px
• Fuerza de propagación de la sombra de caja: -10px
• Color de sombra: rgba (0,0,0,0.11)

Clonar ambos módulos de Blurb y colocarlos en las columnas restantes

Módulos de clonación

Ahora tenemos nuestros dos módulos Blurb que reutilizaremos para las columnas restantes. Clona cada uno de ellos una vez.

Colocar en las columnas 3 y 4

Coloque los módulos de Blurb duplicados en su columna correspondiente y ¡listo!

Avance

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

Pensamientos finales

En esta publicación, hemos compartido algunos consejos y técnicas sobre cómo crear diseño web plano con Divi. El diseño web plano es muy popular hoy en día porque permite a los visitantes navegar fácilmente por las páginas y procesar la información más rápido. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!