Widget Elementor FlipBox: cree tarjetas flotantes interactivas (tutorial gratuito)

El Widget Elementor FlipBox convierte una tarjeta de información estática en algo sobre lo que los visitantes realmente quieren pasar el cursor. El frente muestra un ícono o imagen con un título corto. Al pasar el cursor, la parte posterior se vuelve a ver con una descripción y un botón. No se requiere código.

Este tutorial lo guía a través del widget FlipBox que viene con Complementos maestros para Elementor, un complemento gratuito utilizado en más de 40.000 sitios web. Obtienes 4 variaciones de diseño, más de 20 animaciones invertidas, control de tipografía completo y un botón de acción adecuado en la parte posterior. La mayor parte funciona en la versión gratuita.

Al final, tendrá una sección de flipbox que funciona en su página de WordPress, una idea de qué animación encaja en qué trabajo y una idea más clara de cuándo un flipbox es la llamada correcta (y cuándo es excesivo).

¿qué es un widget FlipBox en Elementor?

Una flipbox es una tarjeta de dos caras. Los visitantes ven primero una cara y, al pasar el cursor (o tocar, en el móvil), la tarjeta gira para mostrar una segunda cara con más detalle. Piense en una tarjeta de presentación que gira cuando le agita la mano.

Elementor no envía una flipbox fuera de la caja, por lo que necesitas un complemento. El Widget FlipBox de complementos maestros le brinda la cara frontal, la cara posterior y un botón en la parte posterior, todos editables desde el panel Elementor normal. Sin códigos cortos, sin código de plantilla.

El widget maneja tres trabajos: el contenido frontal (icono, imagen o encabezado), el contenido posterior (descripción y botón) y la animación invertida entre ellos. Todo se ejecuta a través de controles visuales.

¿por qué utilizar un FlipBox en lugar de una tarjeta de información estática?

Una tarjeta informativa normal muestra todo a la vez. Eso funciona, pero destruye el espacio vertical y los visitantes lo pasan por alto. A flip box en Elementor hace algunas cosas que una tarjeta estática no puede:

• Ahorra espacio vertical. La parte trasera lleva una descripción más larga, por lo que la parte delantera se mantiene corta.
• Gana atención. El movimiento llama la atención. Los mapas de calor muestran consistentemente que los elementos interactivos obtienen más tiempo de vuelo estacionario que los estáticos.
• Corta la carga de lectura. Los visitantes sólo ven la copia detallada si así lo desean. Práctico para cuadrículas de funciones con seis u ocho elementos.
• Impulsa clics. La parte trasera tiene un botón, por lo que la interacción termina con un siguiente paso claro.

Si tu sección tiene mucha copia, un flipbox ayuda. Si es una línea de texto con una foto, una tarjeta estática está bien. Utilice flipboxes donde el pago sea una explicación más larga o un CTA directo.

Cómo agregar el widget FlipBox a Elementor (paso a paso)

Configuración completa a continuación. Esto supone que Elementor ya está instalado. De lo contrario, primero obtenga la versión gratuita del directorio de complementos de WordPress.

Paso 1: instale complementos maestros para Elementor

En su administrador de WordPress, vaya a Complementos → Agregar nuevo y busque “Complementos maestros para Elementor” Instalar, activar, listo. El instalación de complementos maestros doc tiene la versión más larga si algo se rompe.

Paso 2: arrastre el widget FlipBox a su diseño

Abra la página en Elementor. En el panel de widgets de la izquierda, escriba “FlipBox” en el cuadro de búsqueda. Lo verás con el icono de complementos maestros. Arrastrarlo a cualquier columna.

Elementor carga un flipbox predeterminado en el momento en que lo dejas caer. Pase el cursor sobre él en la vista previa para ver el giro en acción antes de cambiar algo. Vale la pena hacerlo porque te da una idea de la velocidad de animación predeterminada.

Paso 3: Configure la caja frontal

La pestaña Contenido tiene tres secciones: Front Box, Back Box y Action Button. Comience con el frente, ya que eso es lo que los visitantes ven primero.

Dentro Caja frontal puedes configurar:

• Icono: elija de la biblioteca de iconos de Elementor o cargue un SVG. Master Addons también se envía con 8 premium bibliotecas iconos si Font Awesome no es suficiente.
• Título: el titular en el frente. Manténgalo en 3-5 palabras para que encaje en una línea.
• Título Etiqueta HTML: H2, H3, H4, div, span. Utilice H3 o H4 si el flipbox se encuentra dentro de una sección que ya tiene un H2 (de lo contrario, romperá su jerarquía de encabezados y las herramientas de SEO lo marcarán).
• Texto/subtítulo: una breve línea de apoyo. Una oración máx.

Paso 4: Configure la caja trasera

El Caja trasera utiliza los mismos campos más un área de descripción. Aquí es donde vive la información real, así que dése espacio para escribir.

• Icono o imagen: opcional. Muchos diseñadores se saltan el icono de atrás y dejan respirar la descripción.
• Título: a menudo es igual que el frente, pero puede diferir. Una pregunta en el frente con la respuesta en la parte posterior funciona bien para llamadas de funciones.
• Descripción: 2-3 frases. Cualquier cosa más larga y la tarjeta se siente apretada, especialmente en la tableta.

Paso 5: agregue un botón de acción (opcional pero recomendado)

El botón sólo aparece en la parte trasera. Desplácese hasta Botón de acción și plătește:

• Texto del botón: “Más información”, “Comience”, “Ver precios” Haga coincidir la copia con lo que realmente ofrece la página siguiente.
• Url del enlace: interno o externo. Alterne “Abrir en una pestaña nueva” y “Agregar nofollow” si es necesario.

Omita el botón si el flipbox es puramente informativo (como una cuadrícula de descripción general de funciones). Agréguelo si la tarjeta se encuentra en un sección centrada en la conversión donde quieras un siguiente clic.

4 variaciones de diseño de FlipBox explicadas

El widget Master Addons FlipBox tiene cuatro diseños integrados. Cada uno cambia la forma en que se presenta la cara frontal. La cara posterior permanece igual en los cuatro.

1. Icono frontal (predeterminado). Icono, título y subtítulo centrados. Se adapta a cuadrículas de funciones, bloques de servicios y propuestas de valor.
2. Imagen frontal. Reemplaza el ícono con una imagen completa. Bueno para miembros del equipo, mosaicos de portafolio y tarjetas de productos.
3. Diagonal. Divide el frente en ángulo. Mirada moderna. Úselo con moderación, una fila de flipbox por página como máximo, ya que el ángulo pelea con todo lo que lo rodea si lo repite con demasiada frecuencia.
4. Centrado. Diseño minimalista con todo apilado verticalmente. Lee limpiamente sobre fondos oscuros.

Elija una variación según lo que el frente necesita decir. Si el ícono lleva el mensaje, quédese con el ícono frontal. Si una foto hace mejor el trabajo, cambie a Imagen frontal. No mucho más.

Más de 20 animaciones Flip que puedes usar

En la sección General de la pestaña Estilo, obtienes un menú desplegable con más de 20 animaciones invertidas. La animación controla cómo la tarjeta revela la cara posterior.

Los comunes:

• Voltear (horizontal/vertical): el clásico cambio de tarjeta 3D. Valor predeterminado seguro para la mayoría de los casos de uso.
• Deslizar (Izquierda / Derecha / Arriba / Abajo): la cara posterior empuja el frente hacia afuera. Fácil, funciona bien en dispositivos móviles.
• Acercar/alejar: una revelación basada en escalas. Útil cuando quieres que la tarjeta sienta que avanza.
• Desvanecerse: la opción más sencilla. Buena elección cuando otros elementos de la página ya están animados.
• Empujar (Izquierda / Derecha / Arriba / Abajo): la parte trasera se desliza hacia adentro mientras que la parte delantera se desliza hacia afuera en secuencia.
• Variantes de Flip 3D: agregue perspectiva para un giro más dramático. El Guía FlipBox de Elementor 3D tiene un recorrido más profundo de esas configuraciones.

Tip practic: Cíñete a un estilo de animación por página. Si tu cuadrícula de flipbox tiene seis cartas y cada una se voltea de manera diferente, la sección se siente caótica. Elige uno, confírmate con él. Mezcle estilos solo cuando desee que dos secciones claramente separadas se sientan diferentes entre sí.

¿Quieres ver cómo se ve cada uno antes de comprometerte? El Guía de efectos de animación de Elementor tiene vistas previas una al lado de la otra de los estilos más comunes.

Estilismo del frente, la espalda y el botón

Cambie a la pestaña Estilo y obtendrá cuatro paneles plegables: General, Front Box, Back Box y Action Button. Cada uno tiene su propio color, tipografía, espaciado y controles de borde.

Lo que más importa en cada panel:

General

Establece el conjunto altura de la flipbox (200px es un mínimo sensato, 350px parece adecuado para cuadrículas de funciones), el radio fronterizo, y el velocidad de animación. Mantenga la duración de la animación entre 400 y 700 ms. Cualquier cosa más rápida se siente nerviosa. Cualquier cosa más lenta se siente lenta y los visitantes alejarán el cursor antes de que finalice el giro.

Caja frontal

Color de fondo o degradado, color de icono, tamaño de icono, tipografía de título, tipografía de subtítulos y acolchado interno. Haga coincidir el fondo con su marca. La mayoría de los diseñadores utilizan un tinte suave (gris claro, azul pálido) en el frente y guardan el color fuerte para la parte posterior.

Caja trasera

Los mismos controles que el frente, pero aquí es donde suele vivir el color de tu marca. Haga que la parte posterior sea visualmente distinta de la parte delantera para que el giro se sienta como una revelación real, no como un cambio de tinte sutil. Un giro de blanco a morado se lee mejor que un giro de gris claro a gris ligeramente más claro.

Botón de acción

Color de texto, fondo, color flotante, borde, relleno y tipografía. Utilice el mismo estilo de botón que utiliza en otras partes de la página para que no se sienta fuera de lugar. Si sus botones CTA principales en el sitio son de color púrpura sólido con texto blanco, haga que el botón de la caja invertida coincida con ellos.

6 casos de uso prácticos para el widget Elementor FlipBox

Lugares del mundo real donde el widget se conserva:

1. Redes de servicios. Frente: icono y nombre del servicio. Atrás: descripción de una oración y un botón “Más información” que enlaza con la página de servicio.
2. Exhibiciones destacadas. Frente: icono de función. Atrás: explicación de dos líneas y un enlace a la página completa de funciones.
3. Tarjetas de miembro del equipo. Frente: foto y nombre. Atrás: biografía y un enlace a la página de su autor o LinkedIn.
4. Aspectos destacados de los precios. Frente: nombre del plan. Atrás: tres funciones principales y un botón al máximo tabla de precios.
5. Revelaciones estilo preguntas frecuentes. Frente: pregunta. Atrás: respuesta corta. Se adapta a páginas de destino donde un acordeón completo se siente demasiado pesado.
6. Miniaturas de cartera. Frente: imagen del proyecto. Atrás: nombre del cliente, tipo de proyecto y botón “Ver estudio de caso”.

Si desea algo más visual para el trabajo de portafolio, el Widget de hotspot de imagen encaja mejor cuando necesitas resaltar áreas específicas dentro de una sola imagen en lugar de voltear cartas enteras.

Consejos de diseño que realmente se convierten

Cosas que vale la pena saber al ver sitios reales usan el widget:

• Mantenga el frente simple. Icono, título de 3 palabras, subtítulo de 1 línea. Eso es todo. Los visitantes escanean el frente, no lo leen.
• Pon el valor real en la espalda. Alguien flotó porque algo en el frente los atrapó. Recompensa el flote con algo útil, no más tonterías de marketing.
• Combina alturas a lo largo de una fila. Una flipbox a 280px junto a una a 320px hacen que la fila parezca rota. Establezca una altura fija en la sección General.
• Prueba en móvil. En los dispositivos táctiles, el primer toque gira la tarjeta y el segundo toque sigue el enlace del botón. Asegúrese de que el flujo de dos pasos funcione con un pulgar real, no solo con un mouse.
• No los uses demasiado. Más de 6-8 flipboxes en una sola página comienzan a parecer efectistas. Una o dos secciones por página es el punto óptimo.

Nota de accesibilidad: Los flipboxes dependen del desplazamiento, que los lectores de pantalla y los usuarios de teclado no pueden activar de la misma manera que lo hace un usuario del mouse. Asegúrese de que el contenido posterior también esté disponible en otro lugar de la página (una sección plegable, una página dedicada, un H2 cercano) o agregue un estado de enfoque visible para que los usuarios del teclado también puedan voltear la tarjeta. Esto es lo más común que olvidan los diseñadores de WordPress.

Gratis vs Pro: lo que obtienes

El widget FlipBox de Master Addons está en versión gratuita. Puede descargar el complemento desde el directorio de WordPress y usarlo en sitios ilimitados. Pro desbloquea más widgets y extensiones a su alrededor, no el flipbox en sí.

Si solo necesitas el flipbox, lo gratis es suficiente. Si quieres el completo Biblioteca de más de 80 widgets, creador de temas, creador de ventanas emergentes y kits de plantillas, eche un vistazo Precios de Master Addons Pro.

Preguntas frecuentes

Envolviendo

El Widget Elementor FlipBox es una de esas pequeñas adiciones que supera su peso. Una fila limpia de flipbox puede reemplazar un bloque completo de texto, generar más tiempo de vuelo estacionario y aún así cargar rápido. El truco es la moderación: mantener el frente simple, poner el valor en la parte posterior y elegir un estilo de animación por sección.

Para una cobertura de entornos más profunda, el documentación oficial de FlipBox recorre todas las opciones. Y si desea que se emparejen más widgets interactivos con él, el Guía de bibliotecas de iconos de Elementor es una buena próxima lectura.

Lectura relacionada: Funciones de animación de complementos maestros | Widgets de marketing de Elementor | Widget de tabla de precios de Elementor