Uso de los controles de transformación de Divi para crear diseños de módulos de Blurb únicos

Los controles de transformación de Divi facilitan la colocación y el estilo de los elementos de su página para crear diseños únicos. El módulo de propaganda de Divi es uno de los elementos más comunes para presentar elementos en un sitio web. Entonces, pensé en mostrar cómo usar esos efectos de transformación creando un par de diseños únicos con el módulo de propaganda. Claro, puede lograr un posicionamiento similar usando márgenes y relleno, pero el proceso sería mucho más complicado y no tan divertido. Además, los controles de transformación le permiten agregar un estilo adicional para escalar y rotar sus desenfoques para obtener diseños aún más exclusivos.

En este tutorial, le mostraré cómo colocar y rotar los borrones de manera creativa utilizando los controles de transformación de Divi.

Empecemos.

Comenzando

Para este tutorial, todo lo que realmente necesita es Divi. Para configurar las cosas, siga adelante y cree una nueva página. Asigne un título a su página e implemente el constructor Divi en la interfaz para crear una página desde cero.

Ahora estás listo para empezar.

Creación de diseño de diseño de Blurb # 1

En este primer diseño de diseño, vamos a estructurar nuestros anuncios usando dos filas diferentes. Luego, usaremos las opciones de Divi Transform para escalar y posicionar los módulos de propaganda para crear un diseño de módulo de propaganda único.

Crear la primera fila

Para comenzar, cree una sección regular y luego agregue el siguiente diseño de columna para la fila: 1/2 1/6 1/6 1/6

Agregar y diseñar el módulo de texto

En la columna 1/2 de la izquierda, agregue un módulo de texto con el siguiente contenido:

<h2>Our Services</h2>
<p>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.</p>

Luego actualice la siguiente configuración de diseño:

Color de fondo: #ffffff
Ancho: 500px
Margen personalizado (escritorio): -70 px a la izquierda
Margen personalizado (tableta): 20 px a la izquierda
Relleno personalizado: 20 píxeles en la parte superior, 20 píxeles en la parte inferior

Actualizar relleno de sección

A continuación, necesitamos agregar algo de relleno a nuestra sección. Abra la configuración de la sección y actualice lo siguiente:

Acolchado personalizado: top 20vw

Actualizar la configuración de la primera fila

A continuación, actualice la configuración de la fila de la siguiente manera:

Ancho de la canaleta: 1
Relleno personalizado: 10vw superior, 0px inferior
Ancho del borde: 5px
Color del borde: #eeeeee

Agregar la segunda fila

A continuación, agregue otra fila debajo de la fila que acaba de personalizar. Dale un diseño de seis columnas.

Crea y aplica estilo a los módulos de Blurb

Ahora es el momento de comenzar a crear los módulos de propaganda que eventualmente colocaremos usando los controles de transformación. Agregue una columna 2 del módulo de propaganda de la primera fila (superior) que creó.

En la configuración de propaganda, elimine el contenido y actualice el texto del título con la palabra "Servicios". Luego haga clic para usar un icono en lugar de una imagen. Para este ejemplo, estoy usando el ícono de la nube.

Actualice el resto de la configuración de la propaganda de la siguiente manera:

Color del icono: #ffffff
Icono de círculo: SÍ
Color del círculo: # 5e89fb
Fuente del título: Nunito
Alineación del texto del título: centro
Tamaño del texto del título: 16px
Relleno personalizado: 1vw superior, 1vw inferior, 1vw izquierda, 1vw derecha

Luego actualice el margen predeterminado debajo del ícono de propaganda agregando el siguiente CSS al cuadro de CSS de imagen de Blurb debajo de la pestaña avanzada:

margin-bottom: 5px

A continuación, copie el módulo de propaganda que acaba de crear y péguelo en cada una de las columnas, asegurándose de tener dos módulos de propaganda en la columna 3 de la fila superior y deje las columnas 5 y 6 vacías en la segunda fila.

Agregar efectos de transformación para escalar y colocar los desenfoques

Ahora estamos listos para usar los controles de transformación para posicionar y escalar los desenfoques en un diseño único.

Primero, abra la configuración de propaganda de la propaganda en la columna 2 de la fila superior y actualice los controles de transformación de la siguiente manera:

Transformar escala del eje X: 242%
Transformar el eje Y de la escala: 242%

Transformar Traducir eje X: -96px
Transformar trasladar eje Y: -44px

A continuación, actualice la configuración del módulo Blurb superior en la columna 3 de la primera fila de la siguiente manera:

Transformar escala del eje X: 192%
Transformar el eje Y de la escala: 192%

Transformar Traducir eje X: -70px
Transformar trasladar eje Y: -13px

Luego, actualice el módulo de propaganda en la columna 4 de la fila superior de la siguiente manera:

Transformar escala del eje X: 158%
Transformar el eje Y de la escala: 158%

Transformar trasladar eje X: 33px
Transformar trasladar eje Y: -13px

A continuación, actualice el módulo de propaganda inferior en la columna 3 de la fila superior de la siguiente manera:

Transformar escala del eje X: 132%
Transformar escala del eje Y: 132%

Transformar trasladar eje X: 89px
Transformar trasladar eje Y: 39px

Luego, dale el siguiente color de fondo para crear una ruptura en el borde de la fila para un elemento de diseño sutil:

Color de fondo: #ffffff

¡Eso es todo!

Para un elemento de diseño adicional, puede aumentar gradualmente la opacidad del color del círculo en cada uno de los iconos utilizados en todo el diseño.

Ajustes móviles

Para ajustar el diseño del módulo de propaganda para pantallas de tabletas y teléfonos, simplemente podemos volver a configurar los efectos de transformación al estado original para que los desenfoques vuelvan a su tamaño original y se coloquen bien dentro de las columnas. Para hacer esto, podemos usar la función de selección múltiple de Divi. Dado que puede ser difícil hacer clic en los módulos que se han colocado con la propiedad de transformación, es un buen momento para habilitar el modo de cuadrícula en la configuración de su constructor. Esto le permitirá ver los módulos de propaganda en su posición original. Una vez que esté en el modo de cuadrícula, continúe y mantenga presionada la tecla ctrl o cmd y luego haga clic en cada uno de los módulos que tienen un efecto de transformación. Luego haga clic en el ícono de ajustes de cualquiera de los módulos seleccionados para abrir el modal de configuración del elemento.

En el modal Configuración de elementos, actualice lo siguiente:

Transformar escala del eje X: 100%
Transformar escala eje Y: 100%

Transformar trasladar eje X: 0px
Transformar trasladar eje Y: 0px

Esto restaurará la posición original y la escala de las imágenes borrosas en las pantallas de la tableta y el teléfono.

Resultado final

Aquí está el diseño final.

Creación de diseño de módulo de Blurb # 2

En el siguiente ejemplo, le mostraré un diseño de módulo de propaganda único utilizando las opciones de transformación de escala, traducción y rotación de Divi. También incluiré un fragmento de CSS adicional que agrega perspectiva a cada uno de los anuncios. He aquí cómo hacerlo.

Crear el encabezado

Primero, agregue una nueva sección regular con una fila de una columna. Luego agregue un módulo de texto a la fila con el siguiente contenido:

<h2>Our Process</h2>
<p>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.</p>

Luego actualice el resto de la configuración del módulo de texto de la siguiente manera:

Fuente del encabezado 2: Nunito
Peso de fuente del encabezado 2: Semi negrita
Tamaño del texto del encabezado 2: 50 px
Encabezado 2 espaciado de letras: 7px
Ancho: 500px

Crear el diseño de Blurb con una fila de seis columnas

Eso se encarga del encabezado. Ahora es el momento de agregar la fila para nuestro diseño de módulo de propaganda. Continúe y cree una nueva fila con un diseño de seis columnas directamente debajo de la fila actual.

Diseñar el módulo Blurb

En la primera columna, agregue un nuevo módulo de propaganda y actualice la configuración de la siguiente manera:

Elimine el texto del cuerpo en el cuadro de contenido y actualice el texto del título con la palabra "Paso".

Luego haga clic para usar un ícono y elija el ícono de verificación circular.

Dale a Blurb un color de fondo blanco de la siguiente manera:

Color de fondo: #ffffff

Luego actualice la configuración de diseño:

Color del icono: #ffffff
Icono de círculo: SÍ
Color del círculo: # 3d0dad
Fuente del título: Nunito
Peso de la fuente del título: negrita
Estilo de fuente del título: TT
Alineación del texto del título: centro
Espaciado de letras de título: 4px

Luego, dale a la propaganda una sombra de cuadro de la siguiente manera:

Box Shadow: ver captura de pantalla
Color de sombra: rgba (0,0,0,0.12)

Y finalmente, agregue el efecto de transformación de rotación al módulo de propaganda:

Transformar Girar eje X: -3deg
Transformar Girar eje Y: -10 grados
Transformar Girar eje Z: 31 grados

Eso se encarga de nuestro primer módulo de propaganda.

Actualizar la configuración de la fila

Ahora, antes de comenzar a duplicar nuestro módulo de propaganda, debemos actualizar la configuración de la fila de la siguiente manera:

Ancho de la canaleta: 2
Relleno personalizado: 11vw superior, 0px inferior

Esto ayudará a espaciar los borrones en el diseño.

Duplicar y diseñar el resto de los desenfoques

Ahora estamos listos para duplicar y personalizar el resto de los anuncios. Continúe y copie el módulo de propaganda en la columna 1 y péguelo en todas las columnas restantes excepto en la última columna (columna 6). Dejaremos la columna 6 vacía para dejar más espacio para que los anuncios se muevan hacia la derecha.

Ahora abra la configuración del módulo de propaganda en la columna 2 y actualice lo siguiente:

Color del círculo: # 62de9d

Transformar escala del eje X: 120%
Transformar escala del eje Y: 120%

Transformar el eje Y de la traducción: -10% (asegúrese de escribir el valor porcentual aquí)

A continuación, actualice el módulo de propaganda en la columna 3 de la siguiente manera:

Color del círculo: # 5e89fb

Transformar escala del eje X: 140%
Transformar el eje Y de la escala: 140%

Transformar trasladar eje Y: -20%
Transformar trasladar eje X: 10%

Actualice el módulo de propaganda en la columna 4 de la siguiente manera:

Color del círculo: # 2a3fc9

Transformar escala del eje X: 160%
Transformar el eje Y de la escala: 160%

Transformar trasladar eje Y: -30%
Transformar trasladar eje X: 30%

Y finalmente, actualice el módulo de propaganda en la columna 5 de la siguiente manera:

Color del círculo: # 62de9d

Transformar escala del eje X: 180%
Transformar el eje Y de la escala: 180%

Transformar trasladar eje Y: -40%
Transformar trasladar eje X: 55%

Como puede ver, cada uno de los anuncios aumentará el tamaño en un 20% de izquierda a derecha. Y los valores de porcentaje de conversión de Transformación aseguran que los borradores se mantengan bien alineados.

Dado que el diseño se desborda en la última columna (columna 6), la dejaremos en blanco. Pero siempre puede agregar otra propaganda en la columna 6 si aumenta el tamaño de la fila.

Agregar la propiedad de perspectiva a cada columna

En CSS, la propiedad de perspectiva se usa para darle a un elemento posicionado en 3D cierta perspectiva en Z-Space. Básicamente, define qué tan lejos aparece el objeto del usuario cuando mira la pantalla. La propiedad de perspectiva debe aplicarse al contenedor principal de aquello que tiene la posición 3D, que en este caso es nuestro módulo de propaganda. Por lo tanto, debemos agregar la perspectiva a cada una de las columnas usando un pequeño fragmento de CSS de la siguiente manera.

Agregue el siguiente CSS al cuadro CSS del elemento principal de la columna para cada una de las 5 columnas de la siguiente manera:

Elemento principal de la columna 1:

perspective: 1000px

Elemento principal de la columna 2:

perspective: 1000px

Elemento principal de la columna 3:

perspective: 1000px

Elemento principal de la columna 4:

perspective: 1000px

Elemento principal de la columna 5:

perspective: 1000px

En este caso, el cambio es muy sutil pero, en mi opinión, vale la pena el esfuerzo adicional.

Aquí está el diseño de diseño del módulo de propaganda sin perspectiva.

Y aquí está con la perspectiva en su lugar.

Si desea que los desenfoques parezcan más cercanos al usuario, puede disminuir el valor de perspectiva. Por ejemplo, así es como se verán los anuncios con “perspectiva: 400 px” agregado a cada columna.

Agregar un fondo divisor a la sección

Para que los borrones parezcan estar sobre una superficie, podemos agregar un fondo divisor a la sección. Abra la configuración de la sección y actualice lo siguiente:

Estilo de divisor inferior: ver captura de pantalla
Color del divisor inferior: #dddddd
Altura del divisor inferior: 27vw
Repetición horizontal del divisor inferior: 0.8x
Volteo del divisor inferior: horizontal

Para ajustar el diseño de las pantallas de la tableta y el teléfono, deberá realizar una selección múltiple de cada uno de los módulos de propaganda y actualizar las siguientes opciones de transformación en la configuración del Elemento para la pantalla de la tableta:

Transformar escala del eje X: 100%
Transformar escala eje Y: 100%

Transformar trasladar eje Y: 0%
Transformar trasladar eje X: 0%

Resultado final

Ahora veamos el resultado final del diseño del módulo de propaganda.

Pensamientos finales

Con los controles de transformación de Divi, tiene la capacidad de colocar sus módulos de propaganda en áreas precisas de su página con gran facilidad. Esto hace que sea divertido experimentar y crear nuevos diseños de módulos de propaganda para presentar servicios, pasos de proceso e innumerables otros usos. Espero que este tutorial te sirva de inspiración para probar estas técnicas de diseño tú mismo.

Para obtener más inspiración, consulte estos 5 diseños de módulos publicitarios creativos.

Espero tener noticias tuyas en los comentarios.

¡Salud!