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.
Hay innumerables combinaciones y mezclas de diseño de fondo que puede crear con Visual Builder. Los 10 trucos que elegí para esta publicación solo rascarán la superficie, pero están destinados a presentarte diferentes conceptos y despertar tu 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.
Aunque debo advertirte. ¡Una vez que comience a investigar las opciones de fondo, es posible que nunca se dé por vencido! Es muy divertido. Bueno, al menos fue así para mí.
Disfrutar.
Cómo seguir esta publicación
En lugar de tener que empezar de 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 haya completado un truco de diseño anterior antes de que pueda agregar el nuevo truco. Los trucos del 1 al 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 #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 degradado: 135 grados
Posición de inicio: 60 %
Posición final: 60 % (cualquier valor del 60 % o inferior 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: Luz
Fuente del título: Predeterminada, Negrita (B), Mayúsculas (TT)
Tamaño de la fuente del título: 40 px
Tamaño de la fuente del subtítulo: 24 px
Opciones avanzadas
En CSS personalizado en el cuadro Elemento principal, agregue el siguiente CSS:
|
01
|
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 ícono de ajustes en el cuadro de control púrpura.
Luego 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 1960px de ancho. Elegí esta imagen de unsplash.com y la recorté para que la sección sobresaliente de la imagen esté en el lado derecho.]
Usar el efecto Parallax: SÍ (esto es opcional, pero creo que funciona bien con la superposición diagonal)
Método Parallax: Verdadero Paralaje
¡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 #1, nos quedamos 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 a 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: Dirección de degradado lineal
: 135 grados (igual que la otra dirección de 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 Parallax: Sin
imagen de fondo Mezclar: Multiplicar
Ahora tiene 2 superposiciones diagonales superpuestas que se pueden personalizar fácilmente para un diseño de fondo único.
Truco #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
Fondo Tipo de degradado: Radial
Dirección radial: Centro
Posición inicial: 30 %
Posición final: 30 %
Opciones de diseño
Orientación de texto y logotipo: Centro
Ahora echa un vistazo al nuevo fondo del encabezado.
Este truco crea encabezados atractivos o llamados 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 degradado de color semitransparente sobre una imagen de fondo, pero se vería genial sin una imagen de fondo.
Aquí hay 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 círculos en capas para crear un borde circular
Esta es una continuación del Truco n.° 3, en el que terminamos agregando una superposición circular a un módulo de encabezado de ancho completo. Una vez que su superposición de 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 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
En 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 #5: Superposición de círculo inverso
Esta es una continuación del Truco n.º 3 que terminó con una superposición de círculos 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 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. Yo aumentaría la opacidad del azul para que sea un poco más oscuro.
Échale un vistazo…
Truco #6: Superposición de círculo inverso con fondo de video
Esta es una continuación del Truco #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 de círculo. Sugeriría usar un video que no distraiga demasiado. Además, cada vez que use 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
ícono 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 destaque.
Truco #7: Superposición de círculo inverso descentrado
Esta es una continuación del Truco #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 completo y actualice lo siguiente:
Opciones de contenido
Dirección radial: Derecha
Opciones de diseño
Orientación de texto y 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 #8: Usar Gradientes 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 nuestras imágenes, esto es para ti.
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 forma, 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 Configuración de 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 degradado: 90 grados
Posición inicial: 38 %
Posición final: 85 %
Aquí está el resultado.
Truco #9: Mezcla de imagen de fondo
Las nuevas opciones de fondo de Divi incluyen modos de combinació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 tienen que conocer la definición de Saturación o Luminosidad para poder aprovechar estas geniales opciones. Necesitarás tener un color de fondo o degradado establecido en combinación con la imagen de fondo para ver todos los efectos geniales (realmente no funcionará solo con una imagen de fondo). Luego, juega hasta que consigas el aspecto que deseas. Los resultados pueden sorprenderle.
Para este ejemplo, voy a 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 Configuración de encabezado de ancho completo y elimine los degradados de fondo en Opciones de contenido.
Guardar ajustes
Ahora ve a la sección Configuración y actualiza lo siguiente:
Opciones de contenido
Colores de degradado de fondo: rgba(0,0,0,0.76), #0c71c3
Dirección de degradado: 90 grados
Posición inicial: 50 %
Posición final: 50 %
Todavía no puedes 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 dura
Eso es todo. Mira el resultado.
Nota: los colores utilizados aquí crearán diferentes efectos según la imagen de fondo que utilice. Así que te sugiero que juegues con los colores y las opciones de combinación hasta que consigas uno que te guste.
Truco #10: Capas para agregar más colores a tu 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 coloca uno encima del otro, puede crear 5 colores para su fondo degradado. Y cuando estos 5 colores se mezclan, puedes crear un espectro bastante genial.
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 de Blurb.
Actualice la configuración del módulo de Blurb de la siguiente manera:
Opciones de contenido
Título: [ingresar título]
Contenido: [ingresar contenido]
Opciones de diseño
Color del texto: Claro
Orientación del texto: Centro
Fuente del encabezado: Predeterminado, Negrita (B)
Tamaño de la fuente del encabezado: 56 px
Tamaño de la fuente del cuerpo: 22 px
Relleno personalizado: 100 px arriba, 100 px abajo
Dado que el texto de la propaganda es blanco sobre un fondo blanco, aún no puede verlo, pero está bien. Tu pronto. Es hora de comenzar a agregar los colores degradados.
Trabajaremos de atrás hacia adelante, de izquierda a derecha. Para comenzar, vaya a la Sección Configuración y actualice lo siguiente:
Opciones de contenido
Colores de degradado de fondo: #ff0077, #0c71c3
Dirección de degradado: 90 grados
Posición inicial: 0 %
Posición final: 30 %
Opciones de diseño
Relleno personalizado: 0px arriba, 0px abajo
Ahora actualicemos nuestro próximo nivel de degradado de color: nuestra fila. Vaya a Configuración de fila y actualice lo siguiente:
Opciones de contenido
Colores de degradado de fondo: rgba(255,255,255,0), #8300e9
Dirección de degradado:
90 grados Posición de inicio: 25 %
Posición final: 50 %
Columna 1 Colores de degradado de fondo: rgba (255,255,255,0), #e02b20
Dirección de degradado: 90 grados
Posición de inicio: 50 %
Posición final: 75%
Opciones de diseño
Hacer que esta fila tenga ancho completo: SÍ
Usar ancho de medianil personalizado: SÍ
Ancho de medianil: 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 de degradado: 90 grados
Posición inicial: 75 %
Posición final: 100 %
Opciones de diseño
Relleno personalizado: 100 px arriba, 100 px abajo
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 (toma unos 20 segundos).
Si cambia el Tipo de degradado a Radial para todas las capas (sección, fila, columna y módulo de publicidad), obtendrá algo como esto.
Truco de bonificación
Aquí hay un ejemplo de cómo puede superponer imágenes de fondo con parallax. Esta es una sección regular con una imagen de fondo usando True Parallax. Dentro de la sección hay una fila de 1 columna que se hizo de ancho completo y sin relleno, por lo que se extiende por 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é esto con algunos ejemplos de diseño que construí mientras probaba estos mismos trucos mencionados en esta publicación.
Pensamientos finales
Espero que hayas disfrutado explorando estas nuevas opciones de fondo y estés entusiasmado con las posibilidades que brindan. 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.
Esperando saber de usted en los comentarios.