¿Quieres crear transiciones de fondo entre elementos? Divi ?
Cree transiciones de diseño de fondo perfectas entre elementos Divi es una gran manera de mejorar el diseño de su Sitio web Divi.
Esto le permite realizar una transición fluida de un degradado, patrón y máscara de fondo entre una línea y una sección de forma creativa.
Por ejemplo, puede tener una transición de patrón o máscara en diferentes colores sin perder la alineación general y el aspecto simétrico del diseño.
En este tutorial, usaremos las opciones de diseño de fondo integradas de Divi para crear una transición de diseño de fondo perfecta entre una sección Divi y una línea. ¡La aplicación y la versatilidad de este diseño son ilimitadas, lo que lleva las opciones de diseño de fondo de Divi a un nivel completamente nuevo!
Vamos a empezar.
vista
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Aquí hay algunos otros diseños de muestra que son posibles con solo unos pocos cambios simples en las máscaras y los patrones de fondo.
Crear una nueva página con Divi Builder
Para comenzar, deberá hacer lo siguiente:
Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.
Dale un título que tenga sentido para ti y haz clic en Utilice Divi Builder
A continuación, haga clic Empezar a construir (Construir desde cero)
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Creando una transición perfecta en el fondo entre una sección Divi y una línea
Crear un encabezado como contenido de marcador de posición
Lea también: Divi: cómo crear pestañas con efecto de desplazamiento a partir de líneas
Antes de comenzar, necesitamos agregar un encabezado como contenido ficticio. Para comenzar, agregue una fila de una columna a la sección predeterminada de la página.
Luego agregue un módulo de texto a la línea.
Agregue texto de tamaño H1.
En la pestaña Diseño, actualice el diseño del texto del encabezado como desee.
- Fuente: Roboto condensada
- Peso de fuente: Negrita
- Estilo: TT
- Alineación de texto: centrado
- Color del texto: #000000
- Tamaño del texto del encabezado: 4vw
- Espaciado entre letras: 0.1em
- Altura de la línea: 1.3 em
Diseño de fondo de sección
Añadido relleno a la sección
Una vez que el encabezado falso esté en su lugar, abra la configuración de la sección y actualice el espaciado de la siguiente manera:
- Relleno (superior e inferior): 15vw
Se agregó el degradado de fondo a la sección.
Ahora que tenemos más espacio para trabajar, estamos listos para agregar nuestro diseño de fondo a la sección. Debajo de la pestaña Gradiente de fondo, agregue los siguientes puntos de degradado:
- Paradas de gradiente:
- 0%: #4f0f75 (al 0%)
- 25%: #2843c9 (al 25%)
- 50%: #4ae2e0 (al 50%)
- 75%: #3881ff (al 75%)
- 100%: #4f0f75 (al 100%)
Agregar un patrón de fondo a la sección
En la pestaña Patrón de fondo, actualice lo siguiente:
- Patrón: Rayas diagonales
- Color del patrón: rgba(79,15,117,0.23)
- Transformar: Girar
- Tamaño del patrón: Tamaño personalizado
- Ancho: 7vw
- Altura: 5vw
- Origen de la repetición del patrón: Centro
Nota: Asegúrese de usar la unidad de longitud VW para el ancho y la altura del patrón. Y también asegúrese de establecer el origen repetido en "centro". Esto mantendrá el patrón de fondo en el mismo lugar que el patrón de fondo que agregaremos a la fila más adelante.
Agregar una máscara de fondo a la sección
En la pestaña Máscara de fondo, agrega lo siguiente:
- Máscara de fondo: gota de capa
- Color de máscara: rgba (0,0,0,0.7)
- Ancho de la máscara: 100vw
- Posición: Centro
Nota: Al igual que con el patrón, necesitamos dimensionar la máscara usando la unidad de longitud VW. También necesitamos darle a la máscara una posición central.
Diseño de fondo de línea
Copie y pegue el fondo de la sección en el fondo de la fila
Para acelerar el proceso de diseño de fondo de línea, copie la configuración de fondo de la sección.
Luego pegue el fondo en la línea existente.
En este punto, ya puede ver cómo el patrón de fondo y la máscara en la línea hacen una transición perfecta al fondo de la sección.
Parece que la línea tiene un fondo transparente, pero en realidad es el mismo patrón y máscara que se usa en la sección con el mismo tamaño y posición.
Ajuste el tamaño de la fila y el relleno con VW
A continuación, debemos darle a nuestra fila un ancho personalizado usando la unidad de longitud VW. Actualice lo siguiente:
- Ancho: 75vw
- Ancho máximo: 75vw
- Relleno (superior, inferior, izquierdo y derecho): 10vw
Ajuste las paradas de gradiente en línea
A continuación, debemos ajustar las paradas de degradado en el fondo de la línea para una transición perfecta al degradado de fondo de la sección.
En la pestaña Gradiente de fondo, mantendremos los tres puntos de degradado medios heredados del fondo de la sección) y eliminaremos la primera y la última parada de degradado.
Luego configure la primera parada en 0% y la tercera parada en 100%. Una vez hecho esto, deberías tener los siguientes gradientes.
- Paradas de gradiente
- 0%: #2843c9
- 50%: #4ae2e0
- 100%: #3881ff
Agregar sombra de cuadro a la línea
Para darle un poco de realce al diseño y enfatizar la transición perfecta del fondo, podemos agregar una sombra de cuadro a la fila.
- Sombra de cuadro: ver captura de pantalla
- Posición Vertical: 0px
- Fuerza de desenfoque de sombra de cuadro: 4vw
- Color de sombra: rgba (0,0,0,0.5)
Ajustar el color del patrón de fondo de la línea
Ahora que tenemos todos los elementos de fondo en su lugar, podemos comenzar a ajustar los colores para un diseño más creativo.
Bajo la opcion Patrón de fondo fila, actualice lo siguiente:
- Color del patrón: rgba(255,255,255,0.23)
Ajustar el color de la máscara de fondo de la línea
También podemos actualizar el color de la máscara de la línea para que el diseño destaque realmente.
En la pestaña Máscara de fondo, actualice lo siguiente:
- Color de la máscara: #ffffff
- Transformación de máscara: invertida
Resultado final
Veamos el resultado final.
Descarga DIVI ahora!!!
Más posibilidades
Aquí hay algunos otros diseños de muestra que son posibles con solo unos pocos cambios simples en las máscaras y los patrones de fondo.
Ver también: Divi: Cómo usar el "Generador de degradados" para embellecer tus imágenes
Descarga DIVI ahora!!!
Conclusión
La clave para crear transiciones de diseño de fondo perfectas en Divi es utilizar sabiamente estas unidades de longitud VW.
Primero, necesitamos crear un diseño de fondo de sección que se ajuste al ancho de la ventana gráfica del navegador (desde una posición centrada en la página). Una vez hecho esto, podemos usar el mismo diseño de fondo de una línea. Después de eso, solo tenemos algunos ajustes de degradado y color para un diseño increíble.
Con suerte, esta técnica agregará otra habilidad de diseño útil para proyectos futuros.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
