Efecto de zoom en la imagen con el texto que se puede hacer clic

Publicado el 12/10/2020 | 2 comentarios

Divi facilita la reproducción de un efecto de zoom al pasar por encima de una imagen con superposición de texto clicable. Te propongo que descubras cómo conseguir este efecto de moda que puede embellecer tu página web o tus llamadas a la acción...

Mira lo que vas a conseguir con este tutorial:

Image Zoom Divi

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

1 - Crear una imagen con una superposición de texto sobre la que se pueda hacer clic

Para obtener una imagen con texto superpuesto, simplemente "poner el problema al revés": usaremos un Módulo de texto y añadir un imagen de fondo....

En la web, a menudo tienes que pensar de esta manera: visualizas el propósito y buscas las herramientas a tu disposición para lograrlo.

Insérer une ligne 3/3
Inserte una línea de 3/3 con un módulo de texto.
  1. Inserte una línea dentro de su Diseño de la división.... Por ejemplo, elija una línea 3/3.
  2. Inserte un módulo de texto.
  3. En la pestaña Contenido > Texto, introduce tu texto de llamada a la acción. Para mi ejemplo, escribí "tu texto aquí" pero depende de ti escribir lo que quieras.
  4. En la pestaña Contenido > Enlace, introduzca la dirección web a la que el módulo debe enlazar .
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, tu módulo no es exactamente lo que esperarías de un efecto de zoom en una imagen, pero espera, llegará...
  3. Todavía en la pestaña Contenido > Fondo, ahora selecciona el icono de gradiente. Haga clic en " + Gradiente de fondo ".
Ajouter une image de fond et un dégradé sur l'image
Añadiendo una imagen de fondo y un gradiente encima de ella
  1. Como un gradiente está compuesto por 2 colores, puedes 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 de título", actívalo. Esto le permite arrastrar el gradiente de negro opaco entre la imagen de fondo y el texto del módulo. Podemos entonces imaginar que este módulo de texto está compuesto de 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 haga clic en "TRY IT FOR FREE".

Una vez hecho esto, vamos a estilizar el módulo para que empiece a parecerse a una imagen real clicable con un efecto de zoom:

styliser le module Texte + image
Mejorar la apariencia del módulo de Texto + Imagen
  1. Ve a la pestaña Estilo > Espaciado y añade un margen interno en la parte superior e inferior. Por ejemplo, 100px es un valor adecuado. Ahora empiezas a ver mejor la imagen en el fondo.
  2. A continuación, la pestaña Estilo > Texto le permitirá dar estilo al texto colocado en la imagen. En mi ejemplo, lo puse en negrita, en blanco, con alineación centrada y aumenté el tamaño. Como el fondo es bastante oscuro, el texto blanco sobresale perfectamente. Puedes usar otros colores, pero asegúrate de que siga siendo legible.
  3. En la pestaña Estilo > Cuadro de sombras, puedes añadir una pequeña sombra para dar un efecto 3D al módulo.
  4. En la pestaña Estilo > Borde, puedes opcionalmente redondear un poco las esquinas del módulo. Por ejemplo, apliqué un valor de 5px a las cuatro esquinas.

Eso es, ahora está en posesión de un módulo de texto con una imagen de fondo. Este módulo se puede pulsar y será perfecto para una llamada a la acción. Pero todavía le falta el pequeño efecto de zoom...

2 - Reproducir el efecto de zoom en una imagen

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

Ajouter l'effet zoom sur le module
Disminuya la intensidad del gradiente y aumente 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 la Funcionalidad del flotador (ratón revoloteando). Asegúrate de que la pestaña "flotante" esté seleccionada (sigue siendo el icono de la flecha). Luego seleccione la pestaña de gradiente y reduzca la fuerza de su color negro agregando un poco más de transparencia, por ejemplo 25%. La idea es que la imagen se verá más clara cuando el ratón se mueva sobre ella.
  2. Finalmente, ve a la pestaña Estilo > Transformar para añadir este famoso efecto de zoom en el módulo. Queremos que el zoom tenga lugar cuando el usuario pase el ratón por encima del módulo, por lo que necesitamos activar la función de "flotar" como en el paso anterior. Luego 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 permitirá que el módulo se amplíe cuando el ratón pase por encima de él y ofrecerá el efecto de zoom esperado. Guarda el módulo.

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

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

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

4 - Efecto de zoom con Divi : video tutorial

Este tutorial es muy simple pero si quieres verlo en video, está aquí:

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

Ampliar una imagen con texto clicable es tan fácil con Divi! ¡No hay necesidad de usar extensiones de terceros para eso!

De hecho, puedo imaginarme el el sitio web del diseñador gráfico (o cualquier otra obra de arte) utilizan este sistema para mostrar un portafolio y remitir al usuario a cada página del proyecto.

Por supuesto, puedes ir mucho más allá y añadir un pivote de imagen al aire, cambiar el tamaño o el color del texto, etc!

Eso es sólo el propósito de usar un tema como Divi puedes personalizar su sitio ...como quieras.

Puede que también te interesen estos otros artículos que tratan de las imágenes en Divi:

Zoom Image Texte Divi
Effet Zoom Image Divi
Zoom Image Hover

1.046 palabras

4

A ti también debería gustarte:

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 sus imágenes sean más gráficas y dan originalidad a su diseño. ¿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.

Ponerlo en el interés

Acciones
Comparte esto