10 trucos de diseño de fondo ahora posibles con la nueva configuración de fondo de Divi

Desde el lanzamiento de la nueva interfaz de opciones de fondo de Divi, Divi se ha vuelto aún más poderoso. Las nuevas características han abierto muchas nuevas posibilidades de diseño. Hoy, voy a presentar algunos trucos de diseño nuevos que quizás no conozcas y, con suerte, puedo inspirarte para crear algunos diseños de fondo increíbles.

Existen innumerables combinaciones y mezclas de diseños de fondo que puede crear con Visual Builder. Los 10 trucos que escogí para esta publicación solo arañarán la superficie, pero están destinados a presentarle diferentes conceptos y despertar su interés. La mayoría de estos trucos de diseño se logran utilizando las nuevas opciones de fondo, como las nuevas opciones de fondo degradado y la combinación de imágenes de fondo con colores degradados.

Sin embargo, debo advertirte. Una vez que comience a profundizar en las opciones de fondo, ¡es posible que nunca abandone! Es muy divertido. Bueno, al menos así fue para mí.

Disfrutar.

Aquí hay un adelanto de los trucos de diseño

Cómo seguir esta publicación

En lugar de tener que empezar desde cero cada vez que explico un nuevo truco de diseño, utilicé el mismo diseño de ejemplo para la mayoría de ellos y agregué diferentes trucos a ese diseño. Esto significa que la mayoría de los ejemplos requieren que hayas completado un truco de diseño previo antes de poder aplicar el nuevo truco. Los trucos n. ° 1-9 siguen la misma configuración básica y requieren el truco n. ° 1 como requisito previo. Entonces, si está probando las funciones, le sugiero que comience con el truco n. ° 1.

10 trucos de diseño de fondo con Divi

Suscríbete a nuestro canal de Youtube

Truco n. ° 1: superposición diagonal

Agregue una sección de ancho completo y luego inserte un módulo de encabezado de ancho completo.

Luego actualice la configuración del módulo de encabezado de la siguiente manera:

Opciones de contenido

Título: [ingrese el título]
Subtítulo: [ingrese el subtítulo]
URL de la imagen del logotipo: [ingrese el logotipo]
Colores de degradado de fondo: rgba (12,113,195,0.55), rgba (255,255,255,0)
Tipo de degradado: lineal
Dirección del gradiente: 135 grados
Posición inicial: 60%
Posición final: 60% (cualquier valor del 60% o menos funcionará)

Dado que el gradiente comienza y termina en el mismo punto, básicamente no se produce ningún efecto de gradiente. Entonces, el resultado son los dos colores en cada lado del marcador del 60%. Eso combinado con el ángulo de la dirección del degradado crea el efecto.

Opciones de diseño

Color del texto: claro
Fuente del título: Predeterminado, Negrita (B), Mayúsculas (TT)
Tamaño de fuente del título: 40px
Tamaño de fuente del subtítulo: 24px

Opciones avanzadas

En CSS personalizado en el cuadro Elemento principal, agregue el siguiente CSS:

Padding: 150px 0;

Esto es solo para agregar algo de relleno adicional en la parte superior e inferior del módulo de encabezado

Guardar ajustes

Ahora es el momento de agregar un fondo a su sección de ancho completo. Vaya a Configuración de la sección de ancho completo haciendo clic en el icono de engranaje en el cuadro de control púrpura.

A continuación, actualice las opciones de contenido de la configuración de la sección de la siguiente manera:

Imagen de fondo: [ingrese la imagen de fondo aquí. Debe tener al menos 1960 px de ancho. Elegí esta imagen de unsplash.com y la recorté para que la sección destacada de la imagen esté en el lado derecho.]
Use el efecto Parallax: SÍ (esto es opcional, pero creo que funciona bien con la superposición diagonal)
Método Parallax: True Parallax

¡Eso es todo! Siéntase libre de ajustar la opacidad del color del degradado y el grado de la dirección del degradado a su gusto.

Creo que hemos tenido un buen comienzo. Pasemos al segundo truco.

Truco n. ° 2: superposición de capas diagonales

Este truco de diseño es una continuación del truco n. ° 1, así que asegúrese de haber completado el truco n. ° 1 antes de continuar.

En el truco n. ° 1, lo dejamos con una superposición diagonal usando la opción de degradado de fondo en el módulo de encabezado de ancho completo.

Usando el mismo ejemplo, agregue un degradado de fondo adicional a la sección de ancho completo. Ya tenemos una imagen de fondo para esa sección, pero con las nuevas opciones de Divi podemos combinar colores degradados con su imagen de fondo y luego mezclarlos con ciertos efectos.

Vaya a la configuración de la sección de ancho completo y actualice las siguientes opciones de contenido :

Colores de degradado de fondo: rgba (131,0,233,0.38), rgba (255,255,255,0)
Tipo de degradado: lineal
Dirección del degradado: 135 grados (igual que la otra dirección del degradado en su módulo de encabezado)
Posición inicial: 38%
Posición final: 38%

Ahora haga clic en el icono de la imagen de fondo y cambie lo siguiente:

Usar efecto de paralaje: No
Mezcla de imagen de fondo: multiplicar

Ahora tiene 2 superposiciones diagonales superpuestas que se pueden personalizar fácilmente para un diseño de fondo único.

Truco n. ° 3: superposición de círculos

Este truco de diseño es una continuación del truco n. ° 1, así que asegúrese de haber completado el truco n. ° 1 antes de continuar.

Ahora vamos a convertir esa superposición diagonal del truco n. ° 1 en una superposición circular. Para hacer esto, vaya a la Configuración del módulo de ancho completo y actualice lo siguiente:

Opciones de contenido

Tipo de degradado de fondo: radial
Dirección radial: centro
Posición inicial: 30%
Posición final: 30%

Opciones de diseño

Orientación del texto y el logotipo: Centro

Ahora mira el nuevo fondo del encabezado.

Este truco crea encabezados de gran apariencia o llamadas a la acción. El tamaño de la superposición del círculo se puede ajustar fácilmente y responde bien a diferentes tamaños de pantalla. En este momento estoy usando un color degradado semitransparente encima de una imagen de fondo, pero se vería genial sin una imagen de fondo.

A continuación, se muestra un ejemplo de cómo se vería sin una imagen de fondo y con un color de texto más oscuro.

Truco n. ° 4: superposición de capas de círculos para crear un borde circular

Esta es una continuación del truco n. ° 3 en el que dejamos de agregar una superposición de círculo a un módulo de encabezado de ancho completo. Una vez que la superposición de su círculo esté en su lugar, podemos agregar una segunda superposición de círculo para que sirva como borde para la primera. Hacemos esto agregando otro degradado de fondo a la Sección de ancho completo que se encuentra detrás del Módulo de encabezado de ancho completo.

Vaya a la configuración de la sección de ancho completo y actualice lo siguiente:

Opciones de contenido

En la pestaña Imagen de fondo:

Usar efecto de paralaje: NO
Mezcla de imagen de fondo: multiplicar

Debajo de la pestaña Gradiente de fondo:

Colores de degradado de fondo: rgba (0,0,0,0,45), rgba (255,255,255,0)
Tipo de degradado de fondo: radial
Dirección radial: centro
Posición inicial: 34%
Posición final: 34%

Guardar ajustes

Eso es todo.

También puede cambiar fácilmente el tamaño de su círculo de degradado de fondo ajustando el porcentaje de la Posición de inicio.

Truco n. ° 5: superposición de círculo inverso

Esta es una continuación del truco n. ° 3 que terminó con un círculo superpuesto en el módulo de encabezado de ancho completo. En este momento, el círculo es azul semitransparente y el resto de la imagen de fondo no tiene ningún color de superposición de degradado. Para este truco, voy a cambiar esto e invertir la superposición del círculo para que la superposición de degradado azul semitransparente rodee el círculo y dentro del círculo exponga la imagen de fondo detrás de él.

Para hacer esto, vaya a la Configuración de encabezado de ancho completo y actualice lo siguiente:

Opciones de contenido

Colores de degradado de fondo: rgba (255,255,255,0), rgba (12,113,195,0.79)

Nota: Todo lo que realmente está haciendo aquí es intercambiar los colores de la izquierda y la derecha. Ahora el color transparente es lo que se muestra dentro del círculo y el degradado azul lo rodea. Aumentaría la opacidad del azul para que sea un poco más oscuro.

Echale un vistazo…

Truco n. ° 6: superposición de círculo inverso con fondo de video

Esta es una continuación del truco n. ° 5 que nos dejó con una superposición de círculo inverso con un fondo azul circundante. Actualmente, el círculo expone una imagen de fondo detrás de él. Puede agregar fácilmente un fondo de video para sentarse detrás de esta superposición circular. Sugeriría usar un video que no distraiga demasiado. Además, siempre que esté utilizando videos, asegúrese de que el tamaño del archivo sea pequeño para que el tiempo de carga de su página no se vea afectado.

Para reemplazar la imagen de fondo con un video, vaya a Configuración de la sección de ancho completo, haga clic en el
icono de video de fondo y agregue su video.

Ahora vaya a la Configuración del encabezado de ancho completo y actualice lo siguiente:

Opciones de contenido

Colores de degradado de fondo: rgba (12,113,195,0.67), # 333333

Con los nuevos colores degradados, el video de fondo solo es visible dentro del círculo. Y los colores superpuestos realmente hacen que el texto resalte.

Truco n. ° 7: superposición de círculo inverso descentrado

Esta es una continuación del truco n. ° 5 que nos dejó con una superposición de círculo inverso. Si regresa a la Configuración de encabezado de ancho completo, puede ajustar la Dirección radial a diferentes configuraciones para crear diferentes apariencias para su encabezado.

Vaya a Configuración de encabezado de ancho total y actualice lo siguiente:

Opciones de contenido

Dirección radial: derecha

Opciones de diseño

Orientación del texto y el logotipo: izquierda

Aquí está el resultado final y algunos ejemplos de diferentes direcciones radiales:

Estos ejemplos obviamente necesitan algo de trabajo, pero entiendes la idea.

Truco n. ° 8: usar degradados para efectos de sombra

Este truco puede no ser asombroso, pero es extremadamente útil. Para aquellos de nosotros que no queremos molestarnos en usar un editor de fotos como Photoshop para agregar sombras a sus imágenes, esto es para usted.

Esta es una continuación del truco n. ° 1 que terminó con una superposición diagonal usando la opción de degradado de fondo en el módulo de encabezado de ancho completo. Ahora cambiemos la superposición azul semitransparente a un sombreado oscuro que comienza a la izquierda de la imagen y se desvanece gradualmente hacia la derecha. De esta manera, la parte principal de la imagen de la derecha permanece intacta y la sombra oscura de la izquierda ayuda a que el texto sea más legible.

Para agregar el efecto de sombra, vaya a la Configuración del encabezado de ancho completo y actualice lo siguiente:

Opciones de contenido

Colores de degradado de fondo: rgba (0,0,0,0,55), rgba (0,0,0,0)
Dirección del gradiente: 90 grados
Posición inicial: 38%
Posición final: 85%

Aquí está el resultado.

Truco n. ° 9: mezcla de imágenes de fondo

Las nuevas opciones de fondo de Divi incluyen modos de fusión CSS para personalizar imágenes. Explorar las diferentes combinaciones de imágenes es muy divertido y tiende a crear algunos diseños sorprendentes. Para aquellos de ustedes que no son diseñadores, no es necesario que conozcan la definición de Saturación o Luminosidad para aprovechar estas fantásticas opciones. Necesitará tener un color de fondo o un degradado en combinación con la imagen de fondo para ver todos los efectos geniales (realmente no funcionará solo con una imagen de fondo). Luego juegue hasta que obtenga el aspecto que desea. Los resultados pueden sorprenderle.

Para este ejemplo, continuaré desde el truco n. ° 1, que terminó con una superposición diagonal usando la opción de degradado de fondo en el módulo de encabezado de ancho completo.

Vaya a la Configuración de encabezado de ancho completo y elimine los degradados de fondo en Opciones de contenido.

Guardar ajustes

Ahora vaya a la Configuración de la sección y actualice lo siguiente:

Opciones de contenido

Colores de degradado de fondo: rgba (0,0,0,0,76), # 0c71c3
Dirección del gradiente: 90 grados
Posición inicial: 50%
Posición final: 50%

Todavía no puede ver ningún cambio. Esta bien. Vaya a la pestaña Imagen de fondo y actualice lo siguiente:

Usar efecto de paralaje: NO
Mezcla de imagen de fondo: luz intensa

Eso es todo. Mira el resultado.

Nota: los colores usados ​​aquí crearán diferentes efectos basados ​​en la imagen de fondo que use. Así que sugiero jugar con los colores y las opciones de mezcla hasta que obtengas uno que te guste.

Truco n. ° 10: capas para agregar más colores a su fondo degradado.

De forma predeterminada, cada sección, fila, columna y módulo puede tener dos degradados de color. Sin embargo, cuando los combina y los superpone, puede crear 5 colores para su fondo degradado. Y cuando estos 5 colores se combinan, puedes crear un espectro bastante bueno.

Así es como lo haces. Primero, agregue una Sección Regular con una fila de estructura de 1 columna. Luego, dentro de la fila, agregue un módulo Blurb.

Actualice la configuración del módulo Blurb de la siguiente manera:

Opciones de contenido

Título: [ingrese el título]
Contenido: [ingresar contenido]

Opciones de diseño

Color del texto: claro
Orientación del texto: centro
Fuente de encabezado: Predeterminado, Negrita (B)
Tamaño de fuente del encabezado: 56px
Tamaño de fuente del cuerpo: 22px
Relleno personalizado: 100px superior, 100px inferior

Dado que el texto de la propaganda es blanco sobre un fondo blanco, todavía no puede verlo, pero está bien. Tu pronto. Es hora de comenzar a agregar los colores degradados.

Trabajaremos nuestro camino de atrás hacia adelante, de izquierda a derecha. Para comenzar, vaya a Configuración de la sección y actualice lo siguiente:

Opciones de contenido

Colores de degradado de fondo: # ff0077, # 0c71c3
Dirección del gradiente: 90 grados
Posición inicial: 0%
Posición final: 30%

Opciones de diseño

Relleno personalizado: 0px superior, 0px inferior

Ahora actualice nuestro siguiente nivel de color degradado: nuestra fila. Vaya a la Configuración de filas y actualice lo siguiente:

Opciones de contenido

Colores de degradado de fondo: rgba (255,255,255,0), # 8300e9
Dirección del gradiente: 90 grados
Posición inicial: 25%
Posición final: 50%
Columna 1 Colores de degradado de fondo: rgba (255,255,255,0), # e02b20
Dirección del gradiente: 90 grados
Posición inicial: 50%
Posición final: 75%

Opciones de diseño
Hacer esta fila de ancho completo: SÍ
Usar ancho de canalón personalizado: SÍ
Ancho de la canaleta: 1
Relleno personalizado: 0px superior, 0px inferior

Guardar ajustes

Ahora, para la capa final de degradado, debemos ir al Módulo Blurb y actualizar lo siguiente:

Opciones de contenido
Colores de degradado de fondo: rgba (255,255,255,0), # edf000
Dirección del gradiente: 90 grados
Posición inicial: 75%
Posición final: 100%

Opciones de diseño

Relleno personalizado: 100px superior, 100px inferior

Eso es todo. Ahora tiene cinco colores degradados que se combinan para crear un fondo bastante colorido.

No olvide que también puede cambiar el Tipo de degradado a Radial (circular) y cambiar completamente el diseño (tarda unos 20 segundos).

Si cambia el Tipo de degradado a Radial para todas las capas (sección, fila, columna y módulo de propaganda), obtendrá algo como esto.

Truco de bonificación

A continuación se muestra un ejemplo de cómo se pueden superponer imágenes de fondo con paralaje. Esta es una sección normal con una imagen de fondo que utiliza True Parallax. Dentro de la sección hay una fila de 1 columna que se hizo de ancho completo y sin relleno para que se extienda a todo el ancho de la sección. A la fila, agregué una imagen de fondo transparente con algunos círculos degradados (se supone que parecen burbujas) usando el método CSS Parallax. Luego agregué un Módulo de llamada a la acción a la fila con un fondo transparente. Esta combinación crea movimiento al desplazarse hacia abajo en la sección de la página.

Este truco es un poco más complicado ya que requiere crear una foto personalizada fuera de Divi. Simplemente espero mostrarte las posibilidades.

Algunos ejemplos más

Terminaré con algunos ejemplos de diseño que construí mientras probaba estos mismos trucos mencionados en esta publicación.

Pensamientos finales

Espero que haya disfrutado explorando estas nuevas opciones de fondo y esté entusiasmado con las posibilidades que ofrecen. Y, dado que estas opciones están disponibles en secciones, filas, columnas y módulos, puede aplicar estos trucos de diseño en cualquier parte de su sitio web. Si aún no lo ha hecho, tómese un tiempo para profundizar un poco más y dejar fluir esos jugos creativos. Estoy seguro de que si se toma el tiempo de explorar las opciones de fondo por sí mismo, estará emocionado de implementarlas en su próximo proyecto. No puedo esperar a ver qué se te ocurre.

Esperamos tener noticias tuyas en los comentarios.