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 usar de manera creativa las opciones de desplazamiento de Divi para enfatizar las CTA en sus páginas. Estamos utilizando el paquete de diseño de servicio de lavandería de Divi y manejaremos tres ejemplos diferentes de poner su llamado a la acción en el centro de atención.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido a los tres ejemplos que crearemos:
Agregar nueva página usando el diseño de la página de inicio del servicio de lavandería
Primero, comience agregando una nueva página a su sitio web y cargue la página de inicio del servicio de lavandería. Los tres ejemplos que crearemos se basarán en este diseño. Una vez que obtenga el enfoque, puede aplicar estos ejemplos a cualquier diseño en el que esté trabajando.
Ejemplo de creación n.º 1: usar el cursor de otro elemento para redirigir la atención a la CTA
Módulo de texto clonado
¡Empecemos con el primer ejemplo! Estamos transformando un módulo de texto existente en un incentivo al pasar el mouse. Este enfoque solo se verá bien en el escritorio, es por eso que estamos clonando el módulo inicial para permitir que aparezca en tamaños de pantalla más pequeños sin efectos de desplazamiento.
Visibilidad
Módulo de texto #1
Continúe ocultando el primer módulo en la tableta y el teléfono.
Módulo de texto #2
Y oculta el segundo módulo en el escritorio.
Agregar efecto de desplazamiento al módulo de texto de escritorio
Agregar contenido del encabezado 3
Solo estamos editando el primer Módulo de Texto, que será el que aparecerá en el escritorio. Abra el módulo y agregue contenido del encabezado 3 al cuadro de contenido.
Configuración de texto flotante
Luego, vaya a la configuración de texto y ‘oculte’ el texto del párrafo de su módulo agregando 0px al tamaño del texto al pasar el mouse.
- Tamaño del texto: 0px
Configuración de texto de encabezado flotante 2
Haga lo mismo para la configuración de texto del encabezado 2 al pasar el mouse.
- Encabezado 2 Tamaño del texto: 0px
Configuración de texto de encabezado predeterminado 3
Luego, vaya a la configuración de texto del encabezado 3 y realice algunos cambios.
- Título 3 Fuente: Josefin Sans
- Encabezado 3 Peso de fuente: semi negrita
- Título 3 Tamaño del texto: 0px
Ajustes de texto de encabezado flotante 3
Modifique el tamaño del texto al pasar el mouse.
- Encabezado 3 Tamaño del texto: 40px
Configuración de espaciado predeterminada
A continuación, vaya a la configuración de espaciado y asegúrese de que se apliquen los siguientes valores de relleno personalizados:
- Relleno superior: 80px
- Relleno inferior: 50px
- Relleno izquierdo: 40px
- Relleno derecho: 40px
Configuración de espaciado de desplazamiento
Agregue un margen personalizado al pasar el mouse también.
- Margen superior: 50px
- Margen izquierdo: -53.5vw
Configuración de borde predeterminada
También estamos agregando un borde inferior sin borde.
- Ancho del borde inferior: 0px
- Color del borde inferior: #ff947f
- Estilo de borde inferior: punteado
Configuración del borde flotante
Cambie el ancho del borde al pasar el mouse.
- Ancho del borde inferior: 5px
Configuración predeterminada de la sombra del cuadro
Luego, agrega una sombra de cuadro.
- Posición vertical de la sombra del cuadro: 50px
- Fuerza de desenfoque de sombra de cuadro: 54px
- Fuerza de propagación de la sombra del cuadro: -32px
- Color de sombra: rgba(255,255,255,0)
Configuración de la sombra del cuadro flotante
Y cambie el color de la sombra del cuadro al pasar el mouse.
- Color de sombra: rgba(0,0,0,0.2)
Transiciones
Para crear una transición suave, aumente la duración de la transición en la configuración de transiciones.
- Duración de la transición: 750ms
Agregar nuevo módulo de texto
¡Pasemos al siguiente ejemplo! Estamos transformando un módulo de texto en un módulo de botón al pasar el mouse. Para hacerlo, comience agregando un módulo de texto en el siguiente lugar de su página:
Visibilidad
Módulo de botones
Mantendremos el módulo de botones tal como está en pantallas más pequeñas, así que adelante, desactívelo solo en el escritorio.
Módulo de texto
Haga lo mismo con el módulo de texto que acaba de agregar, pero en su lugar, ocúltelo en la tableta y el teléfono.
Agregue efectos de desplazamiento al módulo de texto de escritorio
Agregar contenido
Ahora, abra el módulo de texto y agregue algo de copia H3 y copia de enlace.
Color de fondo predeterminado
Continúe agregando un color de fondo completamente transparente al módulo.
- Color de fondo: rgba(255,255,255,0)
Color de fondo flotante
Y cambie este color de fondo al pasar el mouse.
- Color de fondo: #ffffff
Configuración de texto predeterminada
Luego, vaya a la configuración de texto y cambie la orientación del texto de su módulo.
- Orientación del texto: Centro
Configuración de texto de enlace predeterminado
Realice algunos cambios en la apariencia del texto del enlace a continuación.
- Fuente del enlace: Roboto
- Peso de la fuente del enlace: Negrita
- Estilo de fuente del enlace: Mayúsculas
- Color del texto del enlace: #ff947f
- Tamaño del texto del enlace: 0px
- Espaciado entre letras de enlace: 2px
Configuración de texto de enlace flotante
Y agregue otro valor al tamaño del texto del enlace al pasar el mouse.
- Tamaño del texto del enlace: 13px
Configuración de texto de encabezado predeterminado 3
Tendremos que cambiar la configuración de texto H3 también.
- Encabezado 3 Peso de fuente: semi negrita
- Título 3 Estilo de fuente: cursiva y subrayado
- Color de subrayado del encabezado 3: #ffc882
- Título 3 Estilo de subrayado: punteado
- Encabezado 3 Alineación de texto: Centro
- Título 3 Color del texto: #ffffff
- Encabezado 3 Tamaño del texto: 37px
Ajustes de texto de encabezado flotante 3
Y estamos cambiando el tamaño del texto H3 al pasar el mouse para ocultarlo una vez que pasas el mouse por el módulo.
- Título 3 Tamaño del texto: 0px
Tamaño predeterminado
A continuación, cambie el ancho dentro de la configuración de Tamaño. Asegúrese de que, de forma predeterminada, el ancho permanezca ‘100%’.
- Ancho: 100%
Tamaño flotante
Para crear el efecto de botón, reduciremos el ancho al pasar el mouse.
- Ancho: 23%
- Alineación del módulo: Centro
Espaciado
También necesitaremos un poco de relleno adicional para crear un botón de aspecto limpio.
- Relleno superior: 5px
- Relleno inferior: 15px
Borde flotante
Y agregaremos ’30px’ de esquinas redondeadas a cada una de las esquinas al pasar el mouse.
Transiciones
Por último, nos aseguraremos de tener una transición fluida usando la siguiente duración de transición:
- Duración de la transición: 700ms
Ejemplo de creación n.° 3: Ampliación de la opción de correo electrónico al pasar el mouse
Clonar módulo de opción de correo electrónico
¡Vamos al siguiente y último ejemplo! Cuando alguien desplaza el Módulo de suscripción por correo electrónico en el escritorio, el módulo aumentará de tamaño y facilitará que los visitantes se unan a su boletín informativo. Nuevamente, solo estamos haciendo que este efecto de desplazamiento aparezca en el escritorio. Es por eso que comenzamos clonando el módulo.
Visibilidad
Módulo de opción de correo electrónico n.º 1
Abra la configuración de visibilidad del primer módulo Optin de correo electrónico y ocúltelo en el escritorio.
Módulo de opción de correo electrónico #2
Haga lo mismo con el segundo módulo, pero ocúltelo en tamaños de pantalla más pequeños. Este es el módulo con el que trabajaremos.
Agregar efectos de desplazamiento al módulo de opción de correo electrónico de escritorio
Agregar contenido
Agregue algo de contenido adicional al cuadro de contenido del segundo módulo Email Optin.
Configuración del texto del título flotante
Aumente el tamaño del texto del texto del título al pasar el mouse.
- Tamaño del texto del título: 50px
Configuración predeterminada del texto del cuerpo
A continuación, cambie el tamaño del texto del cuerpo.
- Tamaño del texto del cuerpo: 0px
Configuración del texto del cuerpo flotante
Y agregue un tamaño de texto diferente al pasar el mouse.
- Tamaño del cuerpo del texto: 14px
Configuración de espaciado de desplazamiento
Por último, pero no menos importante, vamos a aumentar el tamaño del módulo Email Optin agregando diferentes márgenes personalizados y valores de relleno al pasar el mouse.
- Margen superior: -25vw
- Margen izquierdo: -50vw
- Acolchado superior: 17vw
- Acolchado inferior: 17vw
- Relleno izquierdo: 12%
- Relleno derecho: 12%
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado final.
Pensamientos finales
En esta publicación de caso de uso, le mostramos cómo poner CTA de manera creativa en el centro de atención usando las opciones de desplazamiento de Divi y el paquete de diseño de servicio de lavandería . Hemos manejado tres ejemplos diferentes que, con suerte, estimularán su imaginación y lo ayudarán a llevar su sitio web al siguiente nivel. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!
Imagen destacada de Snipergraphics / shutterstock.com