Cómo usar las opciones de transformación para diseñar fondos divisores de sección únicos en Divi


Los estilos de divisores de sección integrados de Divi siempre han sido una forma popular (y sencilla) de agregar diseños de fondo creativos a sus páginas. No solo proporciona una forma rápida y hermosa de dividir el contenido de la página, sino que también puede agregar una textura de fondo abstracta para diferenciar su sitio web. Y con el lanzamiento de las opciones de transformación de Divi, hay cosas aún más interesantes que puedes hacer con esos divisores de sección.

En este tutorial, le mostraré cómo usar las opciones de transformación para diseñar fondos de división de sección únicos en Divi.

Empecemos.

Vistazo

Aquí hay un adelanto de los diseños que podrá construir en este tutorial.

fondos de divisor de sección divi

fondos de divisor de sección divi

fondos de divisor de sección divi

fondos de divisor de sección divi

fondos de divisor de sección divi

fondos de divisor de sección divi

Descargue GRATIS el diseño de ejemplos de fondo del divisor de sección

Para poner sus manos sobre estos fondos de división de secciones de ejemplo, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Ahora vayamos al tutorial, ¿de acuerdo?

Empezando

Para comenzar con este tutorial, todo lo que necesita es el tema Divi y una imagen para usar en el contenido de ejemplo. Construiremos el diseño desde cero. Todo lo que necesita hacer es crear una nueva página e implementar el constructor Divi en la interfaz. Entonces estás listo para empezar.

Creación de fondos de formas abstractas con divisores de sección

fondos de divisor de sección divi

Este primer ejemplo es una forma genial de crear fondos de formas abstractas para su contenido. Básicamente, esto implica personalizar una sección vacía con un divisor y colocar ese divisor de sección en cualquier lugar de la página detrás de otro contenido.

He aquí cómo hacerlo.

Crear la sección de contenido

Antes de comenzar a agregar nuestros divisores de sección a nuestra página, primero agreguemos algunos ejemplos de contenido. Cree una nueva sección regular con una fila de dos columnas.

fondos de divisor de sección divi

Agregar el módulo de texto

Luego agregue un módulo de texto a la columna 1 con el siguiente contenido simulado:

About Divi Meetups

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings

Luego actualice el diseño de la siguiente manera:

Tamaño del texto del texto: 16px
Altura de la línea de texto: 1.9em
Fuente del encabezado 2: Roboto
Peso de fuente del encabezado 2: ligero
Tamaño del texto del encabezado 2: 50 px (escritorio), 40 px (tableta), 32 px (teléfono)
Altura de línea de rumbo 2: 1.4em

fondos de divisor de sección divi

Agregar el módulo de imagen

A continuación, agregue un módulo de imagen a la columna 2 y cargue la imagen que desea mostrar. En este ejemplo, estoy usando una imagen de uno de nuestros paquetes de diseño de 800 px por 1156 px.

fondos de divisor de sección divi

Luego, ajuste el ancho y la alineación de la imagen de la siguiente manera:

Ancho: 80% (escritorio), 70% (tableta)
Alineación del módulo: izquierda

fondos de divisor de sección divi

Agregar relleno a la columna 1

Con nuestro texto e imagen en su lugar, necesitamos agregar un relleno superior a la columna 1 para reducir nuestro módulo de texto. Abra la configuración de la fila y actualice lo siguiente:

Relleno personalizado de la columna 1 (escritorio): 250 píxeles en la parte superior
Relleno personalizado de la columna 1 (tableta): 50 píxeles en la parte superior

fondos de divisor de sección divi

Agregar sección superior con divisor de sección

En este punto, estamos listos para agregar nuestro primer diseño de divisor de sección. Para hacer esto, necesitamos crear una nueva sección. Así que continúe y cree una nueva sección regular (no agregue una columna a la sección porque no la necesitaremos) y arrástrela sobre la sección que contiene nuestro texto e imagen.

fondos de divisor de sección divi

Luego, proporcione la sección y el fondo transparente y un divisor superior actualizando lo siguiente:

Color de fondo: rgba (0,0,0,0)
Estilo de divisor superior: ver captura de pantalla
Color del divisor: rgba (120,168,193,0.45)
Altura del divisor: 500 px (escritorio), 400 px (tableta), 300 px (teléfono)

fondos de divisor de sección divi

A continuación, vaya a la pestaña avanzada y establezca el valor del índice Z en 1 para que permanezca por encima de la sección que se encuentra debajo.

fondos de divisor de sección divi

Luego actualice el tamaño y el espaciado de la sección de la siguiente manera:

Ancho: 500px (escritorio), 400px (tableta), 320px (teléfono)
Alineación de la sección: centro
Margen personalizado: -100px
Relleno personalizado: 100 px arriba, 100 px abajo

fondos de divisor de sección divi

Tenga en cuenta que el ancho es igual a la altura del divisor que agregamos anteriormente (500 px para escritorio, 400 px para tableta y 320 px para teléfono). Esto nos dará un diseño perfectamente cuadrado para nuestro divisor de sección. También es importante reducir el ancho y la altura del divisor para ajustar la tableta y el teléfono porque si no lo hace, la sección sesgará y romperá el diseño o provocará un desbordamiento en la ventana del navegador.

El relleno personalizado es solo para darle a la sección algo de altura para que no tengamos que ajustar los valores de conversión de transformación tanto más adelante.

Ahora que tenemos nuestro diseño de sección en su lugar, podemos usar las opciones de transformación para colocar y rotar el divisor de sección donde queramos en la página.

Actualice lo siguiente:

Transformar Traducir eje X (escritorio): -100%
Transformar el eje Y de la traducción (escritorio): 200%

Transformar Traducir eje X (tableta): -50%
Transformar Traducir eje Y (escritorio): 100%

fondos de divisor de sección divi

Transformar Girar eje Z: -45 grados

fondos de divisor de sección divi

Copiar y pegar sección

Vamos a agregar un diseño de divisor de sección más a la página. Pero para comenzar con el diseño, implemente el modo de vista de estructura alámbrica y copie la sección superior (con el estilo de divisor de sección) y péguela debajo de la sección que contiene el texto y la imagen.

fondos de divisor de sección divi

Actualizar la configuración de la sección

Luego actualice el margen personalizado de la siguiente manera:

Margen personalizado: -100px inferior

fondos de divisor de sección divi

A continuación, podemos reducir el tamaño de la sección usando la opción de escala de transformación de la siguiente manera:

Transformar escala (ejes X e Y): 50%

fondos de divisor de sección divi

Usando transform translate, podemos mover la sección hacia arriba y hacia la derecha de la siguiente manera:

Transformar Traducir eje X (escritorio): -20%
Transformar Traducir eje Y (escritorio): -100%

Transformar Traducir eje X (tableta): 80%

Transformar Traducir eje X (tableta): 30%

fondos de divisor de sección divi

Ahora rote la sección de la siguiente manera:

Transformar Girar eje Z (escritorio): 225 grados

Transformar Girar eje Z (tableta): -225 grados

fondos de divisor de sección divi

Resultado final

Veamos el resultado final. Observe cómo se reposicionan las secciones en la tableta y el teléfono para lograr un hermoso diseño.

fondos de divisor de sección divi

fondos de divisor de sección divi

fondos de divisor de sección divi

Y aquí hay algunos ejemplos de diferentes estilos de divisor que utilizan el mismo diseño. Siéntete libre de experimentar con diferentes estilos y rotaciones por tu cuenta.

fondos de divisor de sección divi

fondos de divisor de sección divi

Creación de divisores de sección horizontal

fondos de divisor de sección divi

Las opciones de transformación de Divi también nos permiten rotar divisores de sección para crear diseños de divisores de sección horizontal. Esto puede proporcionar un fondo único para el contenido de su página.

He aquí cómo hacerlo.

Duplique la sección con contenido simulado

Para este ejemplo, podemos usar la misma sección de contenido que creamos para el primer ejemplo anterior. Continúe y copie y pegue la sección en la parte inferior de la página.

fondos de divisor de sección divi

Actualizar la sección de contenido

A continuación, abra la configuración de la sección para la sección duplicada y actualice lo siguiente:

Relleno personalizado (escritorio): 80 px arriba, 80 px abajo
Relleno personalizado (tableta): 0px arriba

fondos de divisor de sección divi

Creación del divisor de sección horizontal

Para crear el divisor de sección horizontal, primero cree una nueva sección regular directamente encima de la sección de contenido.

fondos de divisor de sección divi

Luego actualice lo siguiente:

Color de fondo: rgba (0,0,0,0)
Estilo de divisor superior: ver captura de pantalla
Color del divisor superior: rgba (120,168,193,0.45)
Altura del divisor superior: 80 vw
Flip divisor superior: vertical

fondos de divisor de sección divi

Para asegurarnos de que podemos ver el divisor de sección en la parte superior de la sección que se encuentra debajo, debemos actualizar el índice Z a 1.

fondos de divisor de sección divi

A continuación, debemos darle a nuestra sección un ancho y un espaciado personalizados de la siguiente manera:

Ancho: 800px
Alineación de la sección: izquierda
Margen personalizado: -100 px arriba
Relleno personalizado: 100 px arriba, 100 px abajo

fondos de divisor de sección divi

El ancho de la sección (800px) se convertirá en la altura de la sección una vez que gire para servir como un divisor de sección horizontal. Por lo tanto, es posible que deba ajustar esta altura según la cantidad de contenido que tenga en la sección debajo.

Ahora estamos listos para posicionar y rotar la sección usando las opciones de transformación de la siguiente manera:

Transformar trasladar eje X: -50%
Transformar trasladar eje Y: 250%

fondos de divisor de sección divi

Transformar Girar eje Z: -90deg

fondos de divisor de sección divi

Resultado final

Aquí está el resultado final del diseño.

fondos de divisor de sección divi

fondos de divisor de sección divi

Y aquí hay algunos ejemplos más de diferentes estilos de divisores que utilizan el mismo diseño.

fondos de divisor de sección divi

fondos de divisor de sección divi

Terminando

Siempre hay espacio para más ideas sobre cómo agregar un diseño único a su sitio web. Con las opciones de transformación de Divi y los divisores de sección fáciles de diseñar, puede hacer algunas cosas bastante creativas. Con suerte, los ejemplos de este tutorial lo inspirarán a crear algunos fondos de división de sección para darle un nuevo giro a su próximo proyecto.

Espero tener noticias tuyas en los comentarios.

¡Salud!