Formas creativas de combinar los efectos de la rotación con los elementos circulares en la división

Siempre buscamos formas nuevas y creativas para presentar los elementos presentados (como productos y servicios) cuando diseñamos un nuevo sitio web. Y, con los efectos del desfile de la divilia, se han abierto nuevas puertas para desarrollar sus aspectos de propaganda a un nivel completamente nuevo. En este tutorial, le mostraremos cómo crear un modo de propaganda con elementos circulares rotativos en el desplazamiento. Este aspecto único ofrece un uso inteligente de combinaciones de colores con varios elementos circulares que giran detrás de las borrones cuando el usuario ejecuta la página hacia abajo. Sin lugar a dudas, este diseño tendría muchas aplicaciones para casi cualquier contenido.
¡Disfrutar! Él dibuja el aspecto de la propaganda con elementos circulares rotativos que construimos en este tutorial.



Descargue la apariencia rotativa de los elementos circulares rotativos de forma gratuita para poner su mano en los dibujos en este tutorial, primero tendrá que descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? Qué necesitas para empezar
Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Creando la apariencia de la propaganda con elementos circulares rotativos en el desplazamiento para dividir la primera fila, agregue tres filas de columnas por sección.
El margen de sección temporal luego agregue algunos bordes superior e inferior a la sección para crear un espacio de desplazamiento.

Creando el diseño rotativo del elemento rotativo circular # 1 para nuestro primer diseño, crearemos un módulo de propaganda con tres módulos de color que estarán detrás de la propaganda y girarán a medida que el usuario se esté ejecutando. Este primer diseño servirá como una buena plantilla para los próximos dos modelos que agregaremos a las otras columnas. Aquí le mostramos cómo construirlo. Agregue el módulo de la propaganda a la columna 1, agregue una propaganda. BLUBR 1 Contenido Abra la configuración para el módulo de la propaganda y actualice el contenido del cuerpo con lo siguiente: & lt; P & gt; su contenido va aquí. Editar o eliminar este texto en línea o en la configuración del contenido del módulo. & Lt;/p & gt; Luego agregue un icono de elección para reemplazar la imagen predeterminada.

Configuración de diseño de Blurb 1 En la pestaña Diseño, actualice lo siguiente:

Color de fondo: # 121212

Icono de color: # 41828d
Use el tamaño de fuente de iconos: sí
Icono de tamaño de fuente: 75 PX
Alineación de texto: Centro
Título de la fuente: Oswald
Título del estilo de fuente: TT
Color de texto del título: #ffffff
Título Tamaño del texto: 22 PX
Color del texto del cuerpo: #ffffff
Para hacer una propaganda circular, actualice el tamaño y las esquinas redondeadas de la siguiente manera:
Ancho: 300 PX

Ancho máximo: 300 PX
Forro: 25 px arriba, 25 px abajo, 25 px izquierda, 25 px a la derecha
Esquinas redondeadas: 50%
La combinación de igual ancho y altura combinada con esquinas redondeadas es lo que hace que el desenfoque sea circular.
Luego actualice la posición con un desplazamiento.
Posición: pariente

Brecha vertical: 25 px
Brecha horizontal: 25 px
IND ÍNDICE: 1
Esto centrará la propaganda en los separadores que agregaremos más tarde. El índice Z asegurará que la propaganda esté por encima de los otros separadores. Luego agregue un efecto de rendimiento giratorio a la propaganda. En la pestaña de efectos rotativos … active la rotación: sí
Rotación de inicio: 45 grados (con una vista del 0%)

Rotación promedio: 0 grados (a 40% -60% de vista)
Rotación final: -45 grados (a 100% de vista)
Rotará suavemente la propaganda en una posición vertical hacia el centro de la página y luego girará otros 45 grados cuando deja la parte superior de la página.
Agregue el divisor circular no. 1 Ahora agregaremos el primero de los tres divisores que constituirán nuestro diseño rotativo de los elementos circulares. Agregue un módulo divisor debajo del módulo de la propaganda.
Configuración del divisor 1 Abra la configuración del divisor y actualice lo siguiente:

Divisor del espectáculo: no
Color izquierdo del gradiente de fondo: # 311847

Color correcto del gradiente de fondo: # EC4067
Posición inicial: 50%
Posición final: 50%
Y ahora lo circulamos de la siguiente manera:
Ancho: 350 PX
Ancho máximo: 350 PX

Altura: 350 PX
Esquinas redondeadas: 50%
Observe que el divisor es ligeramente más grande que el módulo de la propaganda, por lo que podemos ver el borde exterior del divisor una vez colocado detrás de la propaganda. Ahora simplemente actualizamos la posición del divisor en Absolute y estaremos perfectamente detrás de la propaganda.
Posición: Absoluto
Si su divisor se sienta en la parte superior de la propaganda, asegúrese de actualizar el índice Z de la propaganda en 1. Luego agregue los siguientes efectos al divisor: en la pestaña Efecto rotativo …


Activar la rotación: si
Rotación de inicio: 0deg (0% de ventana gráfica)

Rotación promedio: 45 grados (con una vista del 50%)
Rotación final: -180 grados (100% visualización) Agregue el divisor circular 2 para crear el segundo divisor circular, abra el cuadro de capa haciendo clic en el icono de la capa en el menú de configuración. Luego copie el módulo divisor para crear uno nuevo.
Actualice la configuración de diseño del divisor 2 para este divisor, para darle un color de fondo diferente, de la siguiente manera:
Color izquierdo del gradiente de fondo: RGBA (160,26,125,0.5)
Color derecho del gradiente de fondo: 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.

Luego actualice los efectos de desplazamiento de la siguiente manera: en la pestaña Efectos rotativos …
Rotación promedio: 90 grados (con una vista del 50%)
Rotación de la conclusión: 180 grados (a la vista del 100%)
Agregue el divisor circular 3 continúa el mismo proceso para crear el tercer y último divisor duplicando el divisor 2.

Actualice la configuración de diseño del divisor 3 para este divisor, le dé un color de fondo diferente, de la siguiente manera:
Color izquierdo del gradiente de fondo: RGBA (255,255,255.0)
Color derecho del gradiente de fondo: RGBA (41.196.169.0.5)

Luego actualice los efectos de desplazamiento de la siguiente manera: en la pestaña Efectos rotativos …

Rotación promedio: 180 grados (con una vista del 50%)
Rotación final: 360 grados (con una vista al 100%)
Debajo de la pestaña de escala hacia arriba y hacia abajo …

Active la escala hacia arriba y hacia abajo: sí
Escala inicial: 110% (al 0% de vista)
Escala promedio: 110% (al 50% de vista)

Escala de conclusión: 100% (con una vista al 100%)
Creación del diseño rotativo del elemento rotativo circular # 2 porque ya tenemos un diseño completado en la columna 1, para comenzar el segundo diseño duplicando todas las primeras columnas. Esto se hará cargo de los cuatro módulos. Deberá eliminar una de las columnas vacías para mantener las tres columnas. La parte posterior del texto de la propaganda. También agregaremos un efecto de escala para hacer el divisor trasero. Aquí le mostramos cómo hacerlo. Abra la configuración del módulo de blurb en la columna 2 y actualice lo siguiente:
Antecedentes: #ffffff
Luego cambie el color del texto y el cuerpo a negro.
Color de texto del título: # 000000

El color del texto del cuerpo: # 000000

Luego agregue el siguiente modo de mezcla:
Modo de mezcla: pantalla

Actualice el divisor 1 Efectos del divisor Abra la configuración del módulo divisor directamente debajo del módulo de la propaganda en la columna 2 y actualice los siguientes efectos: En la pestaña de efectos de escalado hacia arriba y hacia abajo …
Active la escala hacia arriba y hacia abajo: sí
Escala inicial: 100% (al 0% de vista)

Escala promedio: 120% (al 40% -60% de vista)
Escala de conclusión: 100% (con una vista al 100%)

Esto hará que el divisor aumente en un 20% la dimensión inicial a mitad de camino a medida que el usuario ejecute la página.
Creando el diseño rotativo del elemento rotativo circular # 3 para este último diseño, crearemos una propaganda rotativa circular similar al de la columna 1. Sin embargo, agregaremos un modo de mezcla diferente para mostrar los colores a través del texto blanco en un fondo oscuro. Aquí le mostramos cómo hacerlo. Duplicada columna 1 porque ya tenemos un diseño completado en la columna 1, comience el tercer diseño duplicando todas las primeras columnas y moviéndolo al tercer lugar de la columna usando la caja de capa. Luego elimine la columna vacía adicional. Permita que la configuración del módulo de la propaganda primero, agregue múltiples modo de mezcla para mostrar los colores del divisor a través del texto blanco, de la siguiente manera:
Modo de mezcla: múltiples
Luego actualice el color del icono en blanco.
Icono de color: #ffffff
Actualice la configuración del divisor 3 ahora, eliminemos el efecto de escala en el último (tercer) separador en la columna 3. Abra la configuración para el tercer separador y actualice lo siguiente: bajo los efectos de escala hacia arriba y hacia abajo …

Active la escala hacia arriba y hacia abajo: no

Ajuste la posición de la columna 2 en el móvil en este momento, los tres modelos de blurb se alinearán a la izquierda de la pantalla en las pantallas en la tableta y el teléfono. Para equilibrar el diseño, podemos mover fácilmente el medio a la columna derecha utilizando la escala de transformación. Abra la configuración de la columna 2 y actualice las siguientes escalas de transformación del eje x: 40% (en la tableta), 15% (en el teléfono)
¡El resultado final es! Verifiquemos el resultado final en una página en vivo. Aquí está el diseño en el escritorio mientras el usuario pasa por el aspecto.

Aquí está el diseño en la tableta.
Y aquí está en el teléfono.