7 técnicas para crear sitios web llamativos y coloridos con Divi

1. ‘Convertir’ Filas en Secciones con Columnas

La primera técnica que puede usar para crear un diseño web audaz y colorido es convertir las filas en secciones. Al eliminar todo el relleno predeterminado entre una sección y una fila, no dejará ninguna diferencia aparente entre los dos. Esto, en combinación con la eliminación del ancho de la canaleta, le permite tener dos columnas que se presionan juntas.

2. Gradientes + Texturas de fondo

El uso de fondos degradados en su sitio web puede ofrecer resultados sorprendentes. Pero lo que te ayuda a potenciar aún más estos colores es combinarlos con un fondo texturizado. Para mantener el equilibrio, use esta combinación para una sola columna. Mantenga la segunda columna limpia y liviana para darle un toque moderno.

3. Colores degradados semitransparentes + divisores de sección debajo

Después de convertir una fila en una sección, también puede agregar divisores de sección al fondo de su columna. Para asegurarse de que los divisores se vean, sin superponer el contenido, use colores degradados ligeramente transparentes para su columna.

4. Superposición de columnas horizontales de módulos

A menudo ves que los sitios web utilizan la superposición vertical. La superposición horizontal, por otro lado, se usa con menos frecuencia, aunque puede brindar resultados absolutamente sorprendentes. Para lograr este tipo de resultado, es importante saber que los elementos de la columna de la derecha tienen una ventaja jerárquica sobre los elementos de la columna de la izquierda. No puede lograr el mismo resultado si coloca sus elementos en la columna de la izquierda.

5. Copia dividida para una alineación perfecta

No hay nada más satisfactorio que tener una alineación perfecta. Es uno de los principios de diseño primarios que distinguen el buen diseño del mal diseño . Para asegurarse de que esta alineación sea perfecta al superponer dos columnas, intente dividir su copia en diferentes módulos de texto. Esto le permitirá crear una alineación perfecta al hacer que el margen izquierdo negativo coincida con esa palabra u oración en particular.

6. Combine los colores de texto negro y semitransparente

Para agregar el aspecto en negrita a su sitio web, use un tamaño de fuente grande para la copia que está compartiendo junto con un peso de fuente de texto ultra negrita. Y para equilibrar la audacia, puede cambiar entre usar un color de texto negro y uno semitransparente. Esto lo ayudará a crear suficiente profundidad y variación en su sitio web.

7. Evite la sombra del cuadro en la parte superior o inferior para unir las secciones

Puede unir fácilmente dos secciones en su página jugando con las opciones de sombra de cuadro. Lo primero es lo primero, usa una sombra de caja muy sutil. Eso significa usar suficiente fuerza de desenfoque, fuerza de dispersión negativa y un color de sombra de cuadro muy claro. Una vez que cree su sombra de caja sutil, juegue con la posición vertical. Para la primera sección de su página, asegúrese de mover la posición vertical hasta que la sombra del cuadro no aparezca en la parte inferior de su sección. Lo mismo se aplica a la última sección, pero en su lugar, asegúrese de que no aparezca en la parte superior.

Avance

Ahora que hemos pasado por todas las diferentes técnicas, es hora de poner las cosas en práctica. Vamos a recrear el siguiente diseño:

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

Ajustes de sección

Divisor superior

Agregue una nueva página con una sección estándar y abra la configuración de la sección de inmediato. Lo primero que necesitaremos es un divisor superior:

• Estilo de divisor: Buscar en la lista
• Color del divisor: rgba (0,0,0,0.13)
• Altura del divisor: 900px
• Voltear el divisor: Vertical
• Disposición de los divisores: Debajo del contenido de la sección

Divisor inferior

Continúe agregando también un divisor inferior similar.

• Estilo de divisor: Buscar en la lista
• Color del divisor: rgba (0,0,0,0.13)
• Altura del divisor: 900px
• Disposición de los divisores: Debajo del contenido de la sección

Espaciado

A continuación, dé a la sección algo de margen y elimine el relleno predeterminado.

• Margen superior e inferior: 50px
• Margen izquierdo y derecho: 50px
• Relleno superior e inferior: 0px
• Relleno izquierdo y derecho: 0px

Esquinas redondeadas

Luego, abra la configuración de Borde y agregue algunas esquinas redondeadas.

• Arriba a la izquierda: 20px
• Arriba a la derecha: 20px

Sombra de la caja

Estamos usando una sombra de cuadro sutil en la parte superior de nuestra sección haciendo los siguientes ajustes:

• Posición vertical de la sombra del cuadro: -23px
• Fuerza de desenfoque de sombra de cuadro: 37px
• Fuerza de propagación de la sombra del cuadro: -29px
• Color de sombra: rgba (0,0,0,0.22)
• Posición de la sombra del cuadro: Sombra exterior

Agregar nueva fila

Estructura de la columna

No es que hayamos terminado de modificar la configuración de la sección, podemos continuar agregando una fila con dos columnas.

Fondo degradado de la columna 1

Sin agregar ningún módulo todavía, vamos a abrir la configuración de la fila. Lo primero que debemos hacer allí es agregar un fondo degradado a nuestra primera columna.

• Color 1: rgba (255.191,0,0,76)
• Color 2: rgba(153,0,255,0.87)

Imagen de fondo de textura de columna 1

Combinaremos este fondo degradado con un fondo texturizado. La imagen que estoy usando es parte del paquete de diseño Meetup de Divi . Guarde la siguiente imagen en su escritorio haciendo clic con el botón derecho y guárdela (es un archivo png con texturas blancas, no podrá ver cómo se ve hasta que lo abra en su computadora y/o lo use en su sitio web) ):

Después de cargar la imagen en su Biblioteca de medios, asegúrese de seleccionar ‘ajustar’ como el Tamaño de imagen de fondo de la Columna 1 también.

Color de fondo de la columna 2

Luego, asigne a su segunda columna el color de fondo ‘#F7F7F7’.

Dimensionamiento

Vamos a ‘convertir’ nuestra fila en una sección haciendo que ocupe todo el ancho de la sección.

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

Espaciado

Además de hacer que la fila ocupe todo el ancho de la sección, también necesitaremos quitar el relleno superior e inferior de nuestra sección.

• Relleno superior e inferior: 0px

Agregue el módulo divisor a la columna 1

Ocultar divisor

¡Comencemos a agregar los módulos! Lo primero que necesitaremos es un módulo divisor en la primera columna. Solo estamos usando este módulo para crear el espacio que necesitamos en la primera columna. En realidad, no queremos que aparezca. Una vez que agregue el módulo, asegúrese de deshabilitar la opción ‘Mostrar divisor’.

Espaciado

Vaya a la configuración de Espaciado a continuación y agregue el siguiente relleno personalizado al divisor:

• Relleno superior: 200 px (computadora de escritorio y tableta), 150 px (teléfono)
• Relleno inferior: 200 px (computadora de escritorio y tableta), 150 px (teléfono)

Agregue el Módulo de Texto #1 a la Columna 2

Agregar copia

Ahora podemos pasar a la segunda columna. Aquí, vamos a soltar nuestros tres módulos de texto diferentes y hacer que se superpongan en ambas columnas. Si desea que un módulo se superponga a dos o más columnas, siempre deberá colocarlo en la columna que está a la derecha. Así es como funciona la estructura jerárquica. Agregue su primer módulo de texto y agregue alguna copia.

Configuración de texto

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

• Peso de fuente de texto: ultra negrita
• Estilo de fuente de texto: Mayúsculas
• Color del texto: #000000
• Tamaño del texto: 250 px (escritorio), 200 px (tableta), 100 px (teléfono)
• Altura de línea de texto: 0,75 em

Espaciado

También necesitaremos algo de margen. El margen izquierdo negativo que estamos usando coincide con la copia que hemos elegido. Si desea que esto funcione también con otro texto, deberá jugar con este valor. Cámbielo hasta que vea que el comienzo de un carácter se alinea con la transición de las columnas.

• Margen superior: 200 px (escritorio), -250 px (tableta), -120 px (teléfono)
• Margen izquierdo: -279 px (escritorio), 5 % (tableta y teléfono)

Clonar módulo de texto dos veces

Clon #1

Cambiar texto

Hemos creado nuestro primer módulo de texto y, para ahorrarnos algo de tiempo, lo clonaremos dos veces y haremos algunos cambios. Lo primero que deberá cambiar sobre el segundo módulo de texto es la copia.

Cambiar espaciado

La copia que estamos usando aquí es diferente, lo que significa que necesitaremos cambiar el margen izquierdo. Observe cómo también estamos usando números decimales para hacer que el módulo de texto se alinee perfectamente. Deshazte del margen superior también.

• Margen izquierdo: -360,7 px (escritorio), 5 % (tableta y teléfono)

Clon #2

Cambiar texto

Cambie también la copia de su tercer módulo de texto.

Cambiar el color del texto

Y para que el diseño se destaque aún más, vamos a cambiar el color del texto de este módulo a ‘rgba(0,0,0,0.19)’.

Cambiar espaciado

Estamos eliminando el margen superior de este módulo y agregando un margen inferior en su lugar. El margen izquierdo negativo también es diferente.

• Margen inferior: 200px
• Margen izquierdo: -410 px (escritorio), 5 % (tableta y teléfono)

Añadir Sección Estándar #2

Ajustes de sección

Espaciado

Hemos terminado con la primera sección, ¡es hora de pasar a la siguiente! Una vez que agregue una nueva sección estándar, abra la configuración de Espaciado y realice los siguientes cambios:

• Margen superior e inferior: 50px
• Margen izquierdo y derecho: 50px
• Relleno superior e inferior: 0px
• Relleno izquierdo y derecho: 0px

Esquinas redondeadas

Continúe agregando algunas esquinas inferiores redondeadas:

• Abajo a la izquierda: 20px
• Abajo a la derecha: 20px

Sombra de la caja

Agregue una sombra de cuadro en la parte inferior de la sección también.

• Posición vertical de la sombra del cuadro: 47px
• Fuerza de desenfoque de sombra de cuadro: 37px
• Fuerza de propagación de la sombra del cuadro: -29px
• Color de sombra: rgba (0,0,0,0.22)
• Posición de la sombra del cuadro: Sombra exterior

Agregar nueva fila

Estructura de la columna

A continuación, agregue una fila con tres columnas a su nueva sección.

Dimensionamiento

Estamos ‘convirtiendo’ esta fila en una sección también:

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

Espaciado

Y eliminaremos el relleno superior e inferior predeterminado.

• Relleno superior e inferior: 0px

Agregue el Módulo de Blurb #1 a la Columna 1

Elegir icono

En total, vamos a necesitar tres módulos de Blurb. Uno para cada columna. Comenzaremos agregando uno en la primera columna y, una vez que hayamos terminado, lo clonaremos y lo colocaremos en las columnas restantes. Esto nos ayudará a ahorrar tiempo. Una vez que haya agregado el contenido a su Módulo de Blurb, seleccione un icono de su elección en la configuración de Imagen e icono.

Fondo degradado

Vamos a hacer que parezca que el icono se superpone a la parte superior del Módulo Blurb usando un fondo degradado para él:

• Color 1: rgba(255.255.255,0)
• Color 2: #A21DF9
• Posición inicial: 20%
• Posición final: 20%

Imagen de fondo de textura

Estamos combinando el fondo degradado con el mismo fondo texturizado que usamos en la sección anterior.

Configuración de iconos

Cambie la configuración del icono a continuación:

• Color del icono: #000000
• Usar tamaño de fuente de icono: Sí
• Tamaño de fuente del icono: 85 px

Configuración de texto

Continúe modificando la configuración del texto.

• Orientación del texto: Centro
• Color del texto: Claro

Configuración del texto del título

Luego, usaremos la siguiente configuración para darle estilo a nuestro título publicitario:

• Peso de la fuente del título: ultra negrita
• Estilo de fuente de texto: Mayúsculas
• Tamaño del texto del título: 46px

Configuración del texto del cuerpo

Y la siguiente configuración para el cuerpo del texto:

• Peso de la fuente del cuerpo: ligero
• Tamaño del cuerpo del texto: 18px

Espaciado

Por último, pero no menos importante, vamos a darle a nuestro Módulo de Blurb algo de espacio para respirar agregando un relleno personalizado:

• Relleno superior: 50px
• Relleno inferior: 100px
• Relleno izquierdo y derecho: 50px

Clonar módulo Blurb dos veces y colocar en las columnas restantes

Clon #1

Cambiar el ícono

Cuando haya terminado de modificar el módulo de Blurb, clónelo dos veces. Después de hacerlo, coloque los duplicados en las columnas restantes. Luego, abra el Módulo Blurb en su segunda columna y cambie el icono que se está utilizando.

Cambiar fondo degradado

Continúe cambiando el segundo color de fondo degradado a ‘#D47A9A’.

Clon #2

Cambiar el ícono

Haga lo mismo para el Módulo Blurb en la última columna.

Cambiar fondo degradado

Para este módulo, estamos usando ‘#F3BF3E’ como el segundo color de fondo degradado.

Avance

Si ha seguido cada uno de los pasos anteriores, debería haber obtenido el siguiente resultado en diferentes tamaños de pantalla:

Pensamientos finales

En esta publicación, le mostramos cómo crear sitios web llamativos y coloridos utilizando solo las opciones integradas de Divi. Primero, analizamos algunas técnicas de Divi que puede abordar y luego, recreamos un ejemplo coincidente desde cero. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!