Efecto de zoom en la imagen con texto clicable

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 podría mejorar su página de inicio o sus llamadas a la acción...

Mira lo que consigues con este tutorial:

Aviso: 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 texto superpuesto, simplemente "tomamos 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 de esta manera: se visualiza el objetivo final y se buscan las herramientas a disposición para conseguirlo.

1. Inserte una línea dentro de su Diseño de Divi. Por ejemplo, elija 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 escrito "su texto aquí", pero es usted quien debe escribir lo que quiera.
4. En la pestaña Contenido > Enlace, introduzca la dirección web a la que debe enlazar el módulo.

Ahora puedes añadir una imagen de fondo:

5. En la pestaña Contenido > Fondo, seleccione el icono de la imagen y añada una imagen de fondo.
6. Por el momento, su módulo no es exactamente lo que se espera de un efecto de zoom en una imagen, pero espere, ya llegará...
7. Todavía en la pestaña Contenido > Fondo, seleccione ahora el icono del gradiente. Haga clic en "+ Gradiente de fondo".

8. Un degradado se compone de 2 colores, por lo que 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...
9. 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. Entonces puedes imaginar que este módulo de texto está compuesto por 3 niveles de superposición, un poco como las capas en Photoshop.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga 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:

10. Vaya a la pestaña Estilo > Espaciado y añada algún margen interno en la parte superior e inferior. Por ejemplo, 100px es un buen valor. Ahora empiezas a ver mejor la imagen del fondo.
11. 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. Puede utilizar otros colores, pero asegúrese de que sigue siendo legible.
12. En la pestaña Estilo > Caja de sombra, puede añadir una pequeña sombra para dar al módulo un efecto 3D.
13. En la pestaña Estilo > Borde puedes redondear un poco 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 el efecto de zoom genial...

2 - Reproducir el efecto de zoom en una imagen

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

14. 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 al pasar el ratón por encima.
15. 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 crezca cuando el ratón pase por encima y proporcione 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. Esto le ahorrará tiempo a la hora de diseñar su esquema.

16. 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.

Además, puedo imaginarme el sitio web 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.

Por supuesto, puede 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:

• Problema de recorte con las imágenes de Divi
• Cómo añadir imágenes de 360° en Divi
• Obtener imágenes cuadradas en el módulo de blog y galería
• Cómo crear una transición con un zoom de desplazamiento
• Permitir gradientes en un fondo de paralaje
• Diseñar superposiciones de imágenes personalizadas con Divi