Cómo agregar íconos de desfile animados a los fondos de las secciones en la división

La combinación de la animación del desfile con los íconos puede mejorar el diseño de su sitio de maneras únicas. En este tutorial, exploraremos cómo agregar íconos de desfile animados a los fondos de las secciones en el Div. Con cientos de íconos para elegir y con numerosos efectos de animación incorporados disponibles en la división, le mostraremos cómo puede crear innumerables animaciones de fondo para llevar nuestros diseños a un nivel completamente nuevo. ¡Vamos a empezar! Mirar los Sneaks es un vistazo rápido al diseño que construiremos en este tutorial. Y aquí hay un diseño de bonificación que le muestra lo que es posible con algunos cambios.
Descargue el aspecto gratuito para poner su mano en los modelos en este tutorial, primero tendrá que descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico diaria utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá aún más división de amabilidad y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar. No será “Reabed” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue gratis únase al boletín de Divin y le enviaremos una copia del paquete de diseño de la página de buceo, además de muchos otros recursos, consejos y consejos de forma gratuita. Sigue a ti mismo y te convertirás en una división maestra en el menor tiempo. Si ya está suscrito, ingrese su correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. Por favor, consulte su correo electrónico para confirmar su suscripción y obtener acceso a Dive de diseño semanal gratuito! Para importar la sección en la Biblioteca de Divic, navegue en la Biblioteca de Divic. Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Una vez terminado, el aspecto de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿sí? 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 en el front-end (generador visual).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Cómo agregar íconos de desfile animados a los fondos de las secciones en la división La clave explicada explicó brevemente el proceso de agregar los iconos de desfile animados a los fondos de las secciones involucra 4 partes clave. 1: Creando un lienzo en una pantalla completa en primer lugar, debemos crear una tela en la pantalla usando una sección, una fila y una columna, de modo que cada uno de ellos se estire a lo largo del ancho y la altura del navegador. Esto nos dará algún tipo de espacio creativo imparable que debemos llenar con íconos.
2: Agregar y colocar los íconos ahora, podemos colocar estratégicamente los iconos en la tela de pantalla completa (o columna) para construir nuestro diseño de fondo animado.

3: Agregar una animación de desfile a los íconos Una vez que los íconos están en su lugar, podemos agregar nuestra contaminación (o animación) a cada uno de ellos. 4: Agregar contenido al primer plano de la sección después del diseño de fondo está completamente con un desfile animado iconos, podemos agregar el contenido que necesitamos en el escaparate en primer plano.

Ahora que tenemos una idea de qué hacer, ¡buceemos!

Parte 1: Crear el lienzo en la pantalla completa (configurando la sección, la fila y la columna) para comenzar agregando una sola columna a la sección habitual.

Configuración Configuración Abra la configuración de la sección y agregue un color de fondo de la siguiente manera:
Color de fondo: #000

En la pestaña de diseño, agregue una altura mínima de 100 VH para asegurarse de que la sección se estire sobre toda la altura de la ventana de observación.
Altura mínima: 100VH (escritorio), 600px (tableta y teléfono)

Configuración de fila luego abra la configuración de la fila y actualice el tamaño para que se extienda por todo el ancho y la altura de la sección/puerto de vista.
Use el ancho de canaleta personalizado: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Altura: 100%
Llenado: 0px arriba, 0px abajo
En la pestaña avanzada, dale a la fila una posición absoluta.
Posición: Absoluto

La altura de la columna ahora que la sección y el giro están en su lugar, es importante darle a la columna una altura mínima del 100%, de modo que también se extiende sobre todo el ancho y la altura de la sección/puerto de vista.
En este momento, creamos una tela de pantalla completa que nos permite llenar la columna con iconos.

Parte 2: Creación y colocación de los iconos en la columna Ahora estamos listos para comenzar a crear y colocar los iconos con la columna. La idea es colocar estratégicamente el icono en esta columna de pantalla completa para construir nuestro diseño de fondo animado. La creación y el posicionamiento del icono 1 comenzaremos creando nuestro primer icono y luego lo posicionaremos usando Divi Builder. Agregue un módulo con iconos a la columna.

Abra la configuración del icono y elija un icono del selector de iconos.

En la pestaña Diseño, actualice el color y el tamaño del icono de la siguiente manera:

Icono de color: #fff

Tamaño del icono: 3VW (escritorio), 40px (tableta), 30px (teléfono)

En la pestaña avanzada, actualice la posición y los espacios de la siguiente manera:
Posición: Absoluto
Ubicación: abajo a la izquierda

Compensación vertical: 10%
Compensación horizontal: 10%
Nota: Tenga en cuenta que la unidad de longitud de porcentaje aquí es relativa al CSS de Jos y las propiedades izquierdas. En este caso, un compensación vertical del 10%es equivalente a “fondo: 10%” en CSS, y un desplazamiento horizontal es equivalente a “izquierda: 10%”. Debido a que nuestra columna está en la pantalla completa, los íconos permanecerán receptivos cuando ajuste la altura y el ancho del navegador. En otras palabras, mantendrán su posición en diferentes tamaños de pantalla.
Creación y posicionamiento del icono 2 Para crear el segundo icono, duplique el icono existente. Luego abra la configuración del icono duplicada y actualice la configuración de la posición de la siguiente manera:
Compensación vertical: 30%
Compensación horizontal: 40%

Creación y posicionamiento del icono 3 Para crear el tercer icono, duplique el icono anterior. Luego abra la configuración del icono duplicada y actualice la configuración de la posición de la siguiente manera: Offset vertical: 20%
Compensación horizontal: 30%
Creación y posicionamiento del icono 4 Para crear el cuarto icono, duplique el icono anterior. Luego abra la configuración del icono duplicada y actualice la configuración de la posición de la siguiente manera:

Compensación vertical: 70%
Compensación horizontal: 40%
Creación y posicionamiento del icono 5 para crear el quinto icono, duplique el icono anterior. Luego abra la configuración del icono duplicada y actualice la configuración de la posición de la siguiente manera:


Compensación vertical: 60%
Compensación horizontal: 50%
Creación y posicionamiento del icono 6 para crear el sexto icono, duplique el icono anterior. Luego abra la configuración del icono duplicada y actualice la configuración de la posición de la siguiente manera:

Compensación vertical: 65%
Compensación horizontal: 60%
Creación y posicionamiento del icono 7 para crear el séptimo icono, duplique el icono anterior. Luego abra la configuración del icono duplicada y actualice la configuración de la posición de la siguiente manera:

Compensación vertical: 28%
Compensación horizontal: 70%
Creación y posicionamiento del icono 8 Para crear el octavo icono, duplique el icono anterior. Luego abra la configuración del icono duplicada y actualice la configuración de la posición de la siguiente manera:

Compensación vertical: 50%
Compensación horizontal: 80%
Creación y posicionamiento del icono 9 para crear el noveno y último icono, duplique el icono anterior. Luego abra la configuración del icono duplicada y actualice la configuración de la posición de la siguiente manera:

Compensación vertical: 15%
Compensación horizontal: 90%Parte 3: Agregar la animación de contaminación a los iconos Una vez que los íconos se han colocado estratégicamente, estamos listos para agregar las animaciones del desfile a cada uno de los iconos.
Seleccione varios iconos para este ejemplo, agregaremos las mismas animaciones de desfile a los nueve iconos. Pero, si lo desea, puede optar por proporcionar animaciones de desfile únicas a cada una de ellas individualmente. Para agregar animaciones de desfile a todos los iconos simultáneos, use una selección múltiple (mantenga presionado CTRL o CMD al seleccionar módulos de iconos) para seleccionar todos los iconos de columna. Luego abra la configuración de uno de los módulos seleccionados.

Esto mostrará la configuración del elemento modal. En la pestaña avanzada, abra el interruptor de grupo de opciones de grupo. Allí verá los efectos de la transformación de desplazamiento. Agregaremos los seis efectos disponibles (movimiento vertical, movimiento horizontal, desvanecimiento dentro y fuera, escala hacia arriba y hacia abajo, girando y desenfoque). Agregar efectos de transformación de desplazamiento Movimiento vertical Asegúrese de que la pestaña de movimiento vertical esté seleccionada y actualice lo siguiente:
Habilitar el movimiento vertical: sí
Iniciar compensación: 2 (al 0%)

Compensación final: -2 (al 100%)

Para mostrar la tableta, actualice los espacios de la siguiente manera:

Iniciar compensación: 1 (al 0%)
Compensación final: -1 (al 100%)
Para la pantalla del teléfono, actualice los espacios de la siguiente manera:
Iniciar compensación: 0.5 (0%)
Compensación final: -0.5 (al 100%)
Movimiento horizontal Entonces, seleccione la pestaña Movimiento horizontal y actualice lo siguiente:
Active el movimiento horizontal: sí
Compensación inicial: -1 (al 0%)
Compensación final: 1 (al 100%)
Para mostrar la tableta, actualice los espacios de la siguiente manera: Inicie la compensación: 0 (0%)

Compensación final: 0 (al 100%)
Desvanecer y salir, seleccione la pestaña Fading Into and Out y actualice lo siguiente:
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad promedio: 50% (al 50%)
Escalar hacia arriba y hacia abajo, luego seleccione la pestaña Escala hacia arriba y hacia abajo y actualice lo siguiente:
Active la escala hacia arriba y hacia abajo: sí
Escala inicial: 0% (al 0%)

Escala promedio: 50% (al 50%)
Rotación Luego, seleccione la pestaña de rotación y actualice lo siguiente:
Activar rotación: sí

Rotación de inicio: 0% (al 0%)
Rotación media: 90% (a 50%)
Fin de rotación: 180% (al 100%)
Corte luego seleccione la pestaña Desenfoque y active el efecto de desenfoque:

Activa el desenfoque: si
Preview es un vistazo rápido a los íconos animados con Parade in Action. Parte 4: Agregar el contenido al primer plano de la sección Ahora que tenemos nuestros íconos de desfile animados para el fondo, estamos listos para agregar el contenido que queremos mostrar en primer plano. La idea es mantener el giro (con la columna y los iconos) detrás de las filas de contenido adicionales que queremos mostrar frente a ese fondo.
En este ejemplo, agregaremos una sola columna con un título simple. Primero, agregue una nueva fila con una sola columna directamente debajo de la fila existente.
La fila existente tiene una posición absoluta, por lo que agregar otra colocará la fila en la parte superior de la sección, como se esperaba. En la nueva fila, agregue un módulo de texto.
Abra la configuración de texto y agregue el siguiente código HTML al contenido del cuerpo: & lt; h1 & gt; div & lt;/h1 & gt;

En la pestaña Diseño, actualice los estilos de texto de los títulos de la siguiente manera:
Fuente del título: PopPinsalinización del texto del título: Centro

Título Tamaño de texto: 8VW (escritorio), 40px (tableta y teléfono)

La posición de la fila para garantizar que la fila (y el título) se coloquen en el centro de la sección, abra la configuración de la fila y actualice la posición de la siguiente manera:

Posición: Absoluto

Ubicación: Centro

Toques de acabado: Sección Imagen de fondo y desbordamiento para completar el diseño, abra la configuración de la sección y agregue una imagen de fondo.Para este ejemplo, uso una imagen de nuestro paquete de disposición para inteligencia artificial.
En la pestaña Avanzada, asegúrese de que el desbordamiento esté oculto actualizando las opciones de visibilidad:
Desbordamiento horizontal: oculto
Desbordamiento vertical: oculto

Esto asegurará que la barra de desfile vertical no aparezca cuando un icono se anime fuera de la sección.