Widget de boîte à rabat d'élémenteur avec animations de carte à rabat de survol
Flipbox est un widget de boîte à feuilles mobiles Master Addons pour Elementor, sans Elementor Pro nécessaire La face avant montre une icône ou une image avec un titre et un texte court, et sur le survol la carte se tourne vers une face arrière avec plus de détails et un bouton d'action Le widget est livré avec les conceptions Par défaut et Icône avant et 6 animations : Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade et Fade Up. Maître Addons Pro ajoute les designs Front Image et Diagonal et 16 animations supplémentaires, dont Cube, Rollover et Flip 3 D, pour 22 au total Elementor lui-même n'a qu'une boîte à retournement dans Elementor Pro.
Variations de conception et animations de retournements
Variation de conception définit la disposition avant : Par défaut et l'icône avant sont livrées avec le widget, l'image avant et la diagonale ont besoin de Pro. Style d'animation définit la façon dont la carte tourne Inclus : Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade et Fade Up. Pro ajoute quatre directions de Cube, Fade Hideback, Fade Up Hideback, quatre directions de diapositives, deux diapositives Diagonal, Fade In Out, Nananana, Rollover et 3 D Flip, qui a son propre réglage de direction.
- 22 animations au total : 6 incluses et 16 avec Pro.
- Le flip s'exécute sur le hover sur le bureau et sur les écrans tactiles.
- Utilisez une animation par section pour qu'une rangée de cartes semble cohérente.
Générateur de contenu double face
Le Boîte avant et Boîte arrière chacun a sa propre icône avec Vue par défaut, empilée ou encadrée et forme de cercle ou carré, un titre, une description, un alignement et une balise de titre Gardez le devant court, comme un nom de service, et utilisez le dos pour l'explication Dans l'onglet Style chaque face obtient son propre fond, les couleurs de titre et de description, la typographie, les couleurs d'icônes et la bordure.
- Contenu et style séparés pour chaque visage.
- Titre HTML Tag sur les deux faces, donc une grille de cartes garde un ordre de cap propre.
- UN Hauteur de la boîte à rabat le réglage en général garde les deux faces de la même taille.
Bouton CTA avec Hover
Le Bouton d'action affiche sur la face arrière avec votre texte et votre lien Bouton Stylez-le pour Normal et Survoler avec la couleur du texte, l'arrière-plan, la bordure, le rayon de bordure et le remplissage, plus la typographie Le bouton est le seul lien à l'intérieur du widget Pour rendre toute la carte cliquable, ajoutez le Lien d'emballage extension au widget.
- Utilisez une étiquette spécifique telle que “Voir Tarification” lorsque c'est là que va le lien.
- Sautez le bouton sur les cartes purement informatives.
- Si vous utilisez Wrapper Link, pointez le bouton sur la même page.
Flipbox en un coup d'œil
Le tableau répertorie ce que fait le widget aujourd'hui, lu à partir de la source du plugin dans la version 3.2.6.
| Article | flipbox |
|---|---|
| Variations de conception | 4 : Icône par défaut et avant incluse ; Image avant et diagonale avec Pro |
| Animations | 22 :6 inclus (Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade, Fade Up) et 16 avec Pro (quatre directions Cube, deux fondues Hideback, quatre diapositives, deux diapositives Diagonal, Fade In Out, Nananana, Rollover, Flip 3 D) |
| Contenu avant et arrière | Icône ou image (image avec le design Pro Front Image), titre avec sa propre balise HTML, description et alignement sur chaque visage |
| Style d'icône | Par défaut, Empilé ou Encadré, de forme Cercle ou Carré |
| Déclencheur | Survolez sur le bureau, appuyez d'abord sur les écrans tactiles. Déclencheur sans clic |
| Lien boîte entière | Non. Le bouton arrière porte le lien ; l'extension Wrapper Link rend l'ensemble de la carte cliquable |
| Contrôle de la hauteur | Oui, hauteur de la boîte à rabat avec style, général |
| Mode carrousel | Non |
| Direction de retournement 3D | 4 directions sur l'animation Pro 3 D Flip |
| Besoins | Elementor et Master Addons. Pro pour les deux designs supplémentaires et les 16 animations supplémentaires |
Boîte à rabat Elementor Pro vs Flipbox Master Addons
Elementor Pro a son propre widget Flip Box Si vous payez déjà pour, vous n'en aurez peut-être pas besoin d'un autre Voici comment les deux se comparent.
| Caractéristique | Boîte à rabat Elementor Pro | Boîte à feuilles maîtresses Addons |
|---|---|---|
| Prix | Besoins d'Elementor Pro | Additions maîtres ; plus de conceptions et d'animations en Pro |
| Effets de retournement | Retournez, glissez, poussez, zoomez, zoomez et décolorez, avec direction et profondeur 3D | 6 incluaient des animations, 22 avec Pro, dont Cube, Rollover et 3 D Flip |
| Déclencheur | Survole | Survolez ; premier tap sur les écrans tactiles |
| Graphique avant | Aucun, image ou icône | Icône, ou une image avec le design Pro Front Image |
| Lien de carte entier | Appliquer le lien sur : boîte entière ou bouton uniquement | Bouton uniquement, ou toute la carte avec l'extension Wrapper Link |
| Bouton | Oui | Oui, avec le style Normal et Hover |
Elementor Pro est plus simple si vous voulez un lien de boîte entière intégré Master Addons fonctionne sur Elementor sans Pro et donne plus de choix d'animation avec son propre Pro. Pour une carte statique sans rien caché, utilisez le Boîte d'informations Widget.
Carte à rabat CSS ou un widget de boîte à feuilles mobiles ?
Une carte à clapet est la même chose qu'une boîte à clapet : une face avant qui tourne vers une face arrière Vous pouvez en écrire une à la main avec environ 40 lignes de CSS en utilisant la perspective, le style de transformation : préserver-3 d et la rétro-visibilité : caché, et le déposer dans un widget HTML Cette route est très bien pour une carte sur une page que vous contrôlez.
La version CSS a trois problèmes récurrents Les écrans tactiles n'ont pas de survol, donc la carte ne se retourne jamais à moins d'ajouter un gestionnaire de prises Les deux faces ont besoin d'une hauteur fixe ou la carte saute en tournant Et chaque changement de couleur, de texte ou d'icône signifie modifier à nouveau le code, souvent à l'intérieur d'un champ CSS personnalisé qui a besoin d'Elementor Pro. Le widget Flipbox gère le tap, la hauteur et le style du panneau de l'éditeur, et il vous donne un bouton de retour, 22 animations et une variation de conception par carte sans toucher le code.
Idées et conseils de boîte à rabat
Une boîte à feuilles gardent une grille propre tout en transportant des détails, car la description se trouve derrière la carte plutôt que sous elle. Cela fonctionne bien pour les grilles de service, les cartes d'équipe avec une photo au recto et une biographie au verso, les tuiles de fonctionnalités et les cartes de statistiques qui se basculent sur ce que signifie un nombre.
- Définir la hauteur de la boîte à retournement. Sans cela, une face arrière plus longue redimensionne la carte lorsqu'elle tourne et que la rangée saute.
- Faites en sorte que les visages soient différents. Une teinte sur le devant et la couleur de votre marque sur le dos rendent le flip évident.
- Plan pour les téléphones. Les écrans tactiles n'ont pas de vol stationnaire, la carte se retourne donc sur le robinet et le bouton a besoin d'un deuxième robinet. Testez sur un vrai téléphone.
- Gardez les détails essentiels sur le devant. Les prix, les numéros de téléphone et les liens de réservation ne doivent pas être réservés uniquement au verso.
- Limiter la motion. Une ou deux lignes de boîte à feuilles mobiles par page se lit mieux que six animations différentes.
Exemples de boîtes à rabat
Chaque démo ci-dessous est une page en direct construite avec le widget L'animation et la variation de conception sont nommées afin que vous puissiez reconstruire n'importe laquelle d'entre elles à partir du panneau.
Flip vertical
- Cartes d'analyse SaaS: Conception par défaut, trois cartes de statistiques sombres qui se tournent vers une description de plan.
- Grille de cartes d'équipement: Conception par défaut, six tuiles de produits dans une grille à deux rangées.
- Grille de statistiques et d'espèces: Conception par défaut, un chiffre au recto et la signification au verso.
- Cartes de produits Arch: Conception par défaut avec une forme d'arc arrondi sur la face avant.
Flip horizontal
- Tuiles de service uniquement icônes: Conception d'icône avant, quatre icônes encadrées qui se transforment en un court texte de présentation.
- Carreaux de service Bento: Cartes mixtes par défaut et icônes avant dans une disposition bento.
- Cartes de discipline échelonnées: Conception par défaut, trois cartes décalées les unes par rapport aux autres.
- Carreaux d'icônes minimaux: Conception d'icône avant, trois tuiles sombres avec une icône chacune.
Fade
- Cartes de voyage en image frontale: Conception d'image frontale (Pro), une photo sur le devant et les détails du voyage au dos.
- Lignes de chapitre numérotées: Conception par défaut, larges rangées qui se fondent en un résumé de chapitre.
- Lignes d'exécution du chronologie: Conception par défaut, cartes à pas qui s'estompent selon les instructions.
Boîte à rabat et cube
- Vitrine de marque circulaire: Animation Flip Box sur cartes rondes.
- Carreaux diagonaux: Conception diagonale (Pro) avec l'animation Cube Gauche Droite (Pro).
- Effets de transformation avancés: Cartes Flipbox combinées avec l'extension Transforms.
3 D Retourner et glissières
- Cartes de produits de café: Animation de retournement 3 D (Pro), Diapositive de la direction droite vers la gauche.
- Vitrine multimédia interactive: Flip 3 D (Pro) avec une direction différente sur chaque carte.
- Cartes multi-icônes: Gauche à droite, Droite à gauche et Descente à Bas glisse (Pro) dans une rangée.
Retourner, Diagonal et disparaître
- Cartes de classe de gym sombres: Animation de rollover (Pro) sur un thème sombre.
- Carreaux d'icônes pastel: Conception d'icône avant avec l'animation Diagonal de bas en haut (Pro).
- Cartes arrière dégradées: Animation Fade In Out (Pro) sur une face arrière dégradée.
Comment ajouter une boîte à rabat dans Elementor
Vous avez besoin d'Elementor et du plugin Master Addons de WordPress.org.
- Vérifiez que Flipbox est allumé sous Additions maîtresses, widgets.
- Dans l'éditeur Elementor, recherchez flipbox et traînez-le dans un conteneur.
- Choisissez une variante de conception et un style d'animation, puis passez la carte au survol pour la prévisualiser.
- Remplissez la boîte avant et la boîte arrière : icône, titre, description et balise de titre.
- Ajouter le texte et le lien du bouton d'action.
- Dans Style, Général, set Hauteur de la boîte à rabat ainsi, la carte ne redimensionne pas à mi-chemin, puis style chaque visage.
Pour les effets 3 D, lire Comment créer des animations Flipbox d'élémenteur 3D. Chaque paramètre est dans le Paramètres du widget Flipbox.
Flipbox s'associe à quelques autres widgets Master Addons : Boîte d'informations pour une carte qui ne bascule jamais, Bouton Créatif pour un appel à l'action stylisé sous une grille, Effets de survol d'image pour une photo qui révèle une légende au lieu d'un visage arrière, Membre de l'équipe pour les cartes de personnes ayant des liens sociaux, et Basculer le contenu lorsque la révélation doit avoir lieu en clic plutôt qu'en vol stationnaire.
Questions Fréquemment Posées Pour Flipbox
Comment fonctionne le flip box sur les téléphones ?
Les écrans tactiles n'ont pas de vol stationnaire, donc la carte se retourne lorsqu'on tape Le bouton face arrière a besoin de son propre tap après le retournement Conservez les informations à voir absolument sur le devant et testez sur un appareil réel.
Puis-je utiliser une image au lieu d'une icône sur le devant ?
Oui, avec la variante de conception Front Image, qui est une option Master Addons Pro. Sinon, utilisez une icône sur le devant ou définissez une image d'arrière-plan pour le visage dans l'onglet Style.
Ai-je besoin de Master Addons Pro pour le widget Flipbox ?
No. Flipbox est livré avec le plugin Master Addons avec les conceptions Default et Front Icon et 6 animations Master Addons Pro ajoute 2 autres designs et 16 animations supplémentaires.
La boîte à feuilles retournées se retourne-t-elle en cliquant ?
Non. Le widget bascule en vol stationnaire, et sur les écrans tactiles, le premier clic retourne la carte Il n'y a pas de déclencheur de clic sur le bureau Pour un panneau qui s'ouvre en clic, utilisez le Basculer le contenu widget ou un Créateur Popup popup.
Une carte à clapet est-elle la même chose qu'une boîte à clapet ?
Oui. La carte à rabat est le nom du didacticiel CSS pour le même effet : une face avant qui tourne vers une face arrière Le widget Flipbox construit une carte à clapet à partir du panneau de l'éditeur, avec la hauteur, le robinet sur les écrans tactiles et le bouton de la face arrière manipulés pour vous.
Elementor a-t-il un widget flip box ?
Seul Elementor Pro en a un Elementor sans Pro n'en a pas besoin, vous avez donc besoin d'un addon tel que ce widget Flipbox.
Puis-je lier l'intégralité de la boîte à feuilles à une page sans le bouton séparé ?
Le widget relie le bouton uniquement Pour rendre toute la carte cliquable, activez le Lien d'emballage extension et ajouter le lien au widget Flipbox.
Combien y a-t-il d'animations flip ?
22 au total Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade et Fade Up viennent avec le widget Les 16 autres, dont Cube, Rollover et 3 D Flip, ont besoin de Master Addons Pro.
Puis-je mettre des boîtes à feuilles mobiles dans un carrousel ?
Pas avec un paramètre intégré Le widget n'a pas de mode carrousel Enregistrez une boîte à feuilles mobiles comme modèle et montrez-la dans le Carrousel d'images ou une grille en boucle, ou déposez les cartes dans un conteneur d'emballage.
Quelle est la différence avec le Flip Box Elementor Pro ?
Elementor Pro a six effets avec direction et profondeur 3 D, une option de lien de boîte entière et a besoin d'un plan Elementor Pro. Flipbox fonctionne sur Elementor sans Pro, a 6 animations incluses et 22 avec Master Addons Pro, deux conceptions d'icônes ou d'images, et relie la carte entière via l'extension Wrapper Link.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
