Hay muchas maneras de usar los módulos de Blurb en el diseño de su página y ahora, con Divi y sus efectos de desplazamiento, animarlos en el desplazamiento se convierte en una experiencia sin esfuerzo. En el tutorial de hoy, le mostraremos cómo crear un diseño de publicidad circular expansible que puede usar para enfatizar cuatro módulos de publicidad diferentes. Usaremos el posicionamiento absoluto de Divi para lograr el resultado deseado y agregaremos un efecto de desplazamiento separado a todo el contenedor de la fila. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga el diseño desplegable de Blurb GRATIS
Para poner sus manos en el diseño de expansión de la publicidad gratuita, 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!
1. Recrear todos los elementos
Agregar nueva sección
Espaciado
Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y modifique el relleno superior e inferior.
- Acolchado superior: 7vw
- Acolchado inferior: 7vw
Añadir fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique la configuración de tamaño de la siguiente manera:
- Ancho: 43vw (escritorio), 85vw (tableta y teléfono)
- Ancho máximo: 100vw
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Configuración de columna
Espaciado
Luego, abra la configuración de la columna y agregue algunos valores de relleno personalizados en diferentes tamaños de pantalla.
- Acolchado superior: 22vw (escritorio), 40vw (tableta), 44vw (teléfono)
- Acolchado inferior: 22vw (escritorio), 40vw (tableta), 44vw (teléfono)
Agregar módulo de texto a la columna
Agregar contenido H2
Es hora de agregar módulos, comenzando con un módulo de texto que contenga algo de contenido H2 de su elección.
Configuración de texto H2
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H2 de la siguiente manera:
- Encabezado 2 Fuente: Quicksand
- Encabezado 2 Alineación de texto: Centro
- Color del texto del encabezado 2: #ffffff (escritorio), #000000 (tableta y teléfono)
- Título 2 Tamaño del texto: 2vw (Escritorio), 6vw (Tableta), 7vw (Teléfono)
- Encabezado 2 Altura de línea: 1,4 em
Dimensionamiento
Modifique también los valores de ancho en diferentes tamaños de pantalla.
- Ancho: 53 % (escritorio), 70 % (tableta y teléfono)
Espaciado
Luego, agregue un poco de margen superior receptivo.
- Margen superior: 0 % (escritorio), -70 % (tableta), -80 % (teléfono)
Agregar módulo de Blurb a la columna
Agregar contenido
El siguiente módulo que necesitamos es un módulo de Blurb. Introduzca un título de su elección.
Cargar imagen
Sube una imagen a continuación. Puede encontrar los que estamos usando a lo largo de este tutorial en el archivo de descarga al comienzo de este tutorial.
Añadir enlace
Añade un enlace también.
Color de fondo
Junto con un color de fondo.
- Color de fondo: #ffffff
Configuración del texto del título
Pase a la pestaña de diseño y cambie la configuración del texto del título de la siguiente manera:
- Título Nivel de encabezado: H3
- Fuente del título: Quicksand
- Peso de la fuente del título: Negrita
- Alineación del texto del título: Centro
- Tamaño del texto del título: 1vw (escritorio), 3vw (tableta y teléfono)
Dimensionamiento
Luego, realice algunos cambios en la configuración de tamaño.
- Ancho de imagen: 50 % (escritorio), 30 % (tableta), 25 % (teléfono)
- Ancho: 18 % (escritorio), 23 % (tableta), 30 % (teléfono)
- Altura: 18% (Escritorio), 23% (Tableta), 30% (Teléfono)
Borde
También estamos agregando algo de radio de borde.
- Todas las esquinas: 500px
Sombra de la caja
A continuación, tenemos una sombra de caja sutil.
- Posición vertical de la sombra del cuadro: 23px
- Fuerza de desenfoque de sombra de cuadro: 80px
- Color de sombra: rgba(0,0,0,0.19)
Filtrar
Y también cambiaremos el tono en la configuración de los filtros.
- Tono: 67 grados
Elemento principal y CSS de imagen de Blurb
Ahora, navegue a la pestaña avanzada y agregue algunas líneas de código CSS personalizadas para realizar algunos ajustes de respuesta adicionales.
Elemento principal:
|
01
02
|
display: flex;align-items: center; |
Imagen publicitaria:
|
01
|
margin-bottom: 0px |
Clonar el módulo Blurb tres veces
Una vez que haya completado el primer módulo de Blurb, puede clonarlo tres veces.
Cambiar contenido, icono y enlace
Asegúrese de cambiar el título, el icono y el enlace de cada duplicado.
2. Juntar las piezas
Agregar imagen de fondo de la sección responsiva
Ahora que tenemos todos los elementos en su lugar, es hora de juntar las piezas. Primero, cargaremos una imagen de fondo de sección y modificaremos la posición de la imagen de fondo en tamaños de pantalla más pequeños. Puede encontrar la imagen de fondo que estamos usando en la publicación de descarga que se compartió al comienzo de este tutorial.
- Tamaño de la imagen de fondo: Ajuste
- Posición de la imagen de fondo: centro (escritorio), centro inferior (tableta y teléfono)
Posición del módulo de texto
A continuación, abriremos el Módulo de texto y cambiaremos la posición.
- Posición: Absoluta
- Ubicación: Centro
Posición del Módulo #1 de Blurb
Luego, abriremos el primer módulo de Blurb en la lista y cambiaremos la posición en consecuencia:
- Posición: Absoluta
- Ubicación: Centro superior
Posición del módulo n.° 2 de Blurb
También modificaremos la posición del segundo módulo de Blurb.
- Posición: Absoluta
- Ubicación: centro inferior
Posición del módulo Blurb n.º 3
A continuación, tenemos la posición del tercer módulo de Blurb.
- Posición: Absoluta
- Ubicación: centro derecho
Posición del Módulo #4 de Blurb
Y por último, pero no menos importante, también cambiaremos la posición del cuarto módulo de Blurb de la siguiente manera:
- Posición: Absoluta
- Ubicación: Centro Izquierdo
Efecto de desplazamiento de entrada y salida de fila
Los últimos pasos de este tutorial incluyen agregar un efecto de desplazamiento de aparición y desaparición gradual al contenedor de filas.
- Habilitar aparición y desaparición gradual: Sí
- Opacidad inicial: 0%
- Opacidad media: 0% (al 25%)
- Opacidad final: 100% (al 29%)
Efecto de desplazamiento de escala hacia arriba y hacia abajo de filas
Complete el diseño y el efecto usando un efecto de desplazamiento de escala hacia arriba y hacia abajo y ¡listo!
- Habilitar escalado hacia arriba y hacia abajo: Sí
- Escala inicial: 20%
- Escala media: 20% (al 23%)
- Escala final: 120% (al 37%)
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo ser creativo con los nuevos efectos de desplazamiento de Divi . Más específicamente, le mostramos cómo crear un efecto de publicidad expandida que resalta los diferentes elementos de publicidad en un elemento circular. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.