Une boîte à retournement est une carte à deux faces Le recto porte une icône et un titre court Passez-la en vol, et la carte tourne vers une face arrière tenant la description et un bouton L'élémenteur Pro en expédie une Vous n'avez pas besoin de Pro pour en obtenir une.
Le gratuit Widget Flipbox Master Addons ajoute un à Elementor régulier, avec plus de trente animations flip1, les deux visages sont conçus indépendamment et un bouton qui relie où vous le souhaitez. Ce guide couvre la version, le paramètre qui résout la plupart des problèmes de retournement et le comportement mobile qui surprend les gens après leur publication.
Qu'est-ce qu'une boîte à feuilles mobiles en réalité
Une boîte à feuilles mobiles est une carte à deux faces qui échange des faces en vol stationnaire ou en appui Le recto montre une icône ou une image avec un titre Le verso montre une description plus longue et généralement un bouton Il maintient une grille propre tout en portant le détail, car la description se trouve derrière la carte au lieu de dessous.
Vous montrez d'abord une rangée scannable, puis laissez tous ceux qui sont intéressés tirer eux-mêmes le détail Personne n'a à lire un mur de copie pour trouver le seul service pour lequel ils sont venus C'est la raison d'en atteindre un.
Quatre motifs qu'il gère bien :
- Grilles de service. Prénoms le service, retour l'explique et liens vers la page de service.
- Cartes d'équipe. Photo et nom sur le devant, bio et un lien sur le dos Si rien n'a besoin de se cacher, une plaine section membres de l'équipe est la construction la plus simple.
- Carreaux caractéristiques. Icône devant, la spécification derrière.
- Cartes à statistiques. Un grand nombre au recto qui bascule sur ce que signifie le nombre.
Elementor a-t-il un widget flip box ?
Elementor Pro en a un. Free Elementor ne. Cette distinction compte, car de nombreux tutoriels la brouillent puis les gens partent à la recherche d'un widget qui ne figure pas dans leur panneau.
Il existe donc quatre itinéraires honnêtes vers une boîte à feuilles mobiles, et chacun demande quelque chose de différent :
| Route | Coût | Ce que ça vous coûte |
|---|---|---|
| Boîte à rabat Elementor Pro | Licence payée | Needs Pro sur chaque site que vous construisez Couvre les effets de base flip, slide et zoom. |
| Transformation CSS 3 D codée à la main | Gratuit | Pas de modification visuelle Très bien jusqu'à ce qu'un client demande un changement de copie et que vous soyez de retour dans une feuille de style. |
| Boîte à feuilles maîtresses Addons | Gratuit | Un plugin de plus Les deux faces sont conçues dans l'éditeur normal, avec des préréglages et plus de trente animations. |
| Autres modules complémentaires gratuits | Gratuit | Fancy Elementor Flipbox et HappyAddons le font tous les deux Vous adoptez le cycle de mise à jour d'un autre plugin dans un sens ou dans l'autre. |
Si vous payez déjà pour Elementor Pro, utilisez sa Flip Box et sautez le plugin supplémentaire Il n'y a pas de prix pour installer quelque chose dont vous n'avez pas besoin Si vous êtes sur Elementor gratuit, le reste de ce guide est votre itinéraire.
Avant de commencer
- WordPress avec Elementor installé et actif.
- Master Addons for Elementor installé et actif C'est gratuit sur WordPress.org et fonctionne sur plus de 30 000 sites.
- Les icônes, la copie et le lien de destination pour les deux visages Trier ces premiers Concevoir une carte pendant que vous inventez la copie est la façon dont vous vous retrouvez avec “Lorem ipsum” sur une page en direct.
Construisez une boîte à feuilles mobiles, étape par étape
Étape 1 : Activer le widget Flipbox
Master Addons garde chaque widget derrière une bascule pour que ceux que vous n'utilisez pas ne se chargent jamais Aller à Additions principales → Paramètres, ouvre le Éléments tab, trouver Flipbox, l'activer, enregistrer.
Pas de bascule ? mettre à jour le plugin L'onglet Éléments s'est développé entre les versions et les versions plus anciennes regroupe les choses différemment.
Étape 2 : Déposez le widget sur la page
Modifier n'importe quelle page avec Elementor, tapez“Flipbox” dans la recherche de widgets, faites-la glisser dans un conteneur Il charge avec un échantillon de contenu sur les deux faces, déjà en basculant.
Passez-le dans l'aperçu avant de changer une chose Vous voulez une idée de la vitesse d'animation par défaut, car c'est le paramètre que les gens laissent le plus souvent seuls et se demandent ensuite pourquoi la carte semble lente.
Étape 3 : Choisissez une variante de conception
L'onglet Contenu s'ouvre sur un Style Préréglé section contenant deux commandes : Variation de conception et Style d'animation. Sous ceux-ci se trouvent la boîte avant, la boîte arrière et le bouton d'action.
La variante de conception modifie la façon dont la face avant est disposée La décision pratique est de savoir si une icône ou une photographie porte votre message Les variations dirigées par des icônes conviennent aux grilles de service et aux rangées de caractéristiques Les variations dirigées par des images conviennent aux membres de l'équipe, aux tuiles de portfolio et aux cartes de produits, où un visage ou une photographie fait plus de travail que n'importe quelle icône ne le pourrait.
Étape 4 : Choisissez l'animation
Le dropdown Animation Style comporte plus de trente effets Ils se répartissent en quatre groupes :
- Flip horizontal/Flip vertical. La rotation classique de la carte sur chaque axe. Lisible, et la valeur par défaut sûre lorsque vous n'avez aucune raison de choisir autre chose.
- Cube (Haut en bas, Bas en haut, Gauche, Droite). Une rotation de cube 3 D entre les visages Dramatique Utilisez-le sur un héros, pas sur une grille de huit.
- 3 d Flip, Fade, Fade Up, Rollover. Des révélations plus douces pour les pages qui ont déjà du mouvement ailleurs.
- Directions de diapositives et Diagonale. La face arrière pousse d'un côté ou d'un coin Ceux-ci lisent bien sur mobile, où une rotation peut sembler lourde.
Choisissez-en un et engagez-vous à travers la section Six cartes retournant de six façons différentes n'ont pas l'air ludiques, il semble cassé La seule bonne raison de mélanger est quand deux sections ont besoin de se sentir délibérément séparées.
Vous voulez voir les styles de mouvement côte à côte avant de vous engager ? le Guide des effets d'animation des éléments aperçoit les plus courants, et le Procédure pas à pas de la boîte à feuilles mobiles 3D va plus en profondeur sur les paramètres de perspective derrière les options Cube et Flip 3 d.
Étape 5 : Écrivez la face avant
Ouvrir Boîte avant. C'est le visage qui doit gagner le vol stationnaire, donc il reçoit moins de copies que vous ne le pensez, pas plus.
- Style d'icône et icône. Tirez depuis la bibliothèque d'icônes ou passez à une image. Master Addons expédie des informations supplémentaires bibliothèques d'icônes au-delà de Font Awesome si vous en avez besoin.
- Titre. Trois à cinq mots Il doit survivre sur une ligne à la largeur de la tablette.
- Description. Une ligne Les champs titre et description ont tous deux un Écrire avec IA option intégrée au panneau si vous êtes coincé.
- Alignement et titre HTML Tag. H1 à H6. définissez ceci correctement Une grille de six boîtes à feuilles mobiles avec des titres H2 à l'intérieur d'une section qui a déjà un H2 vous donne sept H2 sur la page et un outil d'audit qui le signale Le même soin s'applique à tout bloc répété dans un disposition personnalisée de l'élémenteur.
Étape 6 : Écrivez le visage arrière
Mêmes champs, travail différent. Boîte arrière prend sa propre icône, titre, description, alignement et balise de cap, de sorte que les deux visages n'ont pas à correspondre du tout.
La règle qui garde cette section utile : le devant fait une promesse, le dos la tient. Si le recto indique “Web Design”, le verso indique ce qui est réellement inclus et les liens vers la page Quelqu'un a plané parce que le recto les a attrapés Remboursez ça avec de l'information, pas un autre slogan.
Deux ou trois phrases Plus longue et la carte se sent à l'étroit à la largeur de la tablette, où la carte est plus étroite mais le texte n'a pas rétréci.
Étape 7 : Ajoutez le bouton d'action
Le Bouton d'action section définit une étiquette et un lien, et le bouton rend sur la face arrière uniquement Définir le texte à ce que la page suivante livre réellement. “En savoir Plus” est bien. “Voir La tarification” est meilleure, lorsque le lien va à la tarification.
Sauter entièrement le bouton sur une grille purement informative Une carte qui bascule sur une description et s'arrête est une carte parfaitement bonne Ajoutez-la lorsque la section fait un travail de conversion.
Le seul paramètre qui corrige la plupart des plaintes de boîte à feuilles mobiles
Passer au Style onglet et ouvrez Général. Il y a un contrôle appelé Hauteur de la boîte à rabat.
Réglez-le.
Laissez-le non réglé et chaque carte se taille à la face qui a plus de contenu, donc la carte redimensionne à mi-hauteur lorsque la face arrière la plus longue se retourne La rangée saute Les cartes qui devraient correspondre finissent à des hauteurs différentes car une description de service a couru deux lignes plus longtemps que le reste La documentation Flipbox répertorie cela comme sa première astuce de travail, et c'est le paramètre le plus souvent laissé seul.
200 px est un sol sensé. 350 px convient à la plupart des grilles de fonctionnalités Réglez-le une fois au niveau du conteneur et chaque carte de la rangée correspond.
Pendant que vous êtes en Général, gardez la durée de l'animation entre 400 ms et 700 ms. Lectures plus rapides comme un pépin Plus lentement et le curseur a évolué avant la fin du flip.
Coiffant les deux visages
En dessous du général, vous vous séparez Boîte avant et Boîte arrière panneaux, chacun avec sa propre couleur de fond ou image, les couleurs de titre et de description, la typographie et la couleur des icônes.
Rendez les deux visages véritablement différents. Un devant gris pâle se retournant vers un dos gris légèrement plus pâle ressemble à un défaut de rendu plutôt qu'à une révélation. La plupart des modèles atterrissent sur une teinte douce à l'avant et la couleur de la marque à l'arrière, ce qui rend le retournement évident de l'autre côté de la pièce.
Stylez les états normaux et de survol du bouton pour qu'ils correspondent aux boutons partout ailleurs sur le site Un bouton de la boîte à feuilles mobiles qui ne ressemble en rien à vos autres CTA se lit comme une publicité intégrée.
Rendre toute la carte cliquable
Par défaut le lien se trouve sur le bouton, pas la carte Les gens essaient de cliquer sur le corps de la carte, rien ne se passe, et ils partent C'est une petite chose qui coûte de vrais clics.
Le correctif n'est pas dans le widget Flipbox C'est le Lien d'emballage extension(en), un module séparé que vous activez sous les paramètres de Master Addons, qui enveloppe n'importe quel élément dans un seul lien Allumez-le, puis appliquez-le sur le conteneur de la boîte à retournement.
Une mise en garde : si la carte entière se lie quelque part et que le bouton se lie ailleurs, celui que le visiteur frappe en premier gagne et l'autre ne s'utilise jamais Pointez-les à la même destination, ou laissez tomber le bouton.
Mobile : la partie qui surprend les gens
Les téléphones n'ont pas de vol stationnaire Le retournement se déclenche à la place. Le premier clic retourne la carte vers l'arrière, le deuxième clic la ramène à la maison et le bouton a besoin de son propre coup une fois que l'arrière s'affiche.
Cela fait deux tapotements avant que quiconque n'atteigne votre appel à l'action Sur le bureau, le visage arrière coûte un mouvement de curseur Sur mobile, cela coûte un effort délibéré, et une part significative des visiteurs ne le dépensent jamais.
La deuxième pression est également l'endroit où les choses se brisent Les rapports d'une boîte à retournement qui se retourne vers l'avant mais ne se retournera pas reviennent régulièrement dans les threads de la communauté Elementor, et l'aperçu de l'éditeur ne reproduit pas le comportement tactile de manière suffisamment fiable pour le tester sur un vrai combiné avant votre expédition, car le mode réactif dans l'éditeur ne vous le montrera pas.
Ce qui conduit à la règle qui compte plus que n'importe quel choix de style ici :
Ne mettez jamais les informations essentielles uniquement sur le dos. Si un visiteur mobile doit l'avoir, un prix, un numéro de téléphone, une adresse ou un lien de réservation va au recto, ou quelque part de la carte entièrement Traiter le visage arrière comme un endroit pour plus de détails, pas pour tout ce dont la page dépend.
La carte évolue et s'enroule sur les points d'arrêt, et la hauteur est réactive, vous pouvez donc la serrer pour mobile en mode réactif d'Elementor Si la grille se brise à une largeur que vous n'aviez pas prévue, vérifiez le points d'arrêt de l'élémenteur standard d'abord, puis ajoutez points d'arrêt personnalisés si vous avez besoin de tailles Elementor n'expédie pas.
Accessibilité, honnêtement
Une boîte à feuilles mobiles cache la moitié de son contenu derrière une interaction qu'un utilisateur de clavier et un lecteur d'écran ne peuvent pas effectuer comme un utilisateur de souris. Cela vaut la peine d'être trié avant la mise en ligne de la section, pas après.
Deux choses le rendent défendable :
- Ajouter un état de focalisation visible ainsi, un utilisateur de clavier parcourant la page peut voir et déclencher la carte.
- Rendez le contenu arrière accessible d’une autre manière(en anglais), une section proche, une page liée, un bloc pliable Si le seul chemin vers votre description de service est un survol, certains visiteurs n'ont pas de chemin.
Les moteurs de recherche indexent le texte de la face arrière, puisqu'il se trouve dans le DOM plutôt que de charger à la demande, donc cacher la copie derrière un flip ne la retire pas de la page en ce qui concerne l'exploration. La question de savoir si une personne peut l'atteindre est une question distincte, et celle à laquelle répondre en premier.
Quand sauter la boîte à feuilles
Trois situations où un widget différent vous sert mieux.
Le texte arrière compte pour chaque lecteur. Si tout le monde a besoin de la description, ne les faites pas planer pour elle Un Infobox affiche une icône, un titre et une ligne de copie sans rien de caché et sans interaction à tester sur quatre appareils.
Vous voulez la motion, pas le deuxième visage. Si l'appel est un effet de survol astucieux et que vous n'avez pas de véritable contenu secondaire, le Transforme l'extension ajoute un mouvement 3 D à n'importe quel élément sans inventer de copie pour remplir un visage que personne n'a demandé.
La page bouge déjà. Parallaxe, défiler révèle, un héros animé, et maintenant une grille de cartes à retourner Passé un certain nombre de mouvement un visiteur arrête d'enregistrer l'un quelconque de celui-ci, et chaque effet est plus de travail pour le navigateur Compter ce qui est déjà sur la page avant d'en ajouter plus, et s'il est en train de charger lentement, et fixez la vitesse avant d'ajouter une autre animation.
Et un soft cap qui vaut le respect : plus de six ou huit boîtes à feuilles mobiles sur une page se transforment en gadget Une ou deux sections est le point idéal.
Gratuit contre Pro
Le widget Flipbox est dans le plugin gratuit Chaque variation de design, chaque animation, les deux visages stylisés indépendamment, sites illimités Pro ne déverrouille pas le flip box, il déverrouille d'autres choses autour de lui.
| Caractéristique | Gratuit | Pro |
|---|---|---|
| Widget Flipbox, toutes les variantes de conception | Oui | Oui |
| Plus de 30 animations flip | Oui | Oui |
| Style séparé pour les deux visages | Oui | Oui |
| Flip Box Hauteur et commandes réactives | Oui | Oui |
| Extension Wrapper Link | Oui | Oui |
| Bibliothèque complète de 80+ widgets | Partiel | Oui |
| Kits de générateur de widgets et de modèles | Non | Oui |
| Soutien prioritaire | Communauté | Oui |
Si la boîte à feuilles mobiles est ce que vous êtes venu chercher, libre est la réponse entière Si vous reconstruisez la même disposition de carte sur les sites clients, le Constructeur de widgets l'enregistre une fois en tant que widget réutilisable, et cela se trouve sur le niveau payant. Répartition complète sur le page de tarification& une vue plus large de ce qui est disponible d'autre dans notre tour d'horizon des addons Elementor.
Questions fréquemment posées
Qu'est-ce qu'un flip box dans Elementor ?
Une boîte à feuilles mobiles est une carte à deux faces Le recto montre une icône ou une image avec un titre, et sur le vol stationnaire ou le toucher, il tourne vers une face arrière avec une description plus longue et généralement un bouton Il est utilisé pour les grilles de service, les cartes d'équipe, les tuiles de caractéristiques et les cartes de statistiques, partout où une vue de face propre plus un détail en option bat un bloc de texte.
Le widget flip box est-il gratuit dans Elementor ?
Le propre widget Flip Box d'Elementor fait partie d'Elementor Pro, il n'est donc pas gratuit Le widget Flipbox Master Addons est inclus dans le plugin gratuit sur WordPress.org et fonctionne avec Elementor ordinaire, vous pouvez donc en construire un sans licence Pro.
Comment ajouter un widget flip box dans Elementor ?
Activez Flipbox sous Addons principaux → Paramètres → Éléments, puis ouvrez une page dans l'éditeur Elementor, tapez“Flipbox” dans la recherche de widgets, et faites-la glisser dans un conteneur S'il n'apparaît pas dans la recherche, la bascule n'est pas encore activée ou l'éditeur a besoin d'un rechargement.
Pourquoi mon flip box ne revient-il pas sur mobile ?
Sur un écran tactile le flip tourne sur tap plutôt que sur hover, donc le premier tap montre le dos et un deuxième tap devrait le retourner Lorsque le deuxième tap ne fait rien, c'est généralement un conflit dans la gestion des taps Test sur un appareil réel plutôt que sur le mode responsive, gardez une carte par rangée pendant que vous l'isolez, et ne placez jamais les informations à voir absolument uniquement sur la face arrière.
Puis-je utiliser une image au lieu d'une icône sur le devant ?
Oui. Changez le style d'icône dans la section Boîte avant pour utiliser une image, ou choisissez une variante de conception basée sur une image. L'onglet Style définit également une image d'arrière-plan pour chaque visage, de sorte que les cartes entièrement dirigées par une image sont simples.
Puis-je rendre toute la boîte à feuilles cliquables, pas seulement le bouton ?
Pas de l'intérieur du widget Le lien se trouve sur le bouton par défaut Pour rendre la carte entière cliquable, activez l'extension Wrapper Link dans les paramètres Master Addons et appliquez-la au conteneur de la boîte à feuilles mobiles, qui enveloppe la carte entière dans un seul lien.
Comment puis-je garder les deux côtés de la carte de la même taille ?
Définir la hauteur de la boîte à retournement dans la section Général de l'onglet Style Il donne aux deux faces une hauteur fixe, de sorte que la carte ne redimensionne pas à mi-chemin lorsque la face arrière porte plus de texte que la face avant.
Combien d'animations flip a le widget ?
Plus de trente, y compris Flip Horizontal et Vertical, les quatre directions Cube, Flip 3 d, Fade, Fade Up, Rollover, les directions de diapositives et Diagonal Vous en choisissez une par carte.
Lecture connexe
- Comment créer des animations Flipbox d'élémenteur 3D
- Documentation du widget Flipbox: chaque contrôle, dans l'ordre
- Effets d'animation d'élémenteurs
- Widget de point d'accès d'image, pour mettre en évidence les zones à l'intérieur d'une image plutôt que de retourner des cartes entières
- Widget Infobox: l’alternative statique où rien ne doit être caché
- Modèles de sections Elementor gratuits pour importer et éditer
