Creación de CTA deslizantes con la configuración de animación y alineación de filas de Divi

Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel. Esta semana, como parte de nuestra iniciativa de diseño de Divi en curso, le mostraremos cómo crear CTA deslizantes con la configuración de animación y alineación de filas de Divi utilizando el paquete de diseño de la empresa de limpieza.

Para ayudar a lograr esto, comenzaremos eliminando todas las animaciones que ya están allí. De esa manera, podemos resaltar las llamadas a la acción que se deslizan.

¡Hagámoslo!

Avance

Echemos un vistazo a los tres ejemplos diferentes que vamos a manejar en esta publicación:

Subir la página de inicio de la empresa de limpieza

Agregar nueva página y cambiar a Visual Builder

Como se mencionó anteriormente, usaremos el paquete de diseño de la empresa de limpieza para crear este tutorial, pero no dude en usar este enfoque para cualquier sitio web que esté creando. Agregue una nueva página, ingrese el título de su página y cambie a Visual Builder de inmediato.

Subir la página de inicio de la empresa de limpieza

Una vez que lo haga, verá aparecer tres opciones en su pantalla. Puede comenzar a construir desde cero, elegir un diseño prediseñado o clonar una página existente. Elija la segunda opción.

Busque el paquete de diseño de la empresa de limpieza, seleccione el diseño de la página de destino y cárguelo en su página.

Eliminar todas las configuraciones de animación en la página

Localizar sección en la página

Una vez que el diseño esté cargado en su página, continúe y busque la siguiente sección.

Eliminar animación

Abra su configuración y elimine la animación que ya está allí.

Extienda el estilo a todas las secciones

Para ahorrar tiempo, vamos a extender este estilo de animación a todos los elementos de diseño de la página. Comenzaremos con las secciones de nuestra página haciendo clic con el botón derecho y seleccionando 'Extender estilos de animación'. Haga que se aplique a todas las secciones de la página y haga clic en 'Extender'.

Extender el estilo a todas las filas

Repite los mismos pasos, pero haz que se aplique a todas las filas de la página.

Amplíe el estilo a todos los módulos

Por último, haga que se aplique también a todos los módulos de la página.

Creando CTA # 1

Agregar nueva fila

Localización

¡Comencemos a crear el primer CTA deslizable! Agregue una nueva fila en la parte inferior de la siguiente sección:

Estructura de la columna

Elija la siguiente estructura de columnas para la fila que acaba de agregar:

Alineación de filas

Vamos a empujar la fila hacia la izquierda para ayudar a crear el efecto de deslizamiento.

• Alineación de filas: izquierda

Dimensionamiento

También disminuiremos el ancho de nuestra fila.

• Usar ancho personalizado: Sí
• Ancho personalizado: 500px

Espaciado

Y para deshacerse del espacio en blanco innecesario, elimine el relleno superior e inferior de la fila.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar módulo de llamado a la acción

Agregar copia

¡Ahora podemos agregar nuestro Módulo de Llamado a la Acción! Agregue algún contenido de su elección.

Añadir enlace

A continuación, agregue un enlace a su módulo de CTA. Si aún no tiene un enlace al que redireccionar, simplemente ingrese '#'. Sin agregar algo a este cuadro, no podrá ver el botón, así que asegúrese de no dejarlo vacío.

Eliminar color de fondo

El módulo de CTA tiene por defecto un color de fondo. Continúe y elimínelo en la configuración de fondo.

Copiar degradado de sección

Abra la sección que contiene el fondo degradado azul. Sin cambiar nada al respecto, haga clic con el botón derecho y copie la configuración.

Pegar degradado en el módulo CTA

Pegue este fondo degradado en el módulo CTA.

Configuración del texto del título

Abra la configuración del Módulo de CTA nuevamente, vaya a la configuración del texto del título y realice algunos cambios para que coincida con el paquete de diseño:

• Fuente del título: Ubuntu
• Peso de la fuente del título: negrita
• Tamaño del texto del título: 24 px (escritorio y tableta), 16 px (teléfono)
• Altura de la línea de título: 1.2em

Configuración del texto del cuerpo

Cambie también el peso de la fuente del cuerpo del cuerpo.

• Peso de la fuente del cuerpo: Semi negrita

Configuración de botones

A continuación, cambie la configuración de los botones.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 18px
• Color del texto del botón: # 557df3
• Color de fondo del botón: #FFFFFF
• Ancho del borde del botón: 10px
• Color del borde del botón: #FFFFFF
• Radio del borde del botón: 0px
• Fuente del botón: Ubuntu
• Peso de fuente: negrita

Espaciado

Aumente también el acolchado del módulo.

• Acolchado superior: 80px
• Acolchado inferior: 80px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Frontera

Luego, agregue un radio de borde superior derecho e inferior derecho en la configuración del borde.

• Arriba a la derecha: 100 px
• Abajo a la derecha: 100 px

Sombra de la caja

Para crear más profundidad, agregaremos una sombra de cuadro sutil.

• Fuerza de desenfoque de sombra de caja: 71px
• Fuerza de propagación de la sombra de caja: -5px

Animación

Por último, pero no menos importante, dale a tu Módulo de CTA un efecto de animación.

• Dirección de animación: Derecha
• Intensidad de animación: 100%
• Opacidad inicial de la animación: 100%
• Curva de velocidad de animación: lineal

Creando CTA # 2

Clonar la fila de la CTA n. ° 1 y realizar cambios

Fila de clonación

Para crear el segundo ejemplo, siga adelante y clone la primera fila.

Arrastrar a la sección

Desplácese hacia abajo en la página y coloque el duplicado aquí mismo:

Quitar el acolchado superior de la sección

Abra la configuración de la sección en la que ha colocado la fila y elimine el relleno superior.

• Relleno superior: 0px

Eliminar el radio del borde superior izquierdo de la sección

Vaya a la configuración de Borde a continuación y elimine también el radio del borde superior izquierdo.

Eliminar el radio del borde superior derecho de CTA

Luego, abra el Módulo de CTA y elimine el radio del borde superior derecho para permitir que la sección y el módulo se mezclen.

Cambiar animación

Para esta CTA deslizable, usaremos una animación diferente. Siéntete libre de jugar con otras opciones de animación también.

• Dirección de animación: Centro
• Opacidad inicial de la animación: 100%
• Curva de velocidad de animación: lineal

Creando CTA # 3

Clonar la fila de la CTA n. ° 1 y realizar cambios

Fila de clonación

Para crear el último ejemplo, vamos a clonar la fila una vez más.

Arrastrar a la sección

Coloque el duplicado en la siguiente sección:

Cambiar alineación de filas

Abra la configuración de fila del módulo y cambie la alineación a la derecha.

• Alineación de filas: derecha

Eliminar fondo degradado de CTA

Elimine también el fondo degradado del módulo.

Use color de fondo en su lugar

En su lugar, utilice un color de fondo.

• Color de fondo: # f2835a

Cambiar el color del texto del botón

Para que coincida con el color de fondo, cambie también el color del texto del botón.

• Color del texto del botón: # f2835a

Eliminar radio de borde de CTA

Estamos convirtiendo el módulo de CTA en un cuadrado eliminando todo el radio del borde que se le dio.

Cambiar animación

A continuación, cambie la configuración de la animación.

• Dirección de animación: Abajo
• Intensidad de animación: 100%
• Opacidad inicial de la animación: 100%
• Curva de velocidad de animación: lineal

Quitar el acolchado de la parte inferior de la sección

Por último, pero no menos importante, vamos a empujar el módulo a la parte inferior de la sección quitando el relleno inferior de la sección en la que está colocado y ¡listo!

• Acolchado inferior: 0px

Avance

Echemos un vistazo final a los tres ejemplos de CTA deslizantes que hemos creado.

Pensamientos finales

En esta publicación, le mostramos cómo crear CTA deslizantes utilizando el paquete de diseño de la empresa de limpieza de Divi. Comenzamos eliminando las animaciones que ya están presentes en la página. Después de eso, hemos creado tres CTA deslizantes para llamar la atención. Esta publicación de blog es parte de nuestra iniciativa de diseño Divi, donde tratamos de poner algo en su caja de herramientas de diseño todas las semanas. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!