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 Divi en curso, le mostraremos cómo crear CTA deslizables con la alineación de filas y la configuración de animación 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!
Echemos un vistazo a los tres ejemplos diferentes que vamos a manejar en esta publicación:
Cargar la página de inicio de la empresa de limpieza
Agregar nueva página y cambiar a Visual Builder
Como se mencionó anteriormente, vamos a utilizar el paquete de diseño de la empresa de limpieza para crear este tutorial, pero no dude en utilizar 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.
Cargar 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 crear desde cero, elegir un diseño prefabricado o clonar una página existente. Elige 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.
Eliminación de todas las configuraciones de animación en la página
Localizar sección en la página
Una vez que el diseño se cargue en su página, continúe y ubique la siguiente sección.
Eliminar animación
Abra su configuración y elimine la animación que ya está allí.
Extender 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». Haz que se aplique a todas las secciones de la página y haz clic en ‘Extender’.
Extender estilo a todas las filas
Repita los mismos pasos, pero en su lugar, haga que se aplique a todas las filas de la página.
Extienda el estilo a todos los módulos
Por último, haz que se aplique también a todos los módulos de la página.
Creando CTA #1
Agregar nueva fila
Ubicació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
- Relleno inferior: 0px
Agregar módulo de llamada a la acción
Agregar copia
¡Ahora podemos agregar nuestro módulo de llamada a la acción! Agregue algún contenido de su elección.
Añadir enlace
Agregue un enlace a su módulo CTA a continuación. Si aún no tiene un enlace para redirigir, 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 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 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 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 (computadora de escritorio y tableta), 16 px (teléfono)
- Altura de la línea del título: 1,2 em
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
Cambie la configuración del botón a continuación.
- 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 relleno del módulo.
- Relleno superior: 80px
- Relleno inferior: 80px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Borde
Luego, agregue un radio de borde superior derecho e inferior derecho en la configuración del borde.
- Arriba a la derecha: 100px
- Abajo a la derecha: 100px
Sombra de la caja
Para crear más profundidad, vamos a agregar una sombra de cuadro sutil.
- Fuerza de desenfoque de sombra de cuadro: 71px
- Fuerza de propagación de la sombra del cuadro: -5px
Animación
Por último, pero no menos importante, dale a tu Módulo CTA un efecto de animación.
- Dirección de animación: Derecha
- Intensidad de animación: 100%
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: lineal
Creando CTA #2
Clonar la fila n.° 1 de CTA y realizar cambios
Clonar Fila
Para crear el segundo ejemplo, continúe y clone la primera fila.
Arrastrar a la sección
Desplácese hacia abajo en la página y coloque el duplicado aquí:
Retire el acolchado superior de la sección
Abra la configuración de la sección en la que colocó la fila y retire el relleno superior.
- Relleno superior: 0px
Quitar el radio del borde superior izquierdo de la sección
Vaya a la configuración del 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 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 este CTA deslizable, vamos a usar una animación diferente. Siéntase libre de jugar con otras opciones de animación también.
- Dirección de animación: Centro
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: lineal
Creando CTA #3
Clonar la fila n.° 1 de CTA y realizar cambios
Clonar Fila
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 fila
Abra la configuración de fila del módulo y cambie la alineación a la derecha.
- Alineación de filas: Derecha
Quitar el fondo degradado de CTA
Elimina también el fondo degradado del módulo.
Utilice el color de fondo en su lugar
Utilice un color de fondo en su lugar.
- 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
Quitar el radio del borde de la CTA
Estamos convirtiendo el Módulo CTA en un cuadrado eliminando todo el radio de borde que se le dio.
Cambiar animación
Cambie la configuración de animación a continuación.
- Dirección de animación: Abajo
- Intensidad de animación: 100%
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: lineal
Eliminar el relleno inferior de la sección
Por último, pero no menos importante, vamos a empujar el módulo hacia la parte inferior de la sección quitando el relleno inferior de la sección en la que está colocado y ¡listo!
- Relleno inferior: 0px
Avance
Echemos un vistazo final a los tres ejemplos de CTA deslizables que hemos creado.
Pensamientos finales
En esta publicación, le mostramos cómo crear llamadas a la acción deslizables usando 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 deslizables para llamar la atención. Esta publicación de blog es parte de nuestra iniciativa de diseño Divi en la que 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!