Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 901.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62.

¿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 Dos.

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.

crear transiciones de fondo perfectas entre elementos Divi

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 transiciones de fondo perfectas entre elementos Divi
crear transiciones de fondo perfectas entre elementos Divi
crear transiciones de fondo perfectas entre elementos Divi

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.

Divi líneas convertidas en pestañas

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)

Divi líneas convertidas en pestañas

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, debemos agregar un encabezado como contenido de marcador de posición. Para comenzar, agregue una fila de una columna a la sección predeterminada de la página.

Cree fácilmente su sitio web con Elementor

Elementor te permite crear Fácil y Gratis cualquier sitio web o diseño de blog con un aspecto profesional. Deja de pagar mucho por un sitio web que puedes hacer tú mismo.

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.

¿Quieres vender tus productos en internet?

Descarga WooCommerce gratis, los mejores plugins de comercio electrónico para vender tus productos físicos y digitales en WordPress y crea fácilmente tu tienda online. Perfecto para principiantes.

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.

crear transiciones de fondo perfectas entre elementos Divi

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.

crear transiciones de fondo perfectas entre elementos Divi

Ver también: Divi: Cómo usar el "Generador de degradados" para embellecer tus imágenes

crear transiciones de fondo perfectas entre elementos Divi
crear transiciones de fondo perfectas entre elementos Divi

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.

...

%d bloggers les gusta esta página: