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


Los controles Transform 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. Por lo tanto, pensé en mostrar cómo utilizar 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 estilo adicional para escalar y rotar sus borrones para diseños aún más únicos.

En este tutorial, le mostraré cómo posicionar y rotar los desenfoques 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.

diseño del módulo de propaganda

Ahora estás listo para empezar.

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

diseño del módulo de propaganda

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

diseño del módulo de propaganda

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:

Our Services

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.

diseño del módulo de propaganda

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: 20px superior, 20px inferior

diseño del módulo de propaganda

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

diseño del módulo de propaganda

Actualizar la configuración de la primera fila

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

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

diseño del módulo de propaganda

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.

diseño del módulo de propaganda

Crear y diseñar 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ó.

diseño del módulo de propaganda

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.

diseño del módulo de propaganda

Actualice el resto de la configuración de 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 en la pestaña avanzada:

margin-bottom: 5px

diseño del módulo de propaganda

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.

diseño del módulo de propaganda

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

Ahora estamos listos para usar los controles de transformación para colocar y escalar los borrones 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 eje X: 242%
Transformar escala del eje Y: 242%

diseño del módulo de propaganda

Transformar Traducir eje X: -96px
Transformar traslación del eje Y: -44px

diseño del módulo de propaganda

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 escala del eje Y: 192%

Transformar Traducir eje X: -70px
Transformar traslación del eje Y: -13px

diseño del módulo de propaganda

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 escala eje Y: 158%

Transformar trasladar el eje X: 33px
Transformar traslación del eje Y: -13px

diseño del módulo de propaganda

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

diseño del módulo de propaganda

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!

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.

diseño del módulo de propaganda

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

diseño del módulo de propaganda

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 tabletas y teléfonos.

Resultado final

Aquí está el diseño final.

diseño del módulo de propaganda

diseño del módulo de propaganda

diseño del módulo de propaganda

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

diseño del módulo de propaganda

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:

Our Process

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.

diseño del módulo de propaganda

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: 50px
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ño del módulo de propaganda

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.

diseño del módulo de propaganda

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

diseño del módulo de propaganda

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

diseño del módulo de propaganda

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

Actualizar configuración de fila

Ahora, antes de comenzar a duplicar nuestro módulo de propaganda, necesitamos 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 utilizar el espaciado de los borrones en el diseño.

diseño del módulo de propaganda

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.

diseño del módulo de propaganda

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 eje Y: 120%

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

diseño del módulo de propaganda

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 escala del eje Y: 140%

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

diseño del módulo de propaganda

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 escala eje Y: 160%

Transformar traslación del eje Y: -30%
Transformar trasladar eje X: 30%

diseño del módulo de propaganda

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 escala eje Y: 180%

Transformar traslación del eje Y: -40%
Transformar trasladar eje X: 55%

diseño del módulo de propaganda

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 dar 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

diseño del módulo de propaganda

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

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

diseño del módulo de propaganda

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

diseño del módulo de propaganda

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.

diseño del módulo de propaganda

Agregar un fondo divisor a la sección

Para que los desenfoques 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 del 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

diseño del módulo de propaganda

Para ajustar el diseño de las pantallas de tabletas y teléfonos, 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%

diseño del módulo de propaganda

Resultado final

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

diseño del módulo de propaganda

diseño del módulo de propaganda

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!