Una tarjeta que se voltea al pasar el cursor muestra el doble de contenido en el mismo espacio. El gratis Widget Flipbox en Complementos maestros para Elementor le ofrece un cuadro de dos caras: una cara frontal con un ícono, título y descripción, y una cara posterior que aparece a la vista con su propio texto y un botón.
Eliges una animación, completas ambas caras, agregas un botón y luego peinas cada lado. Hay 22 efectos de giro: 6 en el complemento gratuito y 16 más con Master Addons Pro, desde un Fade simple hasta un cubo 3D. Esta guía recorre todas las configuraciones del widget.
Qué hace el widget Flipbox #
El widget crea una tarjeta invertida a partir de dos caras. El Caja frontal es lo que los visitantes ven primero: un icono o imagen, un título y una descripción. Pase el cursor sobre él y la tarjeta se volteará hacia el Caja trasera, que tiene su propio título, descripción y un botón que puede vincular a cualquier lugar.
Tres pestañas ejecutan todo. Contenido mantiene presionada la animación, el texto frontal y posterior y el botón. Estilo maneja la altura de la caja, los bordes, los colores y la tipografía de cada cara. Avanzado es el espaciado y la visibilidad habituales 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.
- El texto y los iconos de ambas caras, y el enlace del botón trasero.
Cómo agregar el widget Flipbox #
En el editor Elementor, abra el Elementos panel y búsqueda Caja abatible, o desplácese hasta la sección Complementos maestros (los widgets llevan una insignia MA violeta). Arrástrelo a la página y se cargará con un ejemplo de frente y atrás que puede editar.
Establece el estilo de animación #
Abre el Contenido pestaña. El Estilo preestablecido la sección sostiene el Variación de diseño y el Estilo de animación, y debajo se encuentran las secciones Front Box, Back Box y Action Button.
El Estilo de animación dropdown es la parte divertida. Tiene 22 opciones, por lo que la misma tarjeta puede voltearse, desvanecerse, deslizarse o doblarse hacia la cara posterior. Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade y Fade Up son gratuitos; el resto necesita Pro.
- Voltear horizontal y voltear vertical: la clásica carta gira sobre cada eje.
- Cubo (De arriba hacia abajo, de abajo hacia abajo, izquierda a derecha, derecha a izquierda): una rotación de cubo 3D entre caras (Pro).
- Fade and Fade Up (gratis), 3d Flip and Rollover (Pro): revelaciones más suaves cuando quieres algo sutil.
- Direcciones de diapositivas y diagonal (Pro): empuje la cara posterior hacia adentro desde un costado o una esquina.
Configure la caja frontal #
Abre el Caja frontal sección. Esta es la cara que la gente ve antes de flotar, por lo que tiene que ganarse el flip.
- Estilo de icono e icono: elija un icono de la biblioteca. Una imagen en el frente viene con la variación de diseño de imagen frontal en Pro.
- Título y descripción: el encabezado frontal y el texto, cada uno con una opción Escribir con IA.
- Etiqueta HTML de alineación y título: alinee el contenido y establezca el nivel de encabezado (H1 a H6).
Configura la caja trasera #
Abre el Caja trasera sección para el rostro que se muestra a la vista. Toma los mismos campos que el frente, por lo que un breve adelanto en el frente puede conducir al detalle real en la parte posterior.
- Icon: un icono aparte para la cara posterior.
- Título y descripción: el encabezado y el texto posteriores.
- Alineación y etiqueta HTML: diseño y nivel de rumbo para la espalda.
Agregue el botón de acción #
El Botón de acción la sección vive en la cara posterior. Coloque la etiqueta y hacia dónde apunta, para que un desplazamiento pueda conducir directamente a un producto, un formulario u otra página.
- Texto del botón: la etiqueta, como Comience o Obtenga más información.
- Vinculat la: la URL que abre el botón, con las opciones habituales de enlace Elementor.
Estila la tarjeta invertida #
Abre el Estilo pestaña. El General la sección establece el límite y, el entorno que más importa aquí, el Altura de la caja abatible, lo que le da a ambas caras un tamaño fijo.
En General te separas Caja frontal y Caja trasera secciones. Cada uno tiene su propio color de fondo o imagen, colores de título y descripción, tipografía y color de ícono, por lo que las dos caras no se parecen en nada si lo deseas.
Casos de uso comunes #
- Tarjetas de servicio con un icono en el frente y detalles más un botón en la parte posterior.
- Miembros del equipo mostrando una foto en el frente y una biografía en el flip.
- Aspectos destacados del producto eso revela el precio y un botón Comprar al pasar el cursor.
- Rejillas de características donde cada carta pasa a una breve explicación.
- Azulejos de cartera con un frente en miniatura y un enlace de proyecto en la parte posterior.
Consejos para trabajar con el widget Flipbox #
- Establezca una altura fija. La altura de la caja abatible mantiene ambas caras del mismo tamaño, por lo que la tarjeta no salta cuando se gira. Déjelo sin colocar y una cara posterior más larga cambiará el tamaño de la tarjeta a mitad del vuelo, lo que parece fuera de lugar.
- Mantenga el texto breve. La parte posterior se gira rápidamente, por lo que una línea cerrada y un botón se leen mejor que un párrafo completo.
- Haga coincidir la animación con el estado de ánimo. Fade se adapta a una página tranquila; 3D Flip y Cube se adaptan a un héroe audaz.
- Contraste las dos caras. Un color de fondo diferente en la parte posterior hace que el giro sea obvio de un vistazo.
- Vincula siempre el botón. El botón trasero es la recompensa, así que apúntelo en el siguiente paso.
Mira el vídeo tutorial #
¿prefieres seguirlo en la pantalla? El video tutorial a continuación recorre el elemento Flipbox de principio a fin, mostrando cómo funcionan los estilos de animación, las caras frontal y posterior y el estilo en el editor Elementor.
Preguntas frecuentes #
¿qué es el widget Flipbox en los complementos maestros?
Es un widget Elementor que crea una tarjeta de dos caras. La cara frontal muestra un icono, título y descripción, y al pasar el cursor se voltea hacia atrás con su propio texto y un botón. Todo se configura desde el panel Elementor sin código.
¿cuántas animaciones invertidas tiene el widget Flipbox?
El menú desplegable Estilo de animación incluye 22 efectos, 6 gratuitos y 16 con Pro, como Flip Horizontal, Flip Vertical, Fade, Fade Up, Rollover, 3d Flip, las variantes Cube, direcciones de diapositivas y Diagonal. Eliges uno por tarjeta para controlar cómo aparece la cara posterior.
¿Puedo agregar un botón a la tarjeta flip?
Sí. La sección Botón de acción en la pestaña Contenido establece la etiqueta del botón y su enlace. El botón se encuentra en la parte posterior, por lo que muestra cuándo se gira la tarjeta, lo que lo convierte en un lugar natural para enviar visitantes a un producto o formulario.
¿Puedo usar una imagen en lugar de un ícono en el frente?
Sí. Utilice la variación de diseño de imagen frontal, una opción Master Addons Pro, para colocar una imagen en el frente. La pestaña Estilo también le permite configurar una imagen de fondo para cualquiera de las caras, por lo que las tarjetas invertidas con imágenes son fáciles de construir.
¿Cómo mantengo ambos lados de la tarjeta plegable del mismo tamaño?
Establezca la altura de la caja abatible en la sección General de la pestaña Estilo. Le da a ambas caras una altura fija, por lo que la tarjeta permanece del mismo tamaño antes y después del giro en lugar de cambiar su tamaño para adaptarse al contenido de cada lado.
Envolviendo #
El widget Flipbox convierte una tarjeta plana en interactiva: elija una animación, complete las caras frontal y posterior, vincule el botón y luego diseñe cada lado. Para ver los widgets relacionados, consulte el Widget de cuadro de información y el Widget de miembro del equipo, navega por completo Widgets y extensiones de complementos maestros, y mira el Página del widget de Flipbox para demostraciones y una comparación con Elementor Pro Flip Box.
