Cómo cambiar el contenido al pasar el mouse para crear CTA únicos en Divi (3 formas)


Las opciones integradas de desplazamiento de Divi facilitan el cambio del contenido de cualquier módulo en desplazamiento. Podemos cambiar las imágenes de fondo, los colores e incluso el texto al pasar el mouse por encima. Esto abre la puerta a formas creativas de captar la atención de los usuarios e impulsar esas llamadas a la acción para lograr mejores conversiones.

Hoy, le mostraremos cómo cambiar el contenido al pasar el mouse en Divi para algunas llamadas únicas a la acción. Mostraremos formas inteligentes de cambiar el texto del botón (y los íconos) al desplazar 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 sobre él. E incluso agregaremos algunos CSS personalizados para agregar también algunos efectos de transición únicos (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

Divi cambiar contenido al pasar el mouse

# 2 Cómo cambiar fondos y contenido del cuerpo en módulos de texto

Divi cambiar contenido al pasar el mouse

# 3 Cómo cambiar el contenido al pasar el mouse por varios elementos con el módulo de llamado a la acción

Divi cambiar contenido al pasar el mouse

Descargar el diseño GRATIS

Para poner sus manos en 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

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:

  1. Si aún no lo ha hecho, instale y active el Divi Theme instalado (o el complemento Divi Builder si no usa el tema Divi).
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
  3. Carga el Diseño prefabricado de Cake Maker Landing Page a 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 que implemente Divi Builder. O puede seleccionar el ícono más "Cargar desde la biblioteca" en el menú de configuración dentro del Divi Builder. Para obtener más información sobre cómo cargar el diseño prefabricado en su página, vea nuestro video.

Divi cambiar contenido al pasar el mouse

Después de eso, estás 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 prefabricado 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.

Divi cambiar contenido al pasar el mouse

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"

Divi cambiar contenido al pasar el mouse

Luego implemente la opción de desplazamiento del 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 (desplazarse): "Let’s Go"

Divi cambiar contenido al pasar el mouse

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.

Divi cambiar contenido al pasar el mouse

Ancho del botón

Sin embargo, el botón es inline-block entonces el ancho del botón / enlace cambiará de acuerdo con la cantidad de contenido (letras o espacios) que contiene 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 esto, necesitamos 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;

Divi cambiar contenido al pasar el mouse

Aquí está el resultado.

Divi cambiar contenido al pasar el mouse

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 ícono 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 agradable efecto de desplazamiento del mouse para el ícono del botón. Para hacer esto, primero haga que el icono aparezca siempre (no solo al pasar el mouse) actualizando lo siguiente:

Mostrar solo el icono al pasar el mouse por el botón: NO

Divi cambiar contenido al pasar el mouse

Luego agregue una clase CSS al módulo de botones de la siguiente manera:

Clase CSS: flip-button-icon

Divi cambiar contenido al pasar el mouse

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);
}

Divi cambiar contenido al pasar el mouse

Aquí está el resultado.

Divi cambiar contenido al pasar el mouse

Cambiar el ícono del botón al pasar el mouse

También puede cambiar completamente el ícono 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 ícono de botón diferente para mostrar 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".

Divi cambiar contenido al pasar el mouse

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 mouse sobre el botón.

Resultado final

Este es el resultado final.

Divi cambiar contenido al pasar el mouse

# 2 Cómo cambiar fondos y contenido del cuerpo en módulos de texto

Para este próximo diseño, diríjase hacia abajo en el diseño de la página a la sección "Mis servicios". Allí abra la configuración de fila para la fila superior con los dos módulos de texto.

Divi cambiar contenido al pasar el mouse

Actualizar configuración de 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 mouse sobre la columna.

Divi cambiar contenido al pasar el mouse

Esto reemplazará el fondo blanco que está allí por defecto.

Además, agregue un gradiente sobre la imagen de fondo al pasar el mouse sobre él también.

Color de fondo izquierdo del degradado: rgba (255,255,255,0)
Gradiente de fondo derecho Color: rgba (46,41,142,0.75)
Posición de inicio: 30%
Coloque el gradiente sobre la imagen de fondo: SÍ

Divi cambiar contenido al pasar el mouse

Esto proporcionará una buena superposición que hará que el texto de reemplazo al pasar el mouse sea más legible.

Después de eso, retire el relleno personalizado para la columna restableciéndolo a la configuración predeterminada.

Divi cambiar contenido al pasar el mouse

Personalizar el módulo de texto en la columna 1

Una vez que se actualiza 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:

Custom Cakes

Order Now

Esta es una buena manera de agregar un llamado 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 (desplazamiento): rgba (255,255,255,0);

Esto agrega un buen elemento de transición para revelar la imagen de fondo en la columna gradualmente.

A continuación, actualice la siguiente configuración de diseño:

Altura: 260 px

Divi cambiar contenido al pasar el mouse

Relleno: 30px arriba, 30px izquierda, 30px derecha
Acolchado (desplazamiento): 90px arriba

Divi cambiar contenido al pasar el mouse

Esto creará un agradable efecto de transición que baja el texto gradualmente al pasar el mouse 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
Título 3 Color del texto (desplazarse): #ffffff

Divi cambiar contenido al pasar el mouse

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 transición: 500 ms

Divi cambiar contenido al pasar el mouse

Resultado final

Ahora mira el resultado final.

Divi cambiar contenido al pasar el mouse

# 3 Cómo cambiar el contenido al pasar el mouse por varios elementos con el módulo de llamado a la acción

Para este próximo diseño, vamos a utilizar un módulo de llamada a la acción que cambia varios elementos de contenido al pasar el mouse sobre él. Para hacer esto, dirígete a la sección Colecciones populares.

Divi cambiar contenido al pasar el mouse

Agregar nuevo módulo de llamada 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 especialidad.

Divi cambiar contenido al pasar el mouse

Actualizar CTA con contenido cambiante al pasar el mouse por encima

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 mouse): "Obtener oferta"
Cuerpo: "Cupcakes personalizados"
URL del enlace del botón: #

Divi cambiar contenido al pasar el mouse

Divi cambiar contenido al pasar el mouse

Guardar 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 del botón para el módulo de botón sobre el módulo CTA que viene con el diseño prefabricado. Luego haga clic en el icono de punto triple en el grupo de opciones de botón y seleccione "copiar estilos de botón".

Divi cambiar contenido al pasar el mouse

Luego abra el menú de otras opciones en el módulo de llamado a la acción que estamos diseñando y seleccione "Pegar estilos de botones".

Divi cambiar contenido al pasar el mouse

Luego abra la configuración del módulo de llamada a la acción y actualice el relleno del botón:

Relleno de botón: 15 píxeles superior, 15 píxeles inferior, 40 píxeles izquierda, 40 píxeles derecha
Divi cambiar contenido al pasar el mouse

Actualizar estilos de texto

Después de eso, actualice el diseño del título y el texto del cuerpo.

Nivel de título 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 de letras del cuerpo: 1px

Divi cambiar contenido al pasar el mouse

Configuraciones finales

A continuación, actualice el relleno.

Relleno: 0 px a la izquierda, 0 px a la derecha

Luego dele al módulo una clase CSS personalizada.

Clase CSS: fade-cta-title

Haga el botón cta de ancho completo agregando el siguiente CSS personalizado al cuadro de entrada CSS del botón Promo.

Y actualice la duración de la transición.

Duración de transición: 800 ms

Divi cambiar contenido al pasar el mouse

Finalmente, actualice el color de fondo para que sea transparente de manera predeterminada y cambie el color al pasar el mouse.

Color de fondo: ninguno (eliminar)
Color de fondo (desplazamiento): rgba (247,78,72,0.86)

Divi cambiar contenido al pasar el mouse

Luego, elimine los dos módulos en la fila sobre nuestro módulo de Llamado 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 el texto del título y el texto del botón cambian al pasar el mouse sobre el módulo de llamada a la acción.

Divi cambiar contenido al pasar el mouse

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 modo de configuración de 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;}
}

Divi cambiar contenido al pasar el mouse

Resultado final

Ahora veamos el resultado final.

Divi cambiar contenido al pasar el mouse

Y aquí está en el móvil.

Divi cambiar contenido al pasar el mouse

Pensamientos finales

En este tutorial, hemos mostrado 3 ejemplos de cómo cambiar efectivamente el contenido al pasar el mouse en Divi. Las opciones de desplazamiento del contenido incorporadas 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á aumentar las llamadas a la acción en su propio sitio para obtener más conversiones y participación.

¿Quieren más? Tenemos una tonelada de excelentes publicaciones eso ayudará a llevar su CTA al siguiente nivel.

Espero tener noticias suyas en los comentarios.

¡Salud!