Cómo cambiar el contenido en Hover para crear CTA únicos en Divi (3 formas)
Publicado: 2019-09-04Las opciones de desplazamiento integradas de Divi facilitan el cambio del contenido de cualquier módulo al desplazar el cursor. Podemos cambiar las imágenes de fondo, los colores e incluso el texto al pasar el mouse. Esto abre la puerta a formas creativas de captar la atención de los usuarios e impulsar esas llamadas a la acción para obtener mejores conversiones.
Hoy, le mostraremos cómo cambiar el contenido al pasar el mouse en Divi para algunas llamadas a la acción únicas. Mostraremos formas inteligentes de cambiar el texto de los botones (e íconos) al pasar el mouse. Le mostraremos cómo cambiar elegantemente el título y el texto del botón dentro de un módulo de llamada a la acción al pasar el mouse. E incluso incluiremos CSS personalizado para agregar algunos efectos de transición únicos también (como cambiar y voltear el ícono de un botón).
¡Echale un vistazo!
Vistazo
Aquí hay un vistazo rápido a los tres diseños que crearemos hoy.
# 1 Cómo cambiar el contenido al pasar el mouse por botones
# 2 Cómo cambiar los fondos y el contenido del cuerpo en los módulos de texto
# 3 Cómo cambiar el contenido al pasar el mouse por varios elementos con el módulo de llamada a la acción
Descarga el diseño GRATIS
Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active el tema Divi instalado (o el complemento Divi Builder si no usa el tema Divi).
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Cargue el diseño prediseñado de la página de destino de Cake Maker en la página. Usaremos este diseño para nuestros diseños. Puede cargar el diseño seleccionando "Elegir un diseño prefabricado" cuando se le solicite al implementar Divi Builder. O puede seleccionar el icono más "Cargar desde la biblioteca" en el menú de configuración dentro de Divi Builder. Para obtener más información sobre cómo cargar el diseño prediseñado en su página, vea nuestro video.
Después de eso, estará listo para comenzar a diseñar en Divi.
# 1 Cómo cambiar el contenido al pasar el mouse por botones
Una vez que haya cargado el diseño prediseñado de la página de destino de Cake Maker en su página, busque el botón principal CTA en el encabezado superior de la página y abra la configuración de diseño del módulo de botones.
Cambiar el texto del botón al pasar el mouse
En la pestaña de contenido, actualice el texto del botón de la siguiente manera:
Texto del botón: "Comprar ahora"
Luego, implemente la opción de desplazamiento para el texto del botón e ingrese el texto del botón de reemplazo debajo de la pestaña de desplazamiento de la siguiente manera:
Texto del botón (desplazamiento): "Vamos"
El texto debajo del texto del botón de desplazamiento reemplazará el texto del botón predeterminado al pasar el cursor sobre el botón.
Ancho del botón
Sin embargo, el botón es inline-block lo que el ancho del botón / enlace cambiará según la cantidad de contenido (letras o espacios) que contenga el botón. Esto no funciona bien para este efecto de desplazamiento porque con un texto de reemplazo más pequeño, el botón se reducirá en ancho y creará saltos o fallas al pasar el cursor sobre el borde del botón. Para solucionar este problema, debemos aplicar un ancho establecido al botón. Esto es fácil con un solo fragmento de CSS. Agregue el siguiente CSS al elemento principal del módulo de botones.
width: 200px;
Aquí está el resultado.
Cambios adicionales y efectos de desplazamiento
Además de cambiar el contenido al pasar el mouse, también podemos darle vida a nuestro botón con diferentes combinaciones de efectos de desplazamiento.
En este momento, el icono del botón es una flecha hacia la derecha que se despliega al pasar el mouse. Esto funciona muy bien con el texto del botón de desplazamiento "Let's Go".
Voltear el ícono del botón al pasar el mouse
Pero también puede agregar un bonito efecto de desplazamiento para el ícono del botón. Para hacer esto, primero haga que el ícono aparezca siempre (no solo al pasar el mouse) actualizando lo siguiente:
Mostrar solo el ícono al pasar el mouse por el botón: NO
Luego agregue una clase CSS al módulo de botones de la siguiente manera:
Clase CSS: flip-button-icon
Luego abra la configuración de la página y agregue el siguiente CSS personalizado.
.flip-button-icon:after {
transition: transform 500ms;
}
.flip-button-icon:hover:after {
transform: rotateX(360deg);
}
Aquí está el resultado.
Cambiar el icono del botón al pasar el mouse
También puede cambiar completamente el icono del botón al pasar el mouse. Todo lo que realmente necesita es un pequeño fragmento de CSS para reemplazar el contenido de: después del pseudo elemento donde reside el icono.
Antes de agregar el CSS, primero elija un icono de botón diferente para mostrarlo inicialmente, luego podemos cambiarlo a la flecha derecha con CSS.
Actualice el ícono del botón con el ícono del carrito ya que nuestro CTA es "Mostrar ahora".
Luego, vaya a la pestaña avanzada y actualice la propiedad de transformación CSS actual con una rotación de 180 grados en lugar de 360 grados. Y agregue un nuevo Unicode para el contenido que muestra la flecha izquierda ("\ 23").
El nuevo fragmento se verá así:
.flip-button-icon:hover:after {
transform: rotateY(180deg);
content: "\23";
}
Dado que también giraremos el ícono 180 grados, esto mostrará una flecha hacia la derecha como reemplazo del ícono del carrito al pasar el cursor sobre el botón.
Resultado final
Este es el resultado final.
# 2 Cómo cambiar los fondos y el contenido del cuerpo en los módulos de texto
Para este próximo diseño, recorra el diseño de la página hasta la sección "Mis servicios". Allí abre la configuración de fila para la fila superior con los dos módulos de texto.
Actualizar la configuración de la columna
Debajo de la configuración de la fila, abra la configuración de la Columna 1 y agregue una imagen de fondo al pasar el cursor sobre la columna.
Esto reemplazará el fondo blanco que está ahí por defecto.
Además, agregue un degradado sobre la imagen de fondo al pasar el mouse.
Color de degradado de fondo a la izquierda: rgba (255,255,255,0)
Gradiente de fondo Color derecho: rgba (46,41,142,0.75)
Posición inicial: 30%
Colocar degradado sobre la imagen de fondo: SÍ
Esto proporcionará una superposición agradable que hará que el texto de reemplazo al pasar el mouse sea más legible.
Después de eso, elimine el relleno personalizado para la columna restaurándolo a la configuración predeterminada.
Personalizar el módulo de texto en la columna 1
Una vez que se actualice la columna, guarde la configuración y abra la configuración del módulo de texto para el módulo de texto en la columna 1. Luego, actualice el contenido del cuerpo del módulo de texto al pasar el mouse con lo siguiente:
<h3>Custom Cakes</h3> <a href="#">Order Now</a>
Esta es una buena manera de agregar una llamada a la acción con un enlace al pasar el mouse.
A continuación, actualice el fondo de la siguiente manera:
Color de fondo: #ffffff;
Color de fondo (flotar): rgba (255,255,255,0);
Esto agrega un elemento de transición agradable para revelar la imagen de fondo en la columna gradualmente.
A continuación, actualice la siguiente configuración de diseño:
Alto: 260px
Relleno: 30 px arriba, 30 px a la izquierda, 30 px a la derecha
Relleno (flotar): 90 píxeles en la parte superior
Esto creará un agradable efecto de transición que hará descender el texto gradualmente al pasar el cursor sobre el módulo de texto.
A continuación, actualice los colores del texto a blanco de la siguiente manera:
Color del texto del enlace: #ffffff
Color del texto del encabezado 3 (desplazamiento): #ffffff
Para ralentizar la transición de los efectos de desplazamiento, actualice la duración de la transición de la siguiente manera:
Duración de la transición: 500 ms
Resultado final
Ahora mira el resultado final.
# 3 Cómo cambiar el contenido al pasar el mouse por varios elementos con el módulo de llamada a la acción
Para este próximo diseño, usaremos un módulo de llamado a la acción que cambia múltiples elementos de contenido al pasar el mouse. Para hacer esto, recorra la página hasta la sección Colecciones populares.
Agregar nuevo módulo de llamado a la acción
Luego, agregue un nuevo módulo de llamado a la acción debajo del botón "Comprar ahora" en la fila superior de la sección de especialidades.
Actualizar CTA con contenido cambiante al pasar el mouse
A continuación, actualice el contenido de la llamada a la acción de la siguiente manera:
Título: "Oferta especial"
Título (desplazamiento): "10% de descuento"
Texto del botón: "Comprar ahora"
Texto del botón (pasar el cursor): "Obtener oferta"
Cuerpo: "Cupcakes personalizados"
URL del enlace del botón: #
Guarde la configuración por ahora.
Copiar y pegar estilos de botones de diseño
Vamos a dar un salto en el diseño del botón para nuestro CTA. Para hacer esto, abra la configuración de botones para el módulo de botones sobre el módulo de CTA que vino con el diseño prefabricado. A continuación, haga clic en el icono de tres puntos en el grupo de opciones de botones y seleccione "copiar estilos de botón".
A continuación, abra el menú de otras opciones en el módulo de llamada a la acción que estamos diseñando y seleccione "Pegar estilos de botón".
A continuación, abra la configuración del módulo de llamada a la acción y actualice el relleno de botones:
Relleno de botones: 15 píxeles en la parte superior, 15 píxeles en la parte inferior, 40 píxeles a la izquierda, 40 píxeles a la derecha 
Actualizar estilos de texto
Después de eso, actualice el título y el diseño del texto del cuerpo.
Nivel de encabezado del título: H4
Fuente del título: Pacifico
Tamaño del texto del título: 9vw
Altura de la línea de título: 1.3em
Fuente del cuerpo: Open Sans
Peso de la fuente del cuerpo: Negrita
Tamaño del texto del cuerpo: 18px
Espaciado entre letras del cuerpo: 1 px
Ajustes finales
A continuación, actualice el relleno.
Relleno: 0px a la izquierda, 0px a la derecha
Luego, dele al módulo una clase CSS personalizada.
Clase CSS: fade-cta-title
Haga que el botón cta sea de ancho completo agregando el siguiente CSS personalizado al cuadro de entrada CSS del botón de promoción.
Y actualice la duración de la transición.
Duración de la transición: 800 ms
Finalmente, actualice el color de fondo para que sea transparente por defecto y cambie de color al pasar el mouse.
Color de fondo: ninguno (eliminar)
Color de fondo (flotar): rgba (247,78,72,0.86)
A continuación, elimine los dos módulos en la fila sobre nuestro módulo de Llamada a la acción para que reemplace el cta original del diseño.
Resultado hasta ahora
Aquí está el resultado hasta ahora. Observe cómo cambia el texto del título y el texto del botón al pasar el cursor sobre el módulo de llamada a la acción.
Suavizar el cambio de contenido con animación
Si queremos suavizar la transición del título grande en el CTA, podemos agregar una animación simple con CSS. Como ya agregamos la clase CSS al módulo, todo lo que tenemos que hacer es abrir el modal de configuración de la página y agregar el siguiente CSS personalizado:
.fade-cta-title:hover .et_pb_module_header {
animation-name: fadeinout;
animation-duration: 800ms;
}
@keyframes fadeinout {
from {opacity: 0;}
to {opacity: 1;}
}
Resultado final
Ahora veamos el resultado final.
Y aquí está en el móvil.
Pensamientos finales
En este tutorial, mostramos 3 ejemplos de cómo cambiar de manera efectiva el contenido al pasar el mouse en Divi. Las opciones de desplazamiento integradas para el contenido realmente hacen que este sea un proceso fácil. Y con algunos fragmentos de CSS, puede agregar algunas transiciones únicas para diferenciar el diseño. Con suerte, esto le permitirá impulsar las llamadas a la acción en su propio sitio para obtener más conversiones y participación.
¿Quieren más? Tenemos un montón de publicaciones geniales que te ayudarán a llevar tus CTA al siguiente nivel.
Espero tener noticias tuyas en los comentarios.
¡Salud!