Formas creativas de combinar efectos de desplazamiento de rotación con elementos circulares en Divi

Siempre estamos buscando formas nuevas y creativas de exhibir artículos destacados (como productos y servicios) al diseñar un nuevo sitio web. Y, con los efectos de desplazamiento de Divi, se han abierto nuevas puertas para llevar sus diseños de propaganda a un nivel completamente nuevo. En este tutorial, le mostraremos cómo crear un diseño de módulo de propaganda con elementos circulares giratorios en el desplazamiento. Este diseño único presenta un uso inteligente de combinaciones de colores con múltiples elementos circulares que giran detrás de los anuncios cuando el usuario se desplaza hacia abajo en la página. Sin duda, este diseño tendría muchas aplicaciones para casi cualquier contenido.

¡Disfrutar!

Vistazo

Aquí hay un vistazo rápido al diseño de la propaganda con elementos circulares giratorios que estamos construyendo en este tutorial.

Descargue el diseño de Blurb de elementos circulares giratorios GRATIS

Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo 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.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Creación del diseño de Blurb con elementos circulares giratorios en el desplazamiento en Divi

Agregar la fila

Primero, agregue una fila de tres columnas a la sección.

Margen de sección temporal

A continuación, agregue un margen superior e inferior a la sección para crear algo de espacio para desplazarse.

Creación de diseño de propaganda de elemento circular giratorio n. ° 1

Para nuestro primer diseño, vamos a crear un módulo de propaganda con tres módulos divisores de colores que se ubicarán detrás de la propaganda y rotarán a medida que el usuario se desplaza. Este primer diseño servirá como una buena plantilla para los siguientes dos diseños que agregaremos a las otras columnas.

He aquí cómo construirlo.

Agregar módulo Blurb

En la columna 1, agregue un módulo de propaganda.

Contenido de Blurb 1

Abra la configuración del módulo de propaganda y actualice el contenido del cuerpo con lo siguiente:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

Luego agregue un icono de su elección para reemplazar la imagen predeterminada.

Configuración de diseño de Blurb 1

En la pestaña de diseño, actualice lo siguiente:

• Color de fondo: # 121212
• Color del icono: # 41828d
• Usar tamaño de fuente de icono: SÍ
• Tamaño de fuente del icono: 75px
• Alineación de texto: centro
• Fuente del título: Oswald
• Estilo de fuente del título: TT
• Color del texto del título: #ffffff
• Tamaño del texto del título: 22px
• Color del texto del cuerpo: #ffffff

Para hacer circular la propaganda, actualice el tamaño y las esquinas redondeadas de la siguiente manera:

• Ancho: 300px
• Ancho máximo: 300px
• Relleno: 25px arriba, 25px abajo, 25px izquierda, 25px derecha
• Esquinas redondeadas: 50%

La combinación de la misma anchura y altura combinada con las esquinas redondeadas es lo que hace circular la propaganda.

Luego actualice la posición con un desplazamiento.

• Posición: relativo
• Desplazamiento vertical: 25px
• Desplazamiento horizontal: 25px
• Índice Z: 1

Esto centrará la propaganda dentro de los divisores que agregaremos más adelante. El índice Z se asegurará de que la propaganda se sitúe también por encima de los demás divisores.

A continuación, agregue un efecto de desplazamiento giratorio a la propaganda.

En la pestaña Efectos giratorios…

• Habilitar rotación: SÍ
• Rotación inicial: 45 grados (al 0% de la ventana gráfica)
• Rotación media: 0 grados (en la ventana gráfica del 40% -60%)
• Rotación final: -45 grados (al 100% de la ventana gráfica)

Esto rotará la propaganda levemente a una posición vertical hacia el centro de la página y luego rotará otros 45 grados cuando salga de la parte superior de la página.

Agregar divisor circular n. ° 1

Ahora vamos a agregar nuestro primero de los tres módulos divisores que conformarán nuestro diseño de elemento circular giratorio.

Agregue un módulo divisor debajo del módulo de propaganda.

Configuración del divisor 1

Abra la configuración del divisor y actualice lo siguiente:

• Mostrar divisor: NO
• Color de degradado de fondo a la izquierda: # 311847
• Gradiente de fondo Color derecho: # ec4067
• Posición inicial: 50%
• Posición final: 50%

Y ahora lo hacemos circular de la siguiente manera:

• Ancho: 350px
• Ancho máximo: 350px
• Alto: 350px
• Esquinas redondeadas: 50%

Observe que el divisor es un poco más grande que el módulo de propaganda, de modo que podremos ver el borde exterior del divisor una vez colocado detrás de la propaganda.
Ahora simplemente actualizamos la posición del divisor a absoluta y se ubicará perfectamente detrás de la propaganda.

• Posición: Absoluto

Si su divisor está encima de la propaganda, asegúrese de haber actualizado el índice z de la propaganda a 1.

A continuación, agregue los siguientes efectos de desplazamiento al divisor:

En la pestaña Efecto giratorio ...

• Habilitar rotación: SÍ
• Rotación inicial: 0 grados (en la ventana gráfica del 0%)
• Rotación media: 45 grados (al 50% de la ventana gráfica)
• Rotación final: -180 grados (al 100% de la ventana gráfica)

Agregar divisor circular 2

Para crear el segundo divisor circular, abra el cuadro de capas haciendo clic en el icono de capas en el menú de configuración. Luego, duplique el módulo divisor para crear uno nuevo.

Actualizar la configuración de diseño del divisor 2

Para este divisor, démosle un color de fondo degradado diferente de la siguiente manera:

• Color de degradado de fondo a la izquierda: rgba (160,26,125,0.5)
• Gradiente de fondo Color derecho: rgba (255,255,255,0)

NOTA: Es importante usar colores semitransparentes aquí para exponer el fondo detrás de él. Esto crea una hermosa combinación de colores.

A continuación, actualice los efectos de desplazamiento de la siguiente manera:

En la pestaña Efectos giratorios ...

• Rotación media: 90 grados (al 50% de la ventana gráfica)
• Rotación final g: 180 grados (al 100% de la ventana gráfica)

Agregar divisor circular 3

Continúe con el mismo proceso para crear el tercer y último divisor duplicando el divisor 2.

Actualizar la configuración de diseño del divisor 3

Para este divisor, también le daremos un color de fondo degradado diferente de la siguiente manera:

• Color de degradado de fondo a la izquierda: rgba (255,255,255,0)
• Gradiente de fondo Color derecho: rgba (41,196,169,0.5)

Luego actualice los efectos de desplazamiento de la siguiente manera:

En la pestaña Efectos giratorios ...

• Rotación media: 180 grados (al 50% de la ventana gráfica)
• Rotación final: 360 grados (al 100% de la ventana gráfica)

En la pestaña Escalar hacia arriba y hacia abajo ...

• Habilitar escalado hacia arriba y hacia abajo: SÍ
• Escala inicial: 110% (a 0% de ventana gráfica)
• Escala media: 110% (al 50% de la ventana gráfica)
• Escala final: 100% (al 100% de la ventana gráfica)

Creación de diseño de anuncio publicitario de elemento circular giratorio n. ° 2

Como ya tenemos un diseño completo en la columna 1, comencemos el segundo diseño duplicando toda la primera columna. Esto también se transferirá a los cuatro módulos. Deberá eliminar una de las columnas vacías para mantener el diseño de tres columnas.

Actualizar el diseño del módulo de Blurb

Para este diseño, usaremos un fondo de propaganda blanca para que podamos usar el efecto de filtro de pantalla para mostrar los colores en movimiento detrás del texto de la propaganda. También vamos a agregar un efecto de desplazamiento de escala para agrandar el divisor posterior.

He aquí cómo hacerlo.

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

• Fondo: #ffffff

Luego cambie el Título y el Color del texto del cuerpo a negro.

• Color del texto del título: # 000000
• Color del texto del cuerpo: # 000000

Luego agregue el siguiente modo de fusión:

• Modo de fusión: pantalla

Actualizar efectos de desplazamiento del divisor 1

Abra la configuración del módulo divisor directamente debajo del módulo de propaganda en la columna 2 y actualice los siguientes efectos de desplazamiento:
En la pestaña de efectos de ampliación y reducción de escala ...

• Habilitar escalado hacia arriba y hacia abajo: SÍ
• Escala inicial: 100% (a 0% de ventana gráfica)
• Escala media: 120% (en la ventana gráfica del 40% -60%)
• Escala final: 100% (al 100% de la ventana gráfica)

Esto hará que el divisor crezca un 20% de su tamaño original a la mitad cuando el usuario se desplaza hacia abajo en la página.

Creación de diseño de propaganda de elemento circular giratorio n. ° 3

Para este último diseño, crearemos una propaganda circular giratoria similar a la de la columna 1. Sin embargo, agregaremos un modo de fusión diferente para mostrar los colores a través del texto blanco sobre un fondo oscuro.

He aquí cómo hacerlo.

Columna duplicada 1

Como ya tenemos un diseño completo en la columna 1, comencemos el tercer diseño duplicando toda la primera columna y moviéndola a la ubicación de la tercera columna usando el cuadro de capas. Luego elimine la columna extra vacía.

Actualizar la configuración del módulo Blurb

Primero, agreguemos el modo de fusión múltiple para mostrar los colores del divisor a través del texto blanco de la siguiente manera:

• Modo de fusión: múltiple

Luego actualice el color del icono a blanco también.

• Color del icono: #ffffff

Actualizar la configuración de Divider 3

Ahora eliminemos el efecto de desplazamiento de escala en el último (tercer) divisor de la columna 3.
Abra la configuración del tercer divisor y actualice lo siguiente:

En la pestaña Efectos de ampliación y reducción de escala ...

• Habilitar escalado hacia arriba y hacia abajo: NO

Ajustar la posición de la columna 2 en dispositivos móviles

En este momento, los tres diseños de propaganda se alinearán a la izquierda de la pantalla en las pantallas de tabletas y teléfonos. Para equilibrar el diseño, podemos mover la columna del medio hacia la derecha fácilmente usando la escala de transformación.

Abra la configuración de la columna 2 y actualice lo siguiente:

Transform Scale X Axis: 40% (en tableta), 15% (en teléfono)

Resultado final

¡Eso es todo! Veamos el resultado final en una página en vivo.

Aquí está el diseño en el escritorio mientras el usuario se desplaza por el diseño.

Aquí está el diseño en tableta.

Y aquí está en el teléfono.

Pensamientos finales

Una de las mejores características de este diseño es lo creativo que puede ser con los efectos de desplazamiento y las combinaciones de colores, cada uno de los cuales se puede modificar fácilmente con las opciones integradas de Divi. Y una vez que aprendas mejor cómo incorporar efectos de filtro, las cosas realmente empiezan a explotar. Con suerte, esto le dará algo de inspiración para el próximo diseño de propaganda que cree.

Espero tener noticias tuyas en los comentarios.

¡Salud!