El widget de imagen predeterminado de Elementor muestra una imagen y la vincula a alguna parte. El gratis Widget de imagen avanzada en Complementos maestros para Elementor hace más: cambia a una segunda imagen al pasar el cursor, deja caer una cinta de esquina en la parte superior, se abre en una caja de luz y agrega una inclinación 3D o una sombra coloreada, todo sin tocar CSS.
Configuras la imagen principal, una imagen flotante opcional, una cinta y un puñado de efectos del panel Elementor. Eso lo convierte en una buena opción para tomas de productos, miniaturas de portafolios o cualquier imagen que necesite una etiqueta o un poco de movimiento. Esta guía recorre cada pestaña y configuración.
¿Prefieres verlo primero? Este breve tutorial recorre el widget de Imagen Avanzada de un extremo a otro:
Qué hace el widget de Imagen Avanzada #
En esencia, muestra una imagen, pero coloca extras en la parte superior. Una imagen flotante se intercambia cuando el cursor está sobre ella, una cinta indica una etiqueta como “NUEVO” y la pestaña Configuración agrega una caja de luz, un efecto de inclinación y una sombra coloreada. Todo está configurado desde el panel, por lo que la misma imagen puede hacer mucho más que una simple.
El widget tiene cuatro pestañas: Contenido para las imágenes y la cinta, Configuración para comportamientos como caja de luz e inclinación, Estilo para dimensionamiento y colores, y Avanzado para las opciones habituales de visibilidad y espaciado de Elementor.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- Una imagen para mostrar y una segunda si quieres el intercambio flotante.
Cómo agregar el widget Imagen avanzada #
En el editor Elementor, abra el Elementos panel y búsqueda Imagen avanzada, o desplácese hasta la sección Complementos maestros. Arrastralo a tu página. Comienza con un marcador de posición, por lo que el primer paso es elegir una imagen.
Establece la imagen #
En el Contenido pestaña, la Imagen la sección contiene los conceptos básicos. Haga clic en el cuadro de imagen para elegir uno de la biblioteca multimedia y establezca el Resolución de imagen WordPress debería servir y agregar un Enlace de imagen si la imagen debería vincularse en alguna parte.
Agregue una imagen flotante #
El Imagen flotante la sección es donde el widget obtiene su nombre. Encender Mostrar imagen flotante y elige una segunda imagen. En la página en vivo, el widget muestra la primera imagen y se desvanece hacia la segunda cuando alguien flota, lo cual es útil para los frentes y reversos del producto o para tomas de antes y después.
Agrega una cinta #
El Cinta la sección agrega un banner de esquina sobre la imagen. Encender Cinta de exhibición, establece el texto y elige cómo se ve.
- Texto: la etiqueta, como NUEVO o VENTA.
- Estilo cinta: Simple, Esquina o Cruz.
- Posiția cu cinta: colóquelo en cualquier esquina, como Arriba a la derecha o Abajo a la izquierda.
- Grosor y ancho de la cinta: dimensiona la banda para que se ajuste al texto.
Configuraciones: caja de luz, inclinación y sombra #
El Ajustes tab es donde vive el comportamiento. Estos son los extras que distinguen el widget de una imagen simple.
- Deschide în lumină: haga clic en la imagen para abrirla en tamaño completo en una ventana emergente. Al activarlo se agrega una opción de botón icónico (como un ícono más) sobre la imagen.
- Alineación: izquierda, centro o derecha dentro de su bloque.
- Imagen de precarga: muestra un marcador de posición mientras se carga la imagen, como una vista previa borrosa, una animación de cuadro de progreso o un spinner de carga.
- Efecto de inclinación: agrega una inclinación 3D que sigue al cursor para lograr un poco de movimiento.
- Sombra coloreada: deja caer una sombra teñida de los propios colores de la imagen. Tenga en cuenta que no está disponible mientras la imagen flotante está activa.
Estila la imagen y la cinta #
El Estilo tab maneja el tamaño y los colores. El Imagen la sección establece el aspecto de la imagen en sí.
- Ancho máximo y alto máximo: limite el tamaño de la imagen.
- Radiu de border: alrededor de las esquinas.
- Estados normales y flotantes: establezca Box Shadow, Border y background por separado para descansar y flotar.
El Cinta la sección de estilo controla la apariencia del banner: color de fondo, color de texto, tipografía, sombras, desplazamientos de posición y radio del borde.
El resultado en la página #
Publique o obtenga una vista previa y la imagen se representará con su cinta en su lugar y los efectos en vivo: coloque el cursor para intercambiar imágenes, coloque el cursor para inclinar o haga clic para abrir la caja de luz, según lo que encendió.
Casos de uso comunes #
- Fotografías de productos con un cambio de vuelo estacionario de adelante hacia atrás o ángulo alternativo.
- Miniaturas de cartera que se abre a tamaño completo en la caja de luz.
- Imágenes promocionales con cinta NUEVA o VENTA en la esquina.
- Gráficos destacados con una sutil inclinación para el movimiento.
- Imágenes de héroes usando la sombra coloreada para mayor profundidad.
Consejos para trabajar con el widget de Imagen Avanzada #
- Utilice dimensiones coincidentes para el intercambio flotante. Las imágenes del mismo tamaño evitan que el fundido cruzado salte.
- Elija la resolución de imagen correcta. Al colocar un archivo de tamaño completo en una ranura pequeña, se ralentiza la página; un tamaño mediano o grande suele ser suficiente.
- Mantenga el texto de la cinta breve. Una palabra encaja limpiamente en la banda de la esquina.
- Omita sombras coloreadas cuando utilice el intercambio flotante. Los dos no corren juntos, así que elige uno por imagen.
- Vaya con facilidad al inclinarse. Un pequeño movimiento llama la atención; Demasiado se siente efectista.
Preguntas frecuentes #
¿qué es el widget de imagen avanzada en los complementos maestros?
Es un widget de imagen Elementor con extras integrados: un intercambio de imágenes flotante, una cinta de esquina, una caja de luz, un efecto de inclinación 3D y una sombra coloreada. Lo configuras todo desde el panel Elementor, por lo que una sola imagen puede hacer mucho más de lo que permite el widget de imagen predeterminado.
¿cómo hago el cambio de imagen al pasar el cursor?
Abra la pestaña Contenido, expanda la sección Pasar el cursor sobre imagen y active Mostrar imagen. Luego elija una segunda imagen. En la página en vivo, el widget muestra la primera imagen y se desvanece hacia la segunda cuando un visitante pasa el cursor sobre ella.
¿Puedo agregar una cinta o insignia a la imagen?
Sí. En la pestaña Contenido, abra la sección Cinta y active Cinta de visualización. Establezca el texto, elija un estilo simple, de esquina o cruzado y elija la esquina. La pestaña Estilo le permite configurar su color, tipografía y posición.
¿cuál es el efecto de inclinación?
El efecto de inclinación, que se encuentra en la pestaña Configuración, agrega una inclinación 3D que sigue al cursor a medida que se mueve sobre la imagen. Le da a una imagen plana una sensación de profundidad y movimiento. Úselo con moderación para que se mantenga sutil en lugar de distraer.
¿el widget de Imagen Avanzada admite una caja de luz?
Sí. Active Abrir en la caja de luz en la pestaña Configuración y los visitantes pueden hacer clic en la imagen para verla en tamaño completo en una ventana emergente. También puede agregar un botón icónico, como un ícono más, que aparece sobre la imagen para indicar que se puede hacer clic en él.
Envolviendo #
El widget Imagen avanzada toma una sola imagen y agrega los toques que generalmente toman código personalizado: un intercambio estacionario, una cinta, una caja de luz, una inclinación y una sombra coloreada. Configure las imágenes, active los efectos que desee y diseñe el resultado del panel. Para obtener más herramientas de imagen, consulte Efectos de desplazamiento de imagen y Carrusel de imágenes widgets, navega por completo Widgets y extensiones de complementos maestros, y mira el Página de widgets de imágenes avanzadas para demostraciones.
