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

Usar un estilo de diseño atrevido y colorido para su sitio web es una excelente manera de hacer que su sitio web destaque. Le ayudará a darle una vibra positiva a su sitio web y, aunque no se adapta a ningún tipo de sitio web, definitivamente se adapta a muchos de ellos.

En esta publicación, le mostraremos 7 técnicas diferentes de Divi sobre cómo crear un diseño web audaz y colorido utilizando solo las opciones integradas de Divi. Primero, repasaremos las diferentes técnicas y luego recrearemos un ejemplo que coincida con la descripción.

Esta es la última publicación de la serie de publicaciones donde hemos manejado 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!

Suscríbete a nuestro canal de Youtube

1. 'Convertir' filas en secciones con columnas

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

2. Degradados + 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 ligera para darle un toque moderno.

3. Colores degradados semitransparentes + Divisores de sección inferior

Una vez que haya convertido una fila en una sección, también puede agregar divisores de sección al fondo de la 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 usan 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. Divida la copia 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 haciendo que el margen izquierdo negativo coincida con esa palabra u oración en particular.

6. Combinar 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 le ayudará a crear suficiente profundidad y variación en su sitio web.

7. Evite la sombra de la caja en la parte superior o inferior para unir secciones

Puede unir fácilmente dos secciones en su página jugando con las opciones de sombra del cuadro. Lo primero es lo primero, use una sombra de caja muy sutil. Eso significa usar suficiente fuerza de desenfoque, fuerza de propagación negativa y un color de sombra de caja muy claro. Una vez que cree su sutil sombra de caja, 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 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

Configuración de la 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: 900 px
• Flip divisor: Vertical
• Disposición del divisor: contenido de la sección inferior

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 del divisor: contenido de la sección inferior

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
• Acolchado 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 al realizar los siguientes ajustes:

• Posición vertical de la sombra del cuadro: -23px
• Fuerza de desenfoque de sombra de caja: 37px
• Fuerza de propagación de la sombra de caja: -29px
• Color de sombra: rgba (0,0,0,0.22)
• Posición de la caja de sombra: 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.

Columna 1 Fondo degradado

Sin agregar ningún módulo todavía, vamos a abrir la configuración de la fila. Lo primero que tendremos que 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 la columna 1

Combinaremos este fondo degradado con un fondo texturizado. La imagen que estoy usando es parte del paquete de diseño de Meetup de Divi. Guarde la siguiente imagen en su escritorio haciendo clic derecho y guardándola (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 la imagen de fondo de la columna 1 también.

Color de fondo de la columna 2

A continuación, 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 de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

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

• Acolchado superior e inferior: 0px

Agregar 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 (escritorio y tableta), 150 px (teléfono)
• Acolchado inferior: 200 px (escritorio y tableta), 150 px (teléfono)

Agregue el módulo de texto n. ° 1 a la columna 2

Agregar copia

Ahora podemos pasar a la segunda columna. Aquí, vamos a eliminar 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 una copia.

Configuración de texto

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

• Peso de la fuente del texto: Ultra Bold
• 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 la 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 elegimos. Si desea que esto funcione también con otro texto, tendrá que jugar con este valor. Cámbielo hasta que vea que el principio 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: -279px (escritorio), 5% (tableta y teléfono)

Clonar el 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, por lo que significa que tendremos que cambiar el margen izquierdo. Observe cómo también estamos usando números decimales para que el módulo de texto se alinee perfectamente. Deshazte también del margen superior.

• Margen izquierdo: -360.7px (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: 200 px
• Margen izquierdo: -410px (escritorio), 5% (tableta y teléfono)

Agregar sección estándar n. ° 2

Configuración de la 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
• Acolchado superior e inferior: 0px
• Relleno izquierdo y derecho: 0px

Esquinas redondeadas

Continúe agregando algunas esquinas redondeadas inferiores:

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

Sombra de la caja

Agrega también una Sombra de cuadro en la parte inferior de la sección.

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

Agregar nueva fila

Estructura de la columna

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

Dimensionamiento

También estamos 'convirtiendo' esta fila en una sección:

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

Espaciado

Y eliminaremos el relleno superior e inferior predeterminado.

• Acolchado superior e inferior: 0px

Agregue el módulo Blurb n. ° 1 a la columna 1

Elegir icono

En total, necesitaremos tres módulos de Blurb. Uno para cada columna. Comenzaremos agregando uno en la primera columna y cuando terminemos, 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 Blurb, seleccione un ícono de su elección en la configuración de Imagen e Ícono.

Fondo degradado

Vamos a hacer que parezca que el ícono 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

A continuación, cambie la configuración del icono:

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

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 diseñar el título de nuestra propaganda:

• Peso de la fuente del título: Ultra Bold
• 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 texto del cuerpo:

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

Espaciado

Por último, pero no menos importante, le daremos a nuestro módulo Blurb un poco de espacio para respirar agregando un relleno personalizado:

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

Clonar el módulo de Blurb dos veces y colocarlo en las columnas restantes

Clon # 1

Cambiar el ícono

Cuando haya terminado de modificar el módulo 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 ícono que se está utilizando.

Cambiar fondo degradado

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

Clon # 2

Cambiar el ícono

Haz lo mismo con 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 logrado 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, hemos revisado algunas técnicas de Divi que puede abordar y, luego, hemos recreado 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!