Imagen de texto sobre Elementor: más de 25 efectos de desplazamiento (tutorial gratuito sobre widgets)

Agregar texto sobre una imagen en Elementor suena como un trabajo de dos minutos. Luego lo pruebas con los widgets predeterminados y terminas luchando con márgenes negativos, posicionamiento absoluto y un widget de encabezado apilado en una imagen de fondo que se rompe en el móvil. Hay una manera más rápida. El gratis Widget de efectos de desplazamiento de imagen de complementos maestros coloca un encabezado y una descripción encima de cualquier imagen y los revela con una de las más de 25 animaciones flotantes. Nunca tocas CSS.

En este tutorial, configurará una sección de texto sobre imagen de Elementor desde cero: cargue la imagen, elija un efecto flotante de un menú desplegable, diseñe la superposición y decida qué sucede cuando alguien hace clic. Cada captura de pantalla a continuación proviene directamente del editor Elementor, para que pueda seguir clic por clic.

Lo que cubre esta guía:

• Por qué el texto sobre la imagen necesita un widget
• El widget Image Hover Effects de un vistazo
• Cómo agregar texto sobre una imagen (paso a paso)
• Estilismo de la superposición: color, opacidad, forma
• Tipografía del título y descripción
• Haga clic en acciones: abra una ventana emergente o vincule la imagen
• Consejos de diseño que mantengan el texto legible
• Otros widgets de complementos maestros para efectos de imagen
• Gratis vs Pro: lo que realmente necesitas
• Preguntas frecuentes

Por qué el texto sobre la imagen necesita un widget (no un truco CSS)

La propia documentación de Elementor lo sugiere dos soluciones para texto sobre imagen: establezca la imagen como fondo de sección y coloque un widget de encabezado en el interior, o empuje un encabezado hacia arriba con márgenes negativos. Ambos funcionan para un título estático. Ninguno de los dos le brinda una revelación flotante, una superposición animada o una acción de clic, y el truco del margen negativo tiende a desmoronarse en los puntos de interrupción de tabletas y dispositivos móviles.

Un widget dedicado resuelve todo eso en un solo lugar:

• Revelación flotante incorporada. La imagen permanece limpia hasta que el visitante flota, luego el título y la descripción se animan.
• Un panel de configuración. La imagen, el texto, el color de la superposición y la tipografía se encuentran en un solo widget en lugar de tres apilados.
• Responsivo de forma predeterminada. La superposición escala con la imagen, por lo que nada se sale de su lugar en pantallas más pequeñas.
• Haga clic en acciones. Toda la imagen puede abrir un enlace o una ventana emergente. De esto dependen las cuadrículas de cartera y las tarjetas de servicio.

Es por eso que los diseños de texto sobre imagen aparecen en todas partes: mosaicos de cartera que revelan el nombre del proyecto, tarjetas de equipo que muestran una biografía en el hover, banners de categorías de blogs y cuadrículas de galería donde, de otro modo, los subtítulos saturarían el diseño.

El widget de efectos de desplazamiento de imágenes de un vistazo

Efectos de desplazamiento de imagen se envía en la versión gratuita de Master Addons, a biblioteca de más de 80 widgets y extensiones ejecutándose en más de 30.000 sitios activos de WordPress. Esto es lo que obtienes en este widget:

• Más de 25 efectos flotantes con nombre (Sadie, Chico, Marley, Ruby y amigos), cada uno con una animación de revelación diferente
• Un campo de encabezado con una etiqueta HTML seleccionable (H1 a H6), para que el texto superpuesto pueda seguir siendo SEO correcto
• Un campo de descripción para una línea de soporte corta
• Superponga el color de fondo, la opacidad de la imagen y los controles de opacidad flotante
• Radio de borde, relleno, sombra de cuadro y tipografía separada para título y descripción
• Tres comportamientos de clic: nada, abrir una ventana emergente o seguir un enlace

Todo funciona sin licencia Pro. Si desea la referencia de configuración completa, el Documentación de efectos de desplazamiento de imagen cubre todos los controles.

Cómo agregar texto sobre una imagen en Elementor (paso a paso)

Paso 1: instale complementos maestros

En su panel de WordPress, vaya a Complementos > Agregar nuevo y busque “Complementos maestros”. Instale y active el complemento gratuito de WordPress.org. Si algo te hace tropezar, el guía de instalación lo atraviesa. También necesitas Elementor activo, pero la versión gratuita es suficiente.

Paso 2: arrastre el widget Image Hover Effects a su página

Abra cualquier página con Elementor y busque “Efectos de desplazamiento de imagen” en el panel de widgets. Lo verá entre otros widgets con la insignia MA, como Imagen avanzada, Punto de acceso a imágenes y Comparación de imágenes. Arrastralo a tu sección.

Paso 3: sube tu imagen

La pestaña Contenido se abre con Efectos e imagen sección. Hacer clic Subir imagen y elige algo de tu biblioteca multimedia. Dos configuraciones se encuentran justo debajo:

• Tamaño de imagen controla las dimensiones renderizadas. El valor predeterminado funciona para la mayoría de los diseños.
• Resolución de imagen elige qué tamaño generado por WordPress se carga. “Completo” da el resultado más nítido. En una página con ocho o diez de estos mosaicos, baje a “Grande”; nadie ve la diferencia en el tamaño de la cuadrícula y la página se carga notablemente más rápido.

Paso 4: elige un efecto flotante

Aquí está la parte divertida. Abre el Efecto flotante desplegable y obtendrás la lista completa de efectos con nombre: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey, Oscar, Marley, Ruby, Milo, Dexter, Sarah, Zoe, Chico, Julia, Goliath, Hera, Winston, Selena, Terry, Phoebe, Apollo, Kira, Steve, Moses, Jazz, Ming, Lexi y Duke.

Cada nombre es una combinación diferente de animación superpuesta y revelación de texto. Sadie desliza un degradado hacia arriba desde abajo. Marley deja caer el título con un subrayado. Chico aleja ligeramente la imagen y enmarca el texto con un borde delgado. Las actualizaciones de vista previa del editor están activas, así que haga clic en algunas y pase el cursor sobre la imagen para probarla. Aquí está Chico en mitad del vuelo estacionario:

Una agrupación rápida para ahorrarte al hacer clic en todos ellos:

• Se desvanece sutilmente: Lily, Sadie, Layla, Zoe. Buenas opciones predeterminadas para carteras.
• Diapositivas direccionales: Cariño, Óscar, Romeo, Sara. El texto avanza desde un borde.
• Zoom și scale: Chico, Bubba, Milo, Julia. La imagen se mueve, lo que llama la atención.
• Jocoso y atrevido: Marley, Ruby, Dexter, Goliat, Apolo. Movimiento más fuerte, mejor para sitios creativos.

Paso 5: agregue su título

Abre el Encabezado sección. Escribe tu título y elige un Etiqueta HTML. Esto importa más de lo que parece: si la imagen se encuentra en una cuadrícula de servicios, H3 generalmente se adapta mejor a la jerarquía de su página que el H2 predeterminado. Los motores de búsqueda leen esta etiqueta como cualquier otro encabezado de la página.

Paso 6: escribe la descripción

El Descripción la sección agrega la línea más pequeña que aparece debajo del título al pasar el cursor. Manténgalo en una o dos oraciones cortas. Los párrafos largos se cortan en imágenes más pequeñas y anulan el punto de una superposición limpia.

Estilismo de la superposición: color, opacidad y forma

Cambiar al Estilo pestaña. El Imagen el panel controla cómo se ve la superposición:

• Color de fondo tiñe la superposición que aparece al flotar. Elija un color de su paleta de marcas; un valor HEXA como #DD5555 con alfa reducido mantiene la foto visible debajo.
• Opacidad de la imagen establece el estado de reposo, y Opacidad flotante establece cuánto se atenúa la imagen cuando aparece la superposición. Un espacio entre los dos (digamos 0,5 en reposo, 0,7 en vuelo estacionario) hace que la revelación parezca deliberada.
• Filtro de imagen y Filtro de imagen flotante agregue filtros CSS como escala de grises o desenfoque para los estados de ánimo antes/después.

Debajo de eso, Radio fronterizo remodela todo el bloque. Los valores coincidentes le brindan esquinas suaves y redondeadas; Los valores asimétricos (100 arriba a la izquierda, 0 arriba a la derecha, 100 abajo a la derecha, 0 abajo a la izquierda) crean la forma de hoja que se ve en muchos sitios de agencias modernos.

Tipografía del Título y Descripción

Todavía en la pestaña Estilo, el Título y Descripción cada panel obtiene sus propios controles de color, tipografía y espaciado. La familia de fuentes, el tamaño, el peso, la transformación, la altura de la línea y el espaciado de las letras están aquí, además de una opción de sombra de texto para la descripción. Si su imagen es clara, cambie el color del título a un valor oscuro para que el texto siga siendo legible en ambos estados.

Una regla de legibilidad que vale la pena mantener: apunte a un contraste claro entre el texto y lo que se encuentre detrás de él. Si la foto está ocupada, apóyate en el color de la superposición y la opacidad del paso anterior en lugar de luchar contra ella solo con el peso de la fuente.

Haga clic en Acciones: abra una ventana emergente o vincule la imagen completa

De vuelta en la pestaña Contenido, el ¿enlaces o ventana emergente? el control decide lo que hace un clic. Tres opciones se encuentran detrás del pequeño icono: ninguna, ventana emergente y enlace externo.

Ventana emergente abre una ventana superpuesta con cualquier contenido que elijas. Elija un tipo de contenido y escriba contenido directamente en el editor WYSIWYG o cargue una plantilla de Elementor guardada. Las cuadrículas de cartera usan esto constantemente: cada mosaico abre un estudio de caso sin salir de la página.

Enlace convierte toda la imagen en una tarjeta en la que se puede hacer clic. Pegue la URL en el campo URL del enlace y toda el área de desplazamiento apunta allí, lo que supera un pequeño enlace de texto para tocar objetivos en el móvil.

Si desea más patrones emergentes más allá de este widget (intención de salida, activadores de desplazamiento, ventanas emergentes cronometradas), consulte cómo hacerlo agregue una ventana emergente en Elementor de forma gratuita.

El resultado final

Presiona vista previa y pasa el cursor sobre tu imagen. La superposición se desvanece, el título y la descripción se revelan con el efecto que elegiste y el cursor señala la acción de clic:

El tiempo total de construcción es de unos cinco minutos. Y dado que cada opción está activa en la configuración del widget, puede intercambiar el efecto o volver a colorear la superposición el próximo mes sin reconstruir nada.

Consejos de diseño que mantienen legible el texto sobre la imagen

• Un efecto por cuadrícula. Si crea una cartera de 6 mosaicos, dé a cada mosaico el mismo efecto de desplazamiento. Los efectos mixtos se leen como accidentales.
• Contraste primero. El texto blanco necesita una superposición oscura; El texto oscuro necesita una imagen clara o un tinte superpuesto claro.
• Descripciones breves. Diez palabras o menos. La superposición es un adelanto, no un párrafo.
• Prueba al tacto. En los teléfonos, el primer toque revela la superposición y el segundo toque activa la acción de clic, así que asegúrese de que el estado revelado se vea completo en una pantalla pequeña.
• Coincide con el radio de tu frontera al resto de la página. Una forma de hoja de 100px junto a tarjetas con esquinas afiladas parece apagada.

Para obtener orientación más amplia sobre diseño de movimiento, nuestra guía para Efectos de animación elemental las cubiertas cuando flotan, se desplazan y las animaciones de entrada ganan su lugar, y el Funciones de animación de complementos maestros la página muestra qué más puede animar el complemento.

Otros widgets de complementos maestros para efectos de imagen

Image Hover Effects es la herramienta adecuada para revelar texto, pero algunos widgets hermanos cubren los casos de uso vecinos:

• Imagen avanzada agrega inclinación 3D, cintas e insignias a una sola imagen sin texto superpuesto.
• El Widget Flipbox voltea una tarjeta a una parte posterior completamente diseñada, mejor cuando necesitas botones o íconos en el estado revelado.
• Punto de acceso de imagen coloca marcadores interactivos de información sobre herramientas en puntos específicos de una imagen, ideales para llamadas de productos.
• El Carrusel de imágenes maneja controles deslizantes de múltiples imágenes cuando un mosaico flotante no es suficiente.
• Comparación de imágenes pone un control deslizante de antes/después arrastrable en dos versiones de un disparo.

Gratis vs Pro: ¿Qué necesitas realmente?

Para texto sobre imagen, nada más que el complemento gratuito. Todos los más de 25 efectos flotantes, los campos de encabezado y descripción, el estilo de superposición, las ventanas emergentes y los enlaces se envían gratis. Complementos maestros Pro agrega el conjunto de widgets premium más amplio, kits de plantillas y extras como Widget Builder, por lo que vale la pena echarle un vistazo una vez que esté construyendo sitios completos en lugar de una sección. Hay una garantía de devolución de dinero de 14 días si lo prueba y cambia de opinión.

¿prefieres mirar? Aquí hay un tutorial rápido en Elementor:

Preguntas frecuentes

Envolviendo

Una sección de texto sobre imagen de Elementor toma cinco minutos con el widget correcto: ingrese Efectos de desplazamiento de imagen, cargue su foto, elija un efecto por nombre y diseñe la superposición para que coincida con su marca. El posicionamiento y el comportamiento receptivo ya se manejan para usted, y la versión gratuita cubre todo lo que contiene esta guía.

Obtenga el complemento gratuito, explore el resto biblioteca de widgets y extensiones, y si te quedas atascado el documentación del widget tiene todas las configuraciones trazadas.

Lectura relacionada: Efectos de animación elemental, el widget Elementor Flipbox, y agregar ventanas emergentes en Elementor gratis.