Widget Elementor Flip Box con animaciones de tarjetas Hover Flip
Flipbox es un widget de flip box de complementos maestros para Elementor, sin necesidad de Elementor Pro. La cara frontal muestra un ícono o imagen con un título y texto corto, y al pasar el cursor, la tarjeta gira hacia atrás con más detalles y un botón de acción. El widget viene con los diseños de icono frontal y predeterminado y 6 animaciones: Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade y Fade Up. Complementos maestros Pro agrega los diseños de imagen frontal y diagonal y 16 animaciones más, incluidas Cube, Rollover y 3D Flip, para 22 en total. Elementor en sí solo tiene una caja abatible en Elementor Pro.
Variaciones de diseño y animaciones Flip
Variación de diseño establece el diseño frontal: el icono frontal y predeterminado viene con el widget, la imagen frontal y la diagonal necesitan Pro. Estilo de animación establece cómo gira la tarjeta. Incluido: Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade y Fade Up. Pro agrega cuatro direcciones de cubo, Fade Hideback, Fade Up Hideback, cuatro direcciones de diapositivas, dos diapositivas diagonales, Fade In Out, Nananana, Rollover y 3D Flip, que tiene su propia configuración de dirección.
- 22 animaciones en total: 6 incluidas y 16 con Pro.
- El flip se ejecuta al pasar el cursor sobre el escritorio y al tocar en las pantallas táctiles.
- Utilice una animación por sección para que una fila de cartas se sienta consistente.
Creador de contenido de doble cara
El Caja frontal y Caja trasera cada uno tiene su propio ícono con vista predeterminada, apilada o enmarcada y forma circular o cuadrada, un título, una descripción, alineación y una etiqueta de encabezado. Mantenga el frente corto, como el nombre de un servicio, y use el reverso para la explicación. En la pestaña Estilo, cada cara tiene su propio fondo, título y descripción, colores, tipografía, colores de ícono y borde.
- Contenido y estilo separados para cada cara.
- Etiqueta HTML de título en ambas caras, por lo que una cuadrícula de cartas mantiene un orden de encabezado limpio.
- un Altura de la caja abatible la configuración en General mantiene ambas caras del mismo tamaño.
Botón CTA con Hover
El Botón de acción se muestra en la cara posterior con el texto y el enlace del botón. Estílelo para Normal y Flote con color de texto, fondo, borde, radio del borde y relleno, además de tipografía. El botón es el único enlace dentro del widget. Para que se pueda hacer clic en toda la tarjeta, agregue Enlace envolvente extensión al widget.
- Utilice una etiqueta específica como “Ver precios” cuando ahí es donde va el enlace.
- Omita el botón en tarjetas puramente informativas.
- Si utiliza Wrapper Link, apunte el botón a la misma página.
Flipbox de un vistazo
La tabla enumera lo que hace el widget hoy, leído desde la fuente del complemento en la versión 3.2.6.
| Artículo | Caja abatible |
|---|---|
| Variaciones de diseño | 4: Icono predeterminado y frontal incluido; Imagen frontal y diagonal con Pro |
| Animaciones | 22: 6 incluidos (Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade, Fade Up) y 16 con Pro (cuatro direcciones Cube, dos desvanecimientos Hideback, cuatro diapositivas, dos diapositivas Diagonal, Fade In Out, Nananana, Rollover, Voltear 3D) |
| Contenido frontal y posterior | Icono o imagen (imagen con diseño Pro Front Image), título con etiqueta HTML propia, descripción y alineación en cada cara |
| Estilo icono | Predeterminado, Apilado o Enmarcado, con forma de Círculo o Cuadrado |
| Gatillo | Pase el cursor sobre el escritorio, primero toque las pantallas táctiles. Sin clic en el disparador |
| Enlace de caja completa | No. El botón Atrás lleva el enlace; la extensión Wrapper Link hace que se pueda hacer clic en toda la tarjeta |
| Control de altura | Sí, altura de la caja abatible con estilo, general |
| Modo carrusel | prohibido |
| Dirección de giro 3D | 4 direcciones en la animación Pro 3D Flip |
| Necesidades | Complementos Elementor y Master. Pro para los dos diseños adicionales y las 16 animaciones adicionales |
Elementor Pro Flip Box frente a Master Addons Flipbox
Elementor Pro tiene su propio widget Flip Box. Si ya pagas por él, es posible que no necesites otro. Así es como se comparan los dos.
| Característica | Caja abatible Elementor Pro | Flipbox de complementos maestros |
|---|---|---|
| Precio | Necesita Elementor Pro | Complementos maestros; más diseños y animaciones en Pro |
| Efectos de giro | Voltear, deslizar, empujar, acercar, alejar y desvanecer, con dirección y profundidad 3D | 6 animaciones incluidas, 22 con Pro, incluidas Cube, Rollover y 3D Flip |
| Gatillo | Flotar | Flotar; primer toque en las pantallas táctiles |
| Gráfico frontal | Ninguno, Imagen o Icono | Icono o una imagen con el diseño Pro Front Image |
| Enlace de tarjeta completa | Aplicar enlace activado: solo caja completa o botón | Solo botón o toda la tarjeta con la extensión Wrapper Link |
| Botón | Sí | Sí, con estilo Normal y Hover |
Elementor Pro es más sencillo si desea incorporar un enlace de caja completa. Master Addons funciona en Elementor sin Pro y ofrece más opciones de animación con su propio Pro. Para una tarjeta estática sin nada oculto, utilice Cuadro informativo Widget.
¿tarjeta plegable CSS o un widget de caja plegable?
Una tarjeta invertida es lo mismo que una caja invertida: una cara frontal que gira hacia una cara posterior. Puede escribir uno a mano con aproximadamente 40 líneas de CSS usando perspectiva, estilo de transformación: preservar-3d y visibilidad de la cara posterior: oculto, y colocarlo en un widget HTML. Esa ruta está bien para una tarjeta en una página que controle.
La versión CSS tiene tres problemas recurrentes. Las pantallas táctiles no flotan, por lo que la tarjeta nunca se voltea a menos que agregues un controlador de toque. Ambas caras necesitan una altura fija o la tarjeta salta a medida que gira. Y cada cambio de color, texto o ícono significa editar código nuevamente, a menudo dentro de un campo CSS personalizado que necesita Elementor Pro. El widget Flipbox maneja el toque, la altura y el estilo del panel del editor, y le brinda un botón de retroceso, 22 animaciones y una variación de diseño por tarjeta sin tocar el código.
Ideas y consejos para Flip Box
Una caja abatible mantiene limpia la cuadrícula y al mismo tiempo lleva detalles, porque la descripción se encuentra detrás de la tarjeta en lugar de debajo de ella. Funciona bien para cuadrículas de servicio, tarjetas de equipo con una foto en el frente y una biografía en la parte posterior, mosaicos de características y tarjetas de estadísticas que cambian a lo que significa un número.
- Establezca la altura de la caja abatible. Sin él, una cara posterior más larga cambia el tamaño de la carta a medida que gira y la fila salta.
- Haz que las caras luzcan diferentes. Un tinte en el frente y el color de tu marca en la parte posterior hacen que el giro sea obvio.
- Plan para teléfonos. Las pantallas táctiles no tienen desplazamiento, por lo que la tarjeta se gira al tocar y el botón necesita un segundo toque. Pruebe en un teléfono real.
- Mantenga los detalles esenciales en el frente. Los precios, números de teléfono y enlaces de reserva no deben estar disponibles únicamente en la parte posterior.
- Limite el movimiento. Una o dos filas de flip box por página se leen mejor que seis animaciones diferentes.
Ejemplos de flip box
Cada demostración a continuación es una página en vivo creada con el widget. La animación y la variación del diseño se nombran para que puedas reconstruir cualquiera de ellas desde el panel.
Voltear vertical
- Tarjetas de análisis SAAS: Diseño predeterminado, tres tarjetas de estadísticas oscuras que recurren a una descripción del plan.
- Cuadrícula de tarjetas de equipo: Diseño predeterminado, seis mosaicos de productos en una cuadrícula de dos filas.
- Rejilla de estadísticas y especies: Diseño predeterminado, un número en el frente y el significado en la parte posterior.
- Tarjetas de productos de arco: Diseño predeterminado con forma de arco de medio punto en la cara frontal.
Voltear horizontal
- Azulejos de servicio solo con iconos: Diseño de ícono frontal, cuatro íconos enmarcados que se convierten en una breve propaganda de servicio.
- Azulejos de servicio Bento: Tarjetas mixtas de icono frontal y predeterminado en un diseño bento.
- Tarjetas de disciplina escalonadas: Diseño predeterminado, tres tarjetas desplazadas entre sí.
- Azulejos de iconos mínimos: Diseño de icono frontal, tres mosaicos oscuros con un icono cada uno.
Desvanecerse
- Tarjetas de viaje con imagen frontal: Diseño de imagen frontal (Pro), una foto en el frente y los detalles del viaje en la parte posterior.
- Filas de capítulos numeradas: Diseño predeterminado, filas anchas que se desvanecen en un resumen de capítulo.
- Filas de libro de ejecución de línea de tiempo: Diseño predeterminado, tarjetas de paso que se desvanecen en las instrucciones.
Caja abatible y cubo
- Escaparate de marca circular: Animación Flip Box en tarjetas redondas.
- Azulejos diagonales: Diseño diagonal (Pro) con animación Cube Left Right (Pro).
- Efectos de transformación avanzados: Tarjetas Flipbox combinadas con la extensión Transforms.
Voltear y deslizar 3D
- Tarjetas de productos de café: Animación 3D Flip (Pro), Deslízate de derecha a izquierda.
- Muestra de medios interactivos: 3D Flip (Pro) con una dirección diferente en cada tarjeta.
- Tarjetas multiicono: Diapositivas de izquierda a derecha, de derecha a izquierda y de arriba a abajo (Pro) en una fila.
Vuelco, diagonal y desvanecimiento
- Tarjetas de clase de gimnasia oscura: Animación rollover (Pro) sobre un tema oscuro.
- Azulejos con iconos en colores pastel: Diseño de icono frontal con animación diagonal de abajo hacia arriba (Pro).
- Tarjetas traseras degradadas: Animación Fade In Out (Pro) a una cara posterior degradada.
Cómo agregar una caja invertida en Elementor
Necesita Elementor y el complemento Master Addons de WordPress.org.
- Compruebe que Flipbox esté activado en Complementos maestros, widgets.
- En el editor Elementor, busque Caja abatible y arrástrelo a un contenedor.
- Elija una variación de diseño y un estilo de animación, luego coloque la tarjeta en posición horizontal para obtener una vista previa.
- Complete el cuadro frontal y el cuadro posterior: icono, título, descripción y etiqueta de encabezado.
- Agregue el texto y el enlace del botón de acción.
- En Estilo, General, conjunto Altura de la caja abatible entonces, la tarjeta no cambia el tamaño a mitad del giro y luego diseña cada cara.
Para efectos 3D, lea Cómo crear animaciones de Flipbox de Elementor 3D. Cada configuración está en el Configuración del widget Flipbox.
Flipbox se empareja con algunos otros widgets de complementos maestros: Cuadro informativo para una carta que nunca se voltea, Botón creativo para un llamado a la acción diseñado bajo una cuadrícula, Efectos de desplazamiento de imagen para una foto que revela un título en lugar de una cara posterior, Miembro del equipo para tarjetas de personas con vínculos sociales, y Alternar contenido cuando la revelación tiene que ocurrir al hacer clic en lugar de flotar.
Preguntas frecuentes para Flipbox
¿cómo funciona la caja plegable en los teléfonos?
Las pantallas táctiles no tienen desplazamiento, por lo que la tarjeta se voltea cuando se toca. El botón de la cara posterior necesita su propio toque después del giro. Mantenga información imprescindible en el frente y pruébela en un dispositivo real.
¿Puedo usar una imagen en lugar de un ícono en el frente?
Sí, con la variación de diseño de la imagen frontal, que es una opción Master Addons Pro. De lo contrario, use un ícono en el frente o establezca una imagen de fondo para la cara en la pestaña Estilo.
¿necesito Master Addons Pro para el widget Flipbox?
No. Flipbox viene con el complemento Master Addons con los diseños Predeterminado y Front Icon y 6 animaciones. Master Addons Pro agrega 2 diseños más y 16 animaciones más.
¿la caja abatible gira al hacer clic?
No. El widget se voltea al pasar el cursor y en las pantallas táctiles el primer toque gira la tarjeta. No hay disparador de clic en el escritorio. Para un panel que se abre al hacer clic, utilice el Alternar contenido widget o un Creador de ventanas emergentes ventana emergente.
¿es lo mismo una tarjeta invertida que una caja invertida?
Sí. Flip card es el nombre del tutorial CSS para el mismo efecto: una cara frontal que gira hacia una cara posterior. El widget Flipbox crea una tarjeta abatible desde el panel del editor, con la altura, el toque en las pantallas táctiles y el botón de la cara posterior manejados por usted.
¿elementor tiene un widget de flip box?
Sólo Elementor Pro tiene uno. Elementor sin Pro no lo tiene, por lo que necesita un complemento como este widget de Flipbox.
¿puedo vincular todo el flipbox a una página sin el botón separado?
El widget vincula únicamente el botón. Para que se pueda hacer clic en toda la tarjeta, active Enlace envolvente extienda y agregue el enlace al widget Flipbox.
¿cuántas animaciones invertidas hay?
22 en total. Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade y Fade Up vienen con el widget. Los otros 16, incluidos Cube, Rollover y 3D Flip, necesitan Master Addons Pro.
¿puedo poner cajas plegables en un carrusel?
No con una configuración incorporada. El widget no tiene modo carrusel. Guarde un cuadro invertido como plantilla y muéstrelo en el Carrusel de imágenes o una cuadrícula de bucles, o colocar las cartas en un contenedor de embalaje.
¿cuál es la diferencia con Elementor Pro Flip Box?
Elementor Pro tiene seis efectos con dirección y profundidad 3D, una opción de enlace de caja completa y necesita un plan Elementor Pro. Flipbox funciona en Elementor sin Pro, tiene 6 animaciones incluidas y 22 con Master Addons Pro, dos diseños de iconos o imágenes, y vincula toda la tarjeta a través de la extensión Wrapper Link.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
