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

1. Mantenga la sección del héroe 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, hace uso de un magnífico diseño 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 principal. Y el diseño simple definitivamente no significa aburrido. Significa que no necesitas andarte por las ramas. Puede ir al grano sin tener que exagerar el diseño que está creando para tratar de impresionar a los visitantes.

2. Enfatice las estructuras de caja

Otra cosa que es típica de los estilos de diseño web plano es el uso de estructuras de caja. Si conoce Divi, sabe 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 utilizando una paleta de colores brillantes. Puede elegir dos o tres colores brillantes que personalizarán su sitio web y lo harán coincidir con los valores de su empresa.

4. Use combinaciones de colores degradados muy sutiles

Otra cosa que puede ayudarlo a romper el ciclo es usar combinaciones de colores degradados muy sutiles. Use el mismo color pero un tono diferente para ambos colores degradados. Uno de ellos necesita ser más brillante mientras que el otro tiene una sensación más profunda. No afectarán de inmediato a 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 elegante familia de fuentes

Por lo general, muchos sitios web usan 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, las personas a menudo tienden a saltarse las descripciones y solo leen 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 es usar Arial para los títulos y Georgia para el cuerpo del texto. Georgia sigue siendo 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 tus páginas. Se sorprenderá de lo mucho que puede contribuir a la apariencia general de su sitio web. Sigues manteniendo la estructura de caja que se recomienda para los diseños planos, pero al mismo tiempo, también estás brindando interacción a tus 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

Ajustes de 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 gradiente: 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:

• Relleno superior: 55px
• Relleno inferior: 130px

Añadir Fila #1

Configuración de fila

Estructura de la columna

Continúe agregando su primera fila. Esta sección constará, en total, de tres filas diferentes. Para la primera fila, estamos usando 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 del encabezado: Arial
• Alineación del texto del título: Izquierda
• Color del texto del título: #FFFFFF
• Tamaño del texto del encabezado: 86 px (escritorio), 65 px (tableta), 45 px (teléfono)
• Altura de la línea de encabezado: 1,2 em

Añadir Fila #2

Configuración de fila

Estructura de la columna

Pasemos a la siguiente fila. Estamos, nuevamente, usando una fila con una sola columna.

Dimensionamiento

Antes de agregar cualquier módulo, abra la configuración de su 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 del canalón: 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

Añadir Fila #3

Configuración de fila

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.

Agregue un módulo de texto de descripción 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 del texto: Georgia
• Color del texto: #FFFFFF
• Tamaño del texto: 27 px (escritorio), 22 px (tableta), 18 px (teléfono)
• Altura de línea de texto: 1,9 em
• Alineación de texto: Derecha

Agregue un módulo de botones a la columna 2

Alineación de botones

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

Configuración de botones

El siguiente y último módulo que necesitaremos agregar a nuestra sección principal 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

Añadir Sección Estándar #2

Ajustes de sección

Espaciado

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

• Relleno superior: 155px
• Relleno inferior: 200px

Añadir Fila #1

Configuración de fila

Estructura de la columna

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

Fondo degradado de la columna 1

En lugar de cargar un módulo de imagen, vamos a utilizar un fondo degradado radial de la 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 gradiente: Radial
• Columna 1 Posición inicial: 45%
• Columna 1 Posición final: 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 del canalón: 1

Agregar un módulo divisor

Ocultar divisor

Para asegurarnos de que aparezca 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 degradado de la columna, agregaremos el siguiente margen al Módulo divisor:

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

Volver a la configuración de la fila

Agregar espaciado

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

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

Añadir Fila #2

Configuración de fila

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 columna:

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:

• Encabezado 2 Fuente: Arial
• Encabezado 2 Alineación de texto: Centro
• Color del texto del encabezado: #303030
• Título 2 Tamaño del texto: 50 px (escritorio), 45 px (tableta), 32 px (teléfono)
• Encabezado 2 Altura de línea: 1,3 em

Agregar un módulo divisor

Color

Justo debajo del módulo de texto, agregue un módulo divisor. Esta vez, queremos que se vea el divisor. Dale el código de color ‘#5214ff’.

Dimensionamiento

Cambie la configuración de tamaño de su módulo divisor a continuación:

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

Añadir Fila #3

Configuración de fila

Estructura de la columna

Es hora de crear nuestra fila final usando cuatro columnas.

Copiar fondo degradado de sección

Vamos a usar el mismo fondo degradado que usamos para la sección del héroe. 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 del canalón: 1

Espaciado

También cambiaremos la configuración de Espaciado:

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

Agregar un módulo de Blurb

Seleccionar icono

Ahora que hemos terminado con la configuración de filas, ¡podemos comenzar a agregar nuestros módulos! Necesitaremos cuatro módulos de Blurb, uno para cada columna. En lugar de crearlos por separado, crearemos uno y luego lo duplicaremos. Una vez que agregue su contenido publicitario, 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,6 em

Configuración del texto del cuerpo

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

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

Espaciado

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

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

Modulo Clonar & Cambiar Blurb

Clonar el módulo Blurb y colocarlo en la columna 2

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

Cambiar el ícono

Lo primero que deberá cambiar es el icono.

Cambiar el color del icono

Cambie el color del ícono a ‘#ff3233’ también.

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 de Blurb para que todo se destaque 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 cuadro: 80px
• Fuerza de propagación de la sombra del cuadro: -10px
• Color de sombra: rgba(0,0,0,0.11)

Clone ambos módulos de Blurb y colóquelos en las columnas restantes

Clonar Módulos

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

Lugar en la Columna 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, compartimos algunos consejos y técnicas para crear un 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!