Efecto de zoom en la imagen con texto clicable

Publicado el 12/10/2020 | 2 comentarios

Divi le permite reproducir fácilmente un efecto de zoom al pasar por encima de una imagen con una superposición de texto en la que se puede hacer clic. Le sugiero que descubra cómo obtener este efecto de moda que mejorará su página de inicio o sus llamadas a la acción...

Mira lo que conseguirás con este tutorial:

Image Zoom Divi

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - Crear una imagen con un texto superpuesto en el que se pueda hacer clic

Para obtener una imagen con una superposición de texto, sólo tenemos que "tomar el problema al revés": utilizaremos un Módulo de texto y añadir un imagen de fondo.

En la web, a menudo hay que pensar así: se visualiza el objetivo y se buscan las herramientas a disposición para conseguirlo.

Insérer une ligne 3/3
Insertar una línea 3/3 con un módulo de texto.
  1. Inserte una línea dentro de su Diseño de Divi. Elija, por ejemplo, una línea 3/3.
  2. Insertar un módulo de texto.
  3. En la pestaña Contenido > Texto, introduzca su texto de llamada a la acción. En mi ejemplo, he anotado "su texto aquí", pero es usted quien debe anotar lo que quiera.
  4. En la pestaña Contenido > Enlace, introduzca la dirección web a la que debe enlazar el módulo.
Paramétrer le module Texte
Introduzca el texto y el enlace del módulo

Ahora puedes añadir una imagen de fondo:

  1. En la pestaña Contenido > Fondo, seleccione el icono de la imagen y añada una imagen de fondo.
  2. Por el momento, su módulo no se ajusta a lo que podríamos esperar de un efecto de zoom en una imagen, pero espere, ya llegará...
  3. Todavía en la pestaña Contenido > Fondo, seleccione el icono del gradiente. Haga clic en "+ Gradiente de fondo".
Ajouter une image de fond et un dégradé sur l'image
Añade una imagen de fondo y un degradado sobre ella
  1. Al ser un degradado compuesto por 2 colores, puede seleccionarlos uno tras otro para definir un negro con una opacidad del 50%, por ejemplo. En mi video, esto es más fácil de entender...
  2. Un poco más abajo, verás una opción llamada "imagen de fondo del título", actívala. Esto le permite arrastrar el gradiente negro opaco entre la imagen de fondo y el módulo de texto. Puedes imaginar que este módulo de texto está compuesto por 3 niveles de superposición, un poco como las capas de photoshop.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz clic en "PRUEBA GRATUITA

Una vez hecho esto, daremos estilo al módulo para que empiece a parecerse a una imagen real en la que se puede hacer clic con un efecto de zoom:

styliser le module Texte + image
Mejorar la apariencia del módulo Texto + Imagen
  1. Ve a la pestaña Estilo > Espaciado y añade algún margen interno en la parte superior e inferior. Por ejemplo, 100px es un buen valor. Ahora empezamos a ver mejor la imagen del fondo.
  2. A continuación, la pestaña Estilo > Texto le permitirá dar estilo al texto colocado en la imagen. En mi ejemplo, lo he puesto en negrita, en blanco, con alineación central y he aumentado el tamaño. Como el fondo es bastante oscuro, el texto blanco destaca perfectamente. Puedes usar otros colores, pero asegúrate de que sigue siendo legible.
  3. En la pestaña Estilo > Caja de sombra, puede añadir una pequeña sombra para dar al módulo un efecto 3D.
  4. En la pestaña Estilo > Borde, puede redondear opcionalmente las esquinas del módulo. Por ejemplo, he aplicado un valor de 5px a las cuatro esquinas.

Ahora tienes un módulo de texto con una imagen de fondo. Este módulo es clicable y será perfecto para una llamada a la acción. Pero sigue faltando un bonito efecto de zoom...

2 - Reproducir el efecto de zoom en una imagen

No dejes el módulo todavía, aún hay dos pequeños ajustes que hacer...

Ajouter l'effet zoom sur le module
Disminuye la intensidad del degradado y aumenta el tamaño del módulo al pasar el ratón por encima para obtener un efecto de zoom.
  1. En la pestaña Contenido > Fondo, haga clic en el icono de la " flecha " para activar el Funcionalidad Hover (pasar el ratón por encima). Asegúrese de que la pestaña "flotante " está seleccionada (el icono de la flecha de nuevo). A continuación, seleccione la pestaña de degradado y reduzca la intensidad de su color negro añadiendo un poco más de transparencia, por ejemplo, el 25%. La idea es que la imagen se vea más clara cuando el ratón pase por encima.
  2. Por último, ve a la pestaña Estilo > Transformar para añadir este famoso efecto de zoom al módulo. Queremos que el zoom tenga lugar cuando el usuario pase el ratón por encima del módulo (hover), por lo que debemos activar la funcionalidad "float " como en el paso anterior. Haga clic en el icono de la flecha, seleccione la primera pestaña (escala de transformación) y aumente el tamaño del módulo al 115%, por ejemplo. Esto hará que el módulo sea más grande cuando el ratón pase por encima y ofrecerá el efecto de zoom deseado. Guarde el módulo.

3 - Duplicar los módulos según sea necesario

Una vez que tu módulo esté perfecto y hayas terminado todas las personalizaciones, puedes duplicar el módulo tantas veces como quieras. De este modo, ahorrará tiempo en el diseño de su maqueta.

dupliquer le module d'appel à l'action
Duplicar el módulo y cambiar los enlaces e imágenes
  1. Haz clic en copiar el módulo y no olvides cambiar la imagen de fondo y la URL de destino.

4 - Efecto zoom con Divi: video tutorial

Este tutorial es muy sencillo pero si quieres verlo en vídeo, está aquí:

5 - En conclusión: ¡un exitoso efecto zoom!

Un efecto de zoom en una imagen con un texto clicable es tan fácil de lograr con Divi! No es necesario utilizar extensiones de terceros para ello.

De hecho, puedo imaginar el sitio de un diseñador gráfico (o cualquier otro oficio) utilizan este sistema para mostrar una cartera y remitir al usuario a cada página del proyecto.

Evidentemente, puedes ir mucho más allá y añadir un pivote a la imagen al pasar por encima, cambiar el tamaño o el color del texto, etc.

Este es precisamente el propósito de usar un tema como Divi puedes personalice su sitio web como usted desee.

También te pueden interesar estos otros artículos sobre imágenes en Divi:

Zoom Image Texte Divi
Effet Zoom Image Divi
Zoom Image Hover

1.046 palabras

4

A ti también te debería gustar:

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

2 Commentaires

  1. Virginie

    Merci pour cet effet hyper sympa et très facile à faire une fois le fonctionnement de Divi Builder.
    Je suis en train de créer mon site et cela me permet d’ajouter un aspect pro très plaisant.

  2. Lycia Diaz

    Merci Virginie 😉

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto