Widget gratuito de Elementor Flip Box con animaciones Hover Flip
Flipbox es un widget gratuito de cuadro invertido de complementos maestros para Elementor. 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 complemento gratuito incluye 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. Free Elementor no tiene widget de flip box, por lo que funciona sin Elementor Pro.
Variaciones de diseño y animaciones Flip
Variación de diseño establece el diseño frontal: el icono frontal y predeterminado son gratuitos, la imagen frontal y la diagonal necesitan Pro. Estilo de animación establece cómo gira la tarjeta. Gratis: 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 gratis 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.
- A 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 de 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 la gratis 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.
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 | Gratis, con 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 gratis, 22 con Pro, incluidas Cube, Rollover y 3D Flip |
| 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 gratuita 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 se adapta a sitios gratuitos de Elementor y ofrece más opciones de animación con Pro. Para una tarjeta estática sin nada oculto, utilice la gratuita Cuadro informativo widget.
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.
Cómo agregar una caja invertida en Elementor
Necesita Elementor y el complemento gratuito 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.
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. En la versión gratuita, use un ícono en el frente o establezca una imagen de fondo para la cara en la pestaña Estilo.
¿el widget Flipbox es gratuito?
Sí. Flipbox está en el complemento gratuito 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.
¿elementor tiene un widget de flip box?
Sólo Elementor Pro tiene uno. Elementor gratuito no lo tiene, por lo que en Elementor gratuito necesitas 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 la opción gratuita 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 son gratuitos. Los otros 16, incluidos Cube, Rollover y 3D Flip, necesitan Master Addons Pro.
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
