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

Primeros pasos

Para este tutorial, todo lo que realmente necesitas 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 comenzar.

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 vamos a utilizar las opciones de Transformación Divi para escalar y colocar los módulos de publicidad para crear un diseño de módulo de publicidad ú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

Agregue y aplique estilo al módulo de texto

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

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

Color de fondo: #ffffff

Ancho: 500 px

Margen personalizado (escritorio): -70 px a la izquierda

Margen personalizado (tableta): 20 px a la izquierda

Relleno personalizado: 20 px arriba, 20 px abajo

Actualizar relleno de sección

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

Acolchado personalizado: 20vw top

Actualizar configuración para la primera fila

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

Ancho de medianil: 1

Relleno personalizado: 10vw arriba, 0px abajo

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.

Crear y diseñar los módulos de Blurb

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

En la configuración de la publicidad, 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 publicidad de la siguiente manera:

Color del icono: #ffffff

Icono del 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 arriba, 1vw abajo, 1vw izquierda, 1vw derecha

Luego, actualice el margen predeterminado debajo del icono de publicidad agregando el siguiente CSS al cuadro CSS de la imagen de Blurb en la pestaña avanzada:

A continuación, copie el módulo de publicidad que acaba de crear y péguelo en cada una de las columnas, asegurándose de tener dos módulos de publicidad 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 posicionar los desenfoques

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

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

Eje X de escala de transformación: 242 %

Eje Y de escala de transformación: 242 %

Transformar Traducir eje X: -96px

Transformar Traducir eje Y: -44px

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

Eje X de escala de transformación: 192 %

Eje Y de escala de transformación: 192 %

Transformar Traducir eje X: -70px

Transformar Traducir eje Y: -13px

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

Eje X de escala de transformación: 158 %

Eje Y de escala de transformación: 158 %

Transformar Trasladar eje X: 33px

Transformar Trasladar eje Y: -13px

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

Eje X de escala de transformación: 132 %

Eje Y de escala de transformación: 132 %

Transformar Trasladar eje X: 89px

Transformar Trasladar eje Y: 39px

Luego, asígnele 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 publicidad para pantallas de tabletas y teléfonos, simplemente podemos volver a establecer los efectos de transformación en el estado original para que las publicidades 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 generador. Esto le permitirá ver los módulos publicitarios 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 icono de engranaje de cualquiera de los módulos seleccionados para abrir el modal de configuración del elemento.

En el modal Configuración del elemento, actualice lo siguiente:

Eje X de escala de transformación: 100 %

Eje Y de escala de transformación: 100 %

Transformar Trasladar eje X: 0px

Transformar Trasladar eje Y: 0px

Esto restaurará la posición original y la escala de los anuncios publicitarios en las pantallas de tabletas y teléfonos.

Resultado final

Aquí está el diseño final.

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

En el siguiente ejemplo, le mostraré un diseño de módulo publicitario único que utiliza las opciones de transformación de escala, traducción y rotación de Divi. También agregaré un fragmento de CSS adicional que agrega perspectiva a cada uno de los anuncios publicitarios. Aquí está 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:

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

Fuente del encabezado 2: Nunito

Peso de la fuente del encabezado 2: Semi negrita

Tamaño del texto del

encabezado 2: 50 px Espaciado entre letras del encabezado 2: 7 px

Ancho: 500 px

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 publicidad. Continúe y cree una nueva fila con un diseño de seis columnas directamente debajo de la fila actual.

Dar estilo al módulo de Blurb

En la primera columna, agregue un nuevo módulo publicitario 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 del 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 entre letras del título: 4px

Luego, dale a la publicidad una sombra de caja de la siguiente manera:

Sombra de cuadro: 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 publicidad:

Transformar Rotar eje X: -3 grados

Transformar Rotar eje Y: -10 grados

Transformar Rotar eje Z: 31 grados

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

Actualizar configuración de fila

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

Ancho del canalón: 2

Relleno personalizado: 11vw arriba, 0px abajo

Esto ayudará a usar con el espaciado de las notas publicitarias en el diseño.

Duplicar y diseñar el resto de los Blurbs

Ahora estamos listos para duplicar y personalizar el resto de los anuncios publicitarios. 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 las notas publicitarias se muevan hacia la derecha.

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

Color del círculo: #62de9d

Eje X de escala de transformación: 120 %

Eje Y de escala de transformación: 120 %

Transformar Traducir eje Y: -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

Eje X de escala de transformación: 140 %

Eje Y de escala de transformación: 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

Eje X de escala de transformación: 160 %

Eje Y de escala de transformación: 160 %

Transformar Trasladar eje Y: -30%

Transformar Trasladar eje X: 30%

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

Color del círculo: #62de9d

Eje X de escala de transformación: 180 %

Eje Y de escala de transformación: 180 %

Transformar Trasladar eje Y: -40%

Transformar Trasladar eje X: 55%

Como puede ver, cada uno de los anuncios publicitarios aumentará el tamaño en un 20 % de izquierda a derecha. Y los valores de porcentaje de traducción de Transform aseguran que los anuncios publicitarios permanezcan bien alineados.

Dado que el diseño se desborda en la última columna (columna 6), lo dejaremos en blanco. Pero siempre puede agregar otra publicidad 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 alguna 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 lo que tiene la posición 3D, que en este caso es nuestro módulo de publicidad. 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:

Elemento principal de la columna 2:

Elemento principal de la columna 3:

Elemento principal de la columna 4:

Columna 5 Elemento Principal:

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 publicidad sin perspectiva.

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

Si desea que los anuncios publicitarios aparezcan más cerca del usuario, puede disminuir el valor de perspectiva. Por ejemplo, así es como se verán los anuncios publicitarios con «perspectiva: 400 px» agregado a cada columna.

Agregar un fondo de divisor a la sección

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

Estilo del divisor inferior: vea la captura de pantalla

Color del divisor inferior: #dddddd

Altura del divisor inferior: 27vw

Repetición horizontal del divisor inferior: 0.8x

Giro del divisor inferior: horizontal

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 publicitarios y actualizar las siguientes opciones de transformación en la configuración de elementos para la pantalla de tabletas:

Eje X de escala de transformación: 100 %

Eje Y de escala de transformación: 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 publicidad.

Pensamientos finales

Con los controles de transformación de Divi, tiene la capacidad de colocar sus módulos publicitarios en áreas precisas de su página con gran facilidad. Esto hace que sea divertido experimentar y crear nuevos diseños de módulos publicitarios para presentar servicios, pasos de procesos y muchos otros usos. Espero que este tutorial le brinde un poco de inspiración para probar estas técnicas de diseño usted mismo.

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

Espero escuchar de usted en los comentarios.

¡Salud!