Cómo agregar íconos animados con desplazamiento a los fondos de sección en Divi

La combinación de animación de desplazamiento con iconos puede mejorar el diseño de su sitio web de formas únicas. En este tutorial, vamos a explorar cómo agregar íconos animados con desplazamiento a los fondos de sección en Divi. Con cientos de íconos para elegir y numerosos efectos de animación incorporados disponibles en Divi, le mostraremos cómo puede crear innumerables animaciones de fondo para llevar nuestros diseños a un nivel completamente nuevo.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.

Y aquí hay un diseño adicional que le muestra lo que es posible con algunos ajustes.

Descarga el diseño GRATIS

Para poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo has hecho, instala y activa el tema Divi .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
  3. Elija la opción «Construir desde cero».

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

Cómo agregar íconos animados con desplazamiento a los fondos de sección en Divi

El concepto clave explicado brevemente

El proceso de agregar íconos animados con desplazamiento a los fondos de las secciones involucra 4 partes clave.

1: Creación de un lienzo de pantalla completa

Primero, necesitamos crear un lienzo de pantalla completa mediante la personalización de una sección, una fila y una columna para que cada una de ellas abarque todo el ancho y alto del navegador. Esto nos dará una especie de espacio creativo sin obstáculos que necesitamos llenar con íconos.

2: Agregando y Posicionando los Iconos

Ahora, podemos colocar estratégicamente los íconos dentro del lienzo (o columna) de pantalla completa para construir nuestro diseño de fondo de ícono animado con desplazamiento.

3: Agregar animación de desplazamiento a los íconos

Una vez que los íconos están en su lugar, podemos agregar nuestros efectos de transformación de desplazamiento (o animación) a cada uno de ellos.

4: Agregar contenido al frente de la sección

Una vez que el diseño de fondo está completo con íconos animados con desplazamiento, podemos agregar el contenido que necesitamos al escaparate en primer plano.

Ahora que tenemos una idea de qué hacer, ¡vamos a sumergirnos!

Parte 1: creación del lienzo de pantalla completa (configuración de la sección, la fila y la columna)

Comencemos agregando una fila de una columna a la sección normal.

Ajustes de sección

Abra la configuración de la sección y agregue un color de fondo de la siguiente manera:

  • Color de fondo: #000

Debajo de la pestaña de diseño, agregue una altura mínima de 100vh para asegurarse de que la sección abarque toda la altura de la ventana gráfica.

  • Altura mínima: 100vh (escritorio), 600px (tableta y teléfono)

Configuración de fila

A continuación, abra la configuración de la fila y actualice el tamaño para que también abarque todo el ancho y la altura de la sección/ventana gráfica.

  • Usar ancho de canalón personalizado: SÍ
  • Ancho del canalón: 1
  • Ancho: 100%
  • Ancho máximo: 100%
  • Altura: 100%
  • Relleno: 0px arriba, 0px abajo

En la pestaña avanzada, asigne a la fila una posición absoluta.

  • Posición: Absoluta

Altura de la columna

Ahora que nuestra sección y fila están en su lugar, es importante darle a la columna una altura mínima del 100% para que también abarque todo el ancho y la altura de la sección/ventana gráfica.

En este punto, esencialmente hemos creado un lienzo de pantalla completa que nos permite llenar la columna con íconos.

Parte 2: Creando y Posicionando los Iconos dentro de la Columna

Ahora estamos listos para comenzar a crear y posicionar los íconos con la columna. La idea es colocar estratégicamente el ícono dentro de esta columna de pantalla completa para construir nuestro diseño de fondo de ícono animado con desplazamiento.

Icono de creación y posicionamiento 1

Comenzaremos creando nuestro primer ícono y luego colocándolo usando el Divi Builder.

Agregue un módulo de iconos a la columna.

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

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

  • Color del icono: #fff
  • Tamaño del icono: 3vw (escritorio), 40px (tableta), 30px (teléfono)

En la pestaña Avanzado, actualice la posición y los desplazamientos de la siguiente manera:

  • Posición: Absoluta
  • Ubicación: abajo a la izquierda
  • Desplazamiento vertical: 10 %
  • Desplazamiento Horizontal: 10%

NOTA: Tenga en cuenta que la unidad de longitud porcentual aquí es relativa a las Propiedades CSS inferiores e izquierdas. En este caso, un desplazamiento vertical del 10 % equivale a “abajo: 10 %” en CSS y un desplazamiento horizontal equivale a “izquierda: 10 %”. Debido a que nuestra columna es de pantalla completa, los íconos seguirán respondiendo al ajustar 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 duplicado y actualice la configuración de posición de la siguiente manera:

  • Desplazamiento vertical: 30 %
  • Desplazamiento 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 duplicado y actualice la configuración de posición de la siguiente manera:

  • Desplazamiento vertical: 20 %
  • Desplazamiento Horizontal: 30%

Icono de creación y posicionamiento 4

Para crear el cuarto icono, duplique el icono anterior. Luego abra la configuración del icono duplicado y actualice la configuración de posición de la siguiente manera:

  • Desplazamiento vertical: 70 %
  • Desplazamiento Horizontal: 40%

Icono de creación y posicionamiento 5

Para crear el quinto ícono, duplique el ícono anterior. Luego abra la configuración del icono duplicado y actualice la configuración de posición de la siguiente manera:

  • Desplazamiento vertical: 60 %
  • Desplazamiento Horizontal: 50%

Icono de creación y posicionamiento 6

Para crear el sexto ícono, duplique el ícono anterior. Luego abra la configuración del icono duplicado y actualice la configuración de posición de la siguiente manera:

  • Desplazamiento vertical: 65 %
  • Desplazamiento Horizontal: 60%

Icono de creación y posicionamiento 7

Para crear el séptimo icono, duplique el icono anterior. Luego abra la configuración del icono duplicado y actualice la configuración de posición de la siguiente manera:

  • Desplazamiento vertical: 28 %
  • Desplazamiento Horizontal: 70%

Icono de creación y posicionamiento 8

Para crear el octavo icono, duplique el icono anterior. Luego abra la configuración del icono duplicado y actualice la configuración de posición de la siguiente manera:

  • Desplazamiento vertical: 50 %
  • Desplazamiento Horizontal: 80%

Icono de creación y posicionamiento 9

Para crear el noveno y último icono, duplique el icono anterior. Luego abra la configuración del icono duplicado y actualice la configuración de posición de la siguiente manera:

  • Desplazamiento vertical: 15 %
  • Desplazamiento Horizontal: 90%

Parte 3: Agregar animación de desplazamiento a los íconos

Una vez que los íconos se han colocado estratégicamente, estamos listos para agregar las animaciones de desplazamiento a cada uno de los íconos.

Selección múltiple de iconos

Para este ejemplo, vamos a agregar las mismas animaciones de desplazamiento a los nueve íconos. Pero, puede optar por dar animaciones de desplazamiento únicas a cada uno de ellos individualmente si así lo desea. Para agregar las animaciones de desplazamiento a todos los íconos a la vez, use la selección múltiple (mantenga presionada la tecla Ctrl o Cmd mientras selecciona los módulos de íconos) para seleccionar todos los íconos en la columna. Luego abra la configuración de uno de los módulos seleccionados.

Esto abrirá el modal de configuración del elemento. En la pestaña avanzada, abra el grupo de opciones Efectos de desplazamiento. Allí verá los efectos de transformación de desplazamiento. Agregaremos los seis efectos disponibles (Movimiento vertical, Movimiento horizontal, Aparición y desaparición gradual, Aumento y reducción de escala, Rotación y Desenfoque).

Adición de efectos de transformación de desplazamiento

movimiento vertical

Asegúrese de que la pestaña Movimiento vertical esté seleccionada y actualice lo siguiente:

  • Habilitar movimiento vertical: SÍ
  • Compensación inicial: 2 (al 0 %)
  • Compensación final: -2 (al 100 %)

Para la pantalla de la tableta, actualice las compensaciones de la siguiente manera:

  • Compensación inicial: 1 (al 0 %)
  • Compensación final: -1 (al 100 %)

Para la pantalla del teléfono, actualice las compensaciones de la siguiente manera:

  • Desplazamiento inicial: 0,5 (al 0 %)
  • Compensación final: -0.5 (al 100%)

movimiento horizontal

A continuación, seleccione la pestaña Movimiento horizontal y actualice lo siguiente:

  • Habilitar movimiento horizontal: SÍ
  • Desplazamiento inicial: -1 (al 0 %)
  • Compensación final: 1 (al 100 %)

Para la pantalla de la tableta, actualice las compensaciones de la siguiente manera:

  • Compensación inicial: 0 (al 0 %)
  • Compensación final: 0 (al 100 %)

Desvanecimiento de entrada y salida

A continuación, seleccione la pestaña Fading In and Out y actualice lo siguiente:

  • Habilitar fundido de entrada y salida: SÍ
  • Opacidad media: 50% (al 50%)

Escalando hacia arriba y hacia abajo

A continuación, seleccione la pestaña Escalar hacia arriba y hacia abajo y actualice lo siguiente:

  • Habilitar escalado hacia arriba y hacia abajo: SÍ
  • Escala inicial: 0% (al 0%)
  • Escala media: 50% (al 50%)

Giratorio

A continuación, seleccione la pestaña Rotación y actualice lo siguiente:

  • Habilitar rotación: SÍ
  • Rotación inicial: 0% (al 0%)
  • Rotación media: 90% (al 50%)
  • Rotación final: 180% (al 100%)

Difuminar

A continuación, seleccione la pestaña Desenfocar y habilite el efecto de desenfoque:

  • Habilitar desenfoque: SÍ

Avance

Aquí hay un vistazo rápido a los íconos animados de desplazamiento en acción.

Parte 4: agregar contenido al frente de la sección

Ahora que tenemos nuestros íconos animados de desplazamiento para nuestro fondo, estamos listos para agregar el contenido que queremos mostrar en primer plano. La idea es mantener la fila (con la columna y los íconos) detrás de cualquier fila adicional de contenido que queremos que se muestre frente a ese fondo.

En este ejemplo, vamos a agregar una fila de una columna con un encabezado simple.

Primero, agregue una nueva fila de una 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.

Dentro de la nueva fila, agregue un módulo de texto.

Abra la configuración de texto y agregue el siguiente HTML dentro del contenido del cuerpo:

01
<h1>Divi</h1>

En la pestaña de diseño, actualice los estilos de texto del encabezado de la siguiente manera:

  • Fuente del título: Poppins
  • Alineación del texto del título: Centro
  • Tamaño del texto del encabezado: 8vw (escritorio), 40px (tableta y teléfono)

Posición de fila

Para asegurarse de que la fila (y el encabezado) estén colocados 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: Absoluta
  • Ubicación: Centro

Toques finales: imagen de fondo de sección y desbordamiento

Para finalizar el diseño, abra la configuración de la sección y agregue una imagen de fondo. Para este ejemplo, estoy usando una imagen de nuestro paquete de diseño de 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 desplazamiento vertical no aparezca cuando un ícono esté animado fuera de la sección.

Resultado final

Ahora echemos un vistazo al resultado final en computadoras de escritorio y tabletas.

Ejemplo de diseño adicional (incluido en la descarga GRATUITA)

No pude evitar ser un poco más creativo con este diseño. Entonces, agregué un ejemplo de diseño adicional que usa íconos animados para resaltar el encabezado. Está incluido en la descarga gratuita al principio del artículo.

Aquí está la vista previa.

Pensamientos finales

A veces es divertido ser creativo y mostrar lo poderoso (y divertido) que Divi puede ser como creador visual de páginas . Creo que este tutorial ha ayudado a resaltar cuán efectivo puede ser Divi para hacer que las secciones de fondo del sitio web cobren vida. El hecho de que pueda agregar efectos de transformación de desplazamiento a cientos de íconos diferentes abre la puerta a todo tipo de diseños y animaciones creativas. Con suerte, esto le dará un impulso de inspiración para usar íconos animados con desplazamiento de formas aún más creativas.

Espero escuchar de usted en los comentarios.

¡Salud!