Una caja abatible es una tarjeta con dos caras. El frente lleva un ícono y un título corto. Pásalo y la tarjeta girará hacia atrás sosteniendo la descripción y un botón. Elementor Pro envía uno. No necesitas Pro para conseguir uno.
El libre Widget Flipbox de complementos maestros agrega uno al Elementor normal, con más de treinta animaciones invertidas, ambas caras diseñadas de forma independiente y un botón que enlaza donde quieras. Esta guía cubre la compilación, la configuración que soluciona la mayoría de los problemas de volteo y el comportamiento móvil que atrapa a las personas después de publicar.
Qué flip box es realmente
Una caja abatible es una tarjeta de dos caras que intercambia caras al pasar el cursor o al tocarla. El frente muestra un ícono o imagen con un título. La parte posterior muestra una descripción más larga y generalmente un botón. Mantiene una cuadrícula limpia sin dejar de llevar el detalle, porque la descripción se encuentra detrás de la tarjeta en lugar de debajo de ella.
Primero muestra una fila escaneable y luego deja que cualquiera que esté interesado extraiga los detalles ellos mismos. Nadie tiene que leer una pared de copias para encontrar el único servicio al que acudió. Esa es la razón para buscar uno.
Cuatro patrones que maneja bien:
- Redes de servicios. El frente nombra el servicio, el reverso lo explica y enlaza con la página del servicio.
- Tarjetas de equipo. Foto y nombre en el anverso, biografía y enlace en el reverso. Si no es necesario ocultar nada, una llanura sección de miembros del equipo es la construcción más simple.
- Azulejos destacados. Icono al frente, la especificación detrás.
- Tarjetas estadísticas. Un número grande en el frente que cambia a lo que significa el número.
¿elementor tiene un widget de flip box?
Elementor Pro tiene uno. Elementor gratis no. Esa distinción importa, porque muchos tutoriales la desdibujan y luego la gente busca un widget que no esté en su panel.
Entonces hay cuatro rutas honestas hacia una caja plegable, y cada una pide algo diferente:
| Ruta | Costo | Lo que te cuesta |
|---|---|---|
| Caja abatible Elementor Pro | Licencia pagada | Necesita Pro en cada sitio que construyas. Cubre los efectos básicos de voltear, deslizar y hacer zoom. |
| Transformación 3D CSS codificada a mano | Gratis | Sin edición visual. Bien hasta que un cliente solicite un cambio de copia y usted vuelva a estar en una hoja de estilo. |
| Flipbox de complementos maestros | Gratis | Un complemento más. Ambas caras están diseñadas en el editor normal, con ajustes preestablecidos y más de treinta animaciones. |
| Otros complementos gratuitos | Gratis | Fancy Elementor Flipbox y HappyAddons lo hacen. Estás adoptando el ciclo de actualización de otro complemento de cualquier manera. |
Si ya pagas por Elementor Pro, usa su Flip Box y omite el complemento adicional. No hay premio por instalar algo que no necesitas. Si estás en Elementor gratis, el resto de esta guía es tu ruta.
Antes de empezar
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalados y activos. Es gratuito en WordPress.org y se ejecuta en más de 30 000 sitios.
- Los iconos, copia y enlace de destino para ambas caras. Ordena estos primero. Diseñar una tarjeta mientras inventas la copia es como terminas con “Lorem ipsum” en una página en vivo.
Construye una caja plegable, paso a paso
Paso 1: habilite el widget Flipbox
Los complementos maestros mantienen todos los widgets detrás de un interruptor para que los que no uses nunca se carguen. Ir a Complementos maestros → Configuración, abre el Elementos tab, busca Flipbox, enciéndelo, guarda.
¿sin alternar? Actualizar el complemento. La pestaña Elementos ha crecido entre versiones y compilaciones anteriores agrupan las cosas de manera diferente.
Paso 2: suelte el widget de la página
Edite cualquier página con Elementor, escriba “Flipbox” en la búsqueda de widgets, arrástrela a un contenedor. Se carga con contenido de muestra en ambas caras, ya volteando.
Pásalo en la vista previa antes de cambiar algo. Quieres tener una idea de la velocidad de animación predeterminada, porque esa es la configuración que la gente suele dejar sola y luego se pregunta por qué la tarjeta se siente lenta.
Paso 3: elija una variación de diseño
La pestaña Contenido se abre en a Estilo preestablecido sección que contiene dos controles: Variación de diseño y Estilo de animación. Debajo de ellos se encuentran el front box, el back box y el botón de acción.
La variación de diseño cambia la forma en que se organiza la cara frontal. La decisión práctica es si un icono o una fotografía lleva su mensaje. Las variaciones basadas en iconos se adaptan a las cuadrículas de servicios y las filas de características. Las variaciones basadas en imágenes se adaptan a los miembros del equipo, los mosaicos del portafolio y las tarjetas de productos, donde una cara o una fotografía hace más trabajo que cualquier ícono.
Paso 4: elige la animación
El menú desplegable Estilo de animación tiene más de treinta efectos. Se dividen en cuatro grupos:
- Voltear horizontal / Voltear vertical. La clásica rotación de cartas en cada eje. Legible y el valor predeterminado seguro cuando no tienes motivos para elegir nada más.
- Cubo (De arriba hacia abajo, de abajo hacia arriba, de izquierda a derecha). Una rotación de cubo en 3D entre caras. Dramático. Úselo en un héroe, no en una cuadrícula de ocho.
- Voltear 3D, desvanecerse, desvanecerse, voltearse. Revelaciones más suaves para páginas que ya tienen movimiento en otros lugares.
- Direcciones de diapositivas y diagonal. La cara posterior empuja hacia adentro desde un costado o una esquina. Estos se leen bien en dispositivos móviles, donde una rotación puede parecer pesada.
Elija uno y confíese con él en toda la sección. Seis cartas que giran de seis maneras diferentes no parecen divertidas, parecen rotas. La única buena razón para mezclar es cuando dos secciones necesitan sentirse deliberadamente separadas.
¿quieres ver los estilos de movimiento uno al lado del otro antes de comprometerte? El Guía de efectos de animación de Elementor vistas previas de los comunes y el Tutorial de caja plegable 3D profundiza en la configuración de perspectiva detrás de las opciones Cube y 3d Flip.
Paso 5: escribe la cara frontal
Abierto Caja frontal. Esta es la cara que tiene que ganar el vuelo estacionario, por lo que recibe menos copias de las que crees, no más.
- Estilo de icono e icono. Saque de la biblioteca de iconos o cambie a una imagen. Master Addons envía más bibliotecas iconos más allá de Font Awesome si los necesitas.
- Título. De tres a cinco palabras. Tiene que sobrevivir en una línea al ancho de la tableta.
- Descripción. Una línea. Tanto el título como el campo de descripción tienen a Escribe con IA opción integrada en el panel si estás atascado.
- Etiqueta HTML de alineación y título. H1 a H6. Configure esto correctamente. Una cuadrícula de seis flip boxes con títulos H2 dentro de una sección que ya tiene un H2 le brinda siete H2 en la página y una herramienta de auditoría que lo marca. El mismo cuidado se aplica a cualquier bloque repetido en a diseño de Elementor personalizado.
Paso 6: escribe la cara posterior
Mismos campos, trabajo diferente. Caja trasera toma su propio ícono, título, descripción, alineación y etiqueta de encabezado, para que las dos caras no tengan que coincidir en absoluto.
La regla que mantiene útil esta sección: el frente hace una promesa, la parte trasera la cumple. Si el frente dice “Diseño web”, el reverso dice lo que realmente se incluye y enlaces a la página. Alguien flotó porque el frente los atrapó. Paga eso con información, no con otro eslogan.
Dos o tres frases. Más largo y la tarjeta se siente apretada al ancho de la tableta, donde la tarjeta es más estrecha pero el texto no se ha reducido.
Paso 7: agregue el botón de acción
El Botón de acción la sección establece una etiqueta y un enlace, y el botón se representa únicamente en la cara posterior. Establezca el texto en lo que realmente ofrece la página siguiente. “Más información” está bien. “Ver precios” es mejor cuando el enlace va a precios.
Omita el botón por completo en una cuadrícula puramente informativa. Una tarjeta que se voltea a una descripción y se detiene es una tarjeta perfectamente buena. Agréguelo cuando la sección esté realizando trabajos de conversión.
La única configuración que soluciona la mayoría de las quejas de las cajas plegables
Cambiar al Estilo pestaña y abre General. Hay un control llamado Altura de la caja abatible.
Configure-l.
Déjelo sin configurar y cada tarjeta se dimensiona en cualquier cara que tenga más contenido, por lo que la tarjeta cambia de tamaño a mitad de vuelo a medida que se gira la cara posterior más larga. La fila salta. Las tarjetas que deberían coincidir terminan en diferentes alturas porque una descripción del servicio tenía dos líneas más largas que el resto. La documentación de Flipbox enumera este como su primer consejo de trabajo, y la configuración que con mayor frecuencia se deja sola.
200px es un piso sensato. 350px se adapta a la mayoría de las cuadrículas destacadas. Configure una vez al nivel del contenedor y todas las cartas de la fila coincidan.
Mientras estés en General, mantén la duración de la animación entre 400 y 700 ms. Lecturas más rápidas como un problema técnico. Más lento y el cursor ha avanzado antes de que finalice el giro.
Estilismo de las dos caras
Debajo de General te separas Caja frontal y Caja trasera paneles, cada uno con su propio color de fondo o imagen, colores de título y descripción, tipografía y color de icono.
Haz que las dos caras sean genuinamente diferentes. Un frente gris pálido que se voltea hacia un fondo gris ligeramente más pálido parece un defecto de renderizado en lugar de una revelación. La mayoría de los diseños aterrizan en un tinte suave en el frente y el color de la marca en la parte posterior, lo que hace que el giro sea obvio desde el otro lado de la habitación.
Diseñe los estados normal y flotante del botón para que coincidan con los botones en cualquier otro lugar del sitio. Un botón de caja abatible que no se parece en nada a sus otros CTA se lee como un anuncio integrado.
Hacer que se pueda hacer clic en toda la tarjeta
De forma predeterminada, el enlace se encuentra en el botón, no en la tarjeta. La gente intenta hacer clic en el cuerpo de la tarjeta, no pasa nada y se van. Es algo pequeño que cuesta clics reales.
La solución no está en el widget Flipbox. Es el Enlace envolvente extensión, un módulo separado que habilita en la configuración de Complementos maestros, que envuelve cualquier elemento en un solo enlace. Enciéndalo y luego aplíquelo al contenedor de la caja plegable.
Una precaución: si toda la tarjeta enlaza en algún lugar y el botón enlaza en otro lugar, el que el visitante presione primero gana y el otro nunca se usa. Apúntelos al mismo destino o suelte el botón.
Móvil: la parte que pilla a la gente
Los teléfonos no tienen vuelo estacionario. En su lugar, el giro se activa al tocar. El primer toque gira la tarjeta hacia atrás, el segundo toque la gira hacia casa y el botón necesita un toque propio una vez que se muestra la parte posterior.
Son dos toques antes de que alguien llegue a su llamado a la acción. En el escritorio, la cara posterior cuesta un movimiento del cursor. En el móvil cuesta un esfuerzo deliberado y una parte significativa de los visitantes nunca lo gasta.
El segundo toque también es donde las cosas se rompen. Los informes de una caja invertida que se gira hacia adelante pero no retrocede aparecen regularmente en los hilos de la comunidad Elementor, y la vista previa del editor no reproduce el comportamiento táctil de manera lo suficientemente confiable como para captarlo. Pruébelo en un teléfono real antes de realizar el envío, porque el modo responsivo en el editor no le mostrará esto.
Lo que lleva a la regla que importa más que cualquier elección de estilo aquí:
Nunca pongas información esencial sólo en la cara posterior. Si un visitante móvil necesita tenerlo, un precio, un número de teléfono, una dirección o un enlace de reserva van al frente o a algún lugar fuera de la tarjeta por completo. Trate la cara posterior como un lugar para obtener más detalles, no para nada de lo que dependa la página.
La tarjeta escala y se envuelve en los puntos de interrupción, y la altura responde, por lo que puedes apretarla para dispositivos móviles en el modo responsivo de Elementor. Si la cuadrícula se rompe a un ancho que no planeaba, verifique puntos de interrupción estándar de Elementor primero, luego agrega puntos de interrupción personalizados si necesita tamaños, Elementor no realiza envíos.
Accesibilidad, honestamente
Una caja abatible esconde la mitad de su contenido detrás de una interacción que un usuario de teclado y un lector de pantalla no pueden realizar como lo hace un usuario de mouse. Vale la pena ordenarlo antes de que la sección entre en funcionamiento, no después.
Dos cosas lo hacen defendible:
- Agregue un estado de enfoque visible entonces, un usuario de teclado que recorre la página puede ver y activar la tarjeta.
- Haga que el contenido posterior sea accesible de otra manera, una sección cercana, una página vinculada, un bloque plegable. Si el único camino hacia la descripción de su servicio es un vuelo estacionario, algunos visitantes no tienen camino.
Los motores de búsqueda indexan el texto de la cara posterior, ya que se encuentra en el DOM en lugar de cargarse a pedido, por lo que ocultar la copia detrás de un flip no lo elimina de la página en lo que respecta al rastreo. Si una persona puede llegar a él es una pregunta separada y la que debe responder primero.
Cuándo saltarse la caja invertida
Tres situaciones en las que un widget diferente le resulta mejor.
El texto posterior es importante para todos los lectores. Si todos necesitan la descripción, no los hagan flotar. Un Cuadro de información muestra un ícono, un encabezado y una línea de copia sin nada oculto y sin interacción para probar en cuatro dispositivos.
Quieres el movimiento, no la segunda cara. Si el atractivo es un efecto de desplazamiento ingenioso y no tiene contenido trasero genuino, el Transforma extensión agrega movimiento 3D a cualquier elemento sin inventar una copia para llenar una cara que nadie pidió.
La página ya se mueve. Paralaje, se revela el desplazamiento, un héroe animado y ahora una cuadrícula de cartas volteadas. Después de cierta cantidad de movimiento, un visitante deja de registrar algo y cada efecto es más trabajo para el navegador. Cuente lo que ya hay en la página antes de agregar más y, si se carga lentamente, arregla la velocidad antes de agregar otra animación.
Y una gorra suave que vale la pena respetar: más de seis u ocho flip boxes en una página se convierten en trucos. Una o dos secciones es el punto óptimo.
Gratis vs Pro
El widget Flipbox está en el complemento gratuito. Cada variación de diseño, cada animación, ambas caras diseñadas de forma independiente, sitios ilimitados. Pro no desbloquea el flip box, desbloquea otras cosas a su alrededor.
| Característica | Gratis | Pro |
|---|---|---|
| Widget Flipbox, todas las variaciones de diseño | Sí | Sí |
| Las más de 30 animaciones invertidas | Sí | Sí |
| Estilo separado para ambas caras | Sí | Sí |
| Controles de altura y respuesta de Flip Box | Sí | Sí |
| Extensión de enlace envolvente | Sí | Sí |
| Biblioteca completa de más de 80 widgets | Parcial | Sí |
| Creador de widgets y kits de plantillas | No | Sí |
| Soporte prioritario | Comunidad | Sí |
Si lo que viniste es la caja plegable, la respuesta completa es gratuita. Si está reconstruyendo el mismo diseño de tarjeta en los sitios del cliente, el Creador de widgets lo guarda una vez como un widget reutilizable y se encuentra en el nivel pago. Desglose completo en el página de precios, y una visión más amplia de lo que hay disponible en nuestro resumen de complementos de Elementor.
Preguntas frecuentes
¿qué es una caja plegable en Elementor?
Una caja plegable es una tarjeta de dos caras. El frente muestra un ícono o imagen con un título, y al pasar el cursor o tocar, gira hacia atrás con una descripción más larga y generalmente un botón. Se utiliza para cuadrículas de servicio, tarjetas de equipo, mosaicos de características y tarjetas de estadísticas, dondequiera que una vista frontal limpia y un detalle opcional superen un bloque de texto.
¿el widget de flip box es gratuito en Elementor?
El widget Flip Box de Elementor es parte de Elementor Pro, por lo que no es gratuito. El widget Master Addons Flipbox está incluido en el complemento gratuito de WordPress.org y funciona con Elementor normal, por lo que puede crear uno sin una licencia Pro.
¿cómo agrego un widget de flip box en Elementor?
Habilite Flipbox en Complementos maestros → Configuración → Elementos, luego abra una página en el editor Elementor, escriba “Flipbox” en la búsqueda de widgets y arrástrelo a un contenedor. Si no aparece en la búsqueda, el interruptor aún no está activado o el editor necesita una recarga.
¿por qué mi flip box no vuelve a girar en el móvil?
En una pantalla táctil, el flip se ejecuta con un toque en lugar de flotar, por lo que el primer toque muestra la parte posterior y un segundo toque debería devolverla. Cuando el segundo toque no hace nada, suele ser un conflicto en el manejo del toque. Pruebe en un dispositivo real en lugar del modo responsivo, mantenga una tarjeta por fila mientras la aísla y nunca coloque información que deba verse solo en la cara posterior.
¿Puedo usar una imagen en lugar de un ícono en el frente?
Sí. Cambie el estilo de icono en la sección Front Box para usar una imagen o elija una variación de diseño basada en imágenes. La pestaña Estilo también establece una imagen de fondo para cualquiera de las caras, por lo que las tarjetas totalmente basadas en imágenes son sencillas.
¿Puedo hacer que se pueda hacer clic en todo el flip box, no solo en el botón?
No desde el interior del widget. El enlace se encuentra en el botón de forma predeterminada. Para hacer que se pueda hacer clic en toda la tarjeta, habilite la extensión Wrapper Link en la configuración de Master Addons y aplíquela al contenedor flip box, que envuelve toda la tarjeta en un solo enlace.
¿Cómo mantengo ambos lados de la tarjeta del mismo tamaño?
Establezca la altura del cuadro giratorio en la sección General de la pestaña Estilo. Le da a ambas caras una altura fija, por lo que la tarjeta no cambia de tamaño a mitad del giro cuando la cara posterior lleva más texto que la frontal.
¿cuántas animaciones invertidas tiene el widget?
Más de treinta, incluidos Flip Horizontal y Vertical, las cuatro direcciones del Cubo, 3d Flip, Fade, Fade Up, Rollover, las direcciones de diapositiva y Diagonal. Eliges uno por tarjeta.
Lectura relacionada
- Cómo crear animaciones de Flipbox de Elementor 3D
- Documentación del widget Flipbox, cada control, en orden
- Efectos de animación elemental
- Widget de hotspot de imagen, para resaltar áreas dentro de una imagen en lugar de voltear tarjetas enteras
- Widget de cuadro de información, la alternativa estática cuando no se debe ocultar nada
- Plantillas de sección Elementor gratuitas importar y editar
