Widget FlipBox Elementor : créez des cartes volantes interactives (tutoriel gratuit)

Le Widget FlipBox Élémenteur transforme une carte d'information statique en quelque chose que les visiteurs veulent réellement survoler Le recto montre une icône ou une image avec un petit titre En vol stationnaire, le verso se retourne avec une description et un bouton Aucun code requis.

Ce tutoriel vous guide à travers le widget FlipBox livré avec Modules complémentaires principaux pour Elementor[traduction], un plugin gratuit utilisé sur plus de 40 000 sites Web Vous obtenez 4 variantes de conception, plus de 20 animations flip, un contrôle typographique complet et un bouton d'action approprié à l'arrière La plupart fonctionnent dans la version gratuite.

À la fin, vous aurez une section de boîte à feuilles mobile fonctionnelle sur votre page WordPress, une idée de l'animation qui correspond à quelle tâche et une idée plus claire du moment où une boîte à feuilles est le bon appel (et du moment où elle est exagérée).

Qu'est-ce qu'un widget FlipBox dans Elementor ?

Une boîte à feuilles mobiles est une carte à deux faces Les visiteurs voient une face en premier, et en vol stationnaire (ou en appuyant, sur mobile) la carte tourne pour montrer une deuxième face avec plus de détails Pensez carte de visite qui tourne lorsque vous agitez votre main dessus.

Elementor n'expédie pas de boîte à feuilles mobiles hors de la boîte, vous avez donc besoin d'un addon. Le Widget FlipBox de Master Addons vous donne la face avant, la face arrière et un bouton à l'arrière, tous modifiables à partir du panneau Elementor habituel Pas de codes courts, pas de code modèle.

Le widget gère trois tâches : le contenu frontal (icône, image ou cap), le contenu arrière (description et bouton) et l'animation flip entre eux. Tout passe par des commandes visuelles.

Pourquoi utiliser une FlipBox au lieu d'une carte d'information statique ?

Une carte d'information régulière montre tout à la fois Cela fonctionne, mais cela mâche l'espace vertical et les visiteurs le scannent juste après. UN boîte à feuilles mobiles dans Elementor fait quelques choses qu'une carte statique ne peut pas :

• Économise l'espace vertical. La face arrière porte votre description plus longue, donc la face avant reste courte.
• Attire l'attention. Le mouvement attire l'œil Les cartes thermiques montrent systématiquement que les éléments interactifs obtiennent plus de temps de vol stationnaire que les éléments statiques.
• Coupe la charge de lecture. Les visiteurs ne voient la copie détaillée que s'ils le souhaitent. Pratique pour les grilles de fonctionnalités de six ou huit éléments.
• Pilote les clics. Le côté arrière a un bouton, donc l'interaction se termine par une prochaine étape claire.

Si votre section a beaucoup de copie, une boîte à feuilles mobiles aide Si c'est une ligne de texte avec une photo, une carte statique est bien Utilisez des boîtes à feuilles mobiles où le gain est soit une explication plus longue, soit un CTA direct.

Comment ajouter le widget FlipBox à Elementor (étape par étape)

Configuration complète ci-dessous Cela suppose qu'Elementor est déjà installé Si ce n'est pas le cas, prenez d'abord la version gratuite du répertoire du plugin WordPress.

Étape 1 : Installez les modules complémentaires principaux pour l'élémenteur

Dans votre administrateur WordPress, accédez à Plugins → Ajouter un nouveau et recherchez les “Master Addons for Elementor.” Installez, activez, done. Le installation de Master Addons doc a la version plus longue si quelque chose se casse.

Étape 2 : Faites glisser le widget FlipBox dans votre mise en page

Ouvrez la page dans Elementor Dans le panneau du widget à gauche, tapez“FlipBox” dans le champ de recherche Vous le verrez avec l'icône Addons principaux Faites-le glisser dans n'importe quelle colonne.

Elementor charge une boîte à feuilles par défaut au moment où vous la déposez Survolez-la dans l'aperçu pour voir le retournement en action avant de changer quoi que ce soit, Cela vaut la peine d'être fait car cela vous donne une idée de la vitesse d'animation par défaut.

Étape 3 : Configurer la boîte avant

L'onglet Contenu comporte trois sections : Boîte avant, Boîte arrière et Bouton d'action Commencez par le recto, puisque c'est ce que les visiteurs voient en premier.

Intérieur Boîte avant vous pouvez définir:

• Icône: choisissez dans la bibliothèque d'icônes Elementor ou téléchargez un SVG. Master Addons est également livré avec 8 premium bibliothèques d'icônes si Font Awesome ne suffit pas.
• Titre: le titre sur le devant Gardez-le à 3 mots pour qu'il tienne sur une ligne.
• Titre HTML Tag: H2, H3, H4, div, span Utilisez H3 ou H4 si la boîte à feuilles se trouve à l'intérieur d'une section qui a déjà un H2 (sinon vous brisez votre hiérarchie de cap et les outils de référencement le signaleront).
• Texte / Sous-titre: une courte ligne de support Une phrase max.

Étape 4 : Configurer la boîte arrière

Le Boîte arrière utilise les mêmes champs plus une zone de description C'est là que vit la vraie information, alors donnez-vous de la place pour écrire.

• Icône ou image: facultatif. De nombreux designers sautent l’icône arrière et laissent respirer la description.
• Titre: souvent la même chose que le recto, mais il peut différer Une question au recto avec la réponse au verso fonctionne bien pour les appels de fonctionnalités.
• Description: 2 phrases3. Plus rien de long et la carte semble exiguë, surtout sur tablette.

Étape 5 : Ajouter un bouton d'action (facultatif mais recommandé)

Le bouton n'apparaît que sur la face arrière Faites défiler vers Bouton d'action et remplissez:

• Texte du bouton:“En savoir plus,” Démarrer,” “Voir Tarification.” Faites correspondre la copie à ce que propose réellement la page suivante.
• URL du lien: interne ou externe. Toggle“ Ouvrir dans un nouvel onglet” et “Ajouter nofollow” si nécessaire.

Sautez le bouton si la boîte à feuilles mobiles est purement informative (comme une grille de présentation des fonctionnalités).Ajouter si la carte se trouve dans un section axée sur la conversion où vous voulez un prochain clic.

4 variantes de conception FlipBox expliquées

Le widget Master Addons FlipBox a quatre designs intégrés Chacun change la façon dont la face avant est disposée La face arrière reste la même sur les quatre.

1. Icône avant (par défaut). Icône, titre et sous-titre centrés. Convient aux grilles de fonctionnalités, aux blocs de service et aux propositions de valeur.
2. Image frontale. Remplace l'icône par une image complète. Bon pour les membres de l'équipe, les tuiles de portefeuille et les cartes de produits.
3. Diagonale. Fend le devant en biais Regard moderne Utilisez-le avec parcimonie, une rangée de flipbox par page max, puisque l'angle se bat avec tout ce qui l'entoure si vous le répétez trop souvent.
4. Centré. Disposition minimaliste avec tout empilé verticalement. Se lit proprement sur des fonds sombres.

Choisissez une variante en fonction de ce que le recto doit dire Si l'icône porte le message, collez-la avec l'icône du recto Si une photo fait mieux le travail, passez à l'image du recto Pas beaucoup plus à elle.

Plus de 20 animations Flip que vous pouvez utiliser

Sous la section Général de l'onglet Style, vous obtenez un dropdown avec plus de 20 animations flip L'animation contrôle la façon dont la carte révèle le dos.

Les plus courants:

• Flip (Horizontal/Vertical): le retournement classique de la carte 3 D. Par défaut sûr pour la plupart des cas d'utilisation.
• Glisser (Gauche/Droite/Haut/Bas): la face arrière pousse l'avant vers l'extérieur Snappy, fonctionne bien sur mobile.
• Zoom avant/Zoom arrière: une révélation basée sur une échelle Utile lorsque vous voulez que la carte ait l'impression qu'elle est en train de popping en avant.
• Fade: l'option la plus simple Bon choix lorsque d'autres éléments de la page sont déjà animés.
• Poussez (Gauche/Droite/Haut/Bas): le dos glisse tandis que le devant glisse en séquence.
• Variantes de retournement 3D: ajoutez de la perspective pour un retournement plus dramatique. Le Guide FlipBox Élémenteur 3D a une visite plus profonde de ces paramètres.

Conseil pratique: Restez fidèle à un style d'animation par page Si votre grille de boîte à feuilles mobiles comporte six cartes et que chacune d'elles bascule différemment, la section semble chaotique Choisissez-en une, commit to it. Mélangez les styles uniquement lorsque vous souhaitez que deux sections clairement distinctes se sentent différentes l'une de l'autre.

Vous voulez voir à quoi ressemble chacun avant de vous engager ? le Guide des effets d'animation des éléments a des aperçus côte à côte des styles les plus courants.

Coiffage de l'avant, de l'arrière et du bouton

Passez à l'onglet Style et vous obtenez quatre panneaux pliables : Général, Boîte avant, Boîte arrière et Bouton d'action Chacun a sa propre couleur, typographie, espacement et contrôles aux frontières.

Ce qui compte le plus dans chaque panel :

Général

Définir l'ensemble hauteur de la boîte à feuilles mobiles (200 px est un minimum raisonnable, 350 px semble approprié pour les grilles de fonctionnalités), le rayon frontière& le vitesse d'animation. Gardez la durée de l'animation entre 400 ms et 700 ms. Tout ce qui est plus rapide semble nerveux Tout ce qui est plus lent semble lent, et les visiteurs éloigneront leur curseur avant la fin du flip.

Boîte avant

Couleur ou dégradé de fond, couleur d'icône, taille d'icône, typographie de titre, typographie de sous-titres et rembourrage interne. Faites correspondre le fond à votre marque La plupart des créateurs utilisent une teinte douce (gris clair, bleu pâle) sur le devant et conservez la couleur forte pour le dos.

Boîte arrière

Mêmes commandes que le devant, mais c'est là que vit habituellement la couleur de votre marque Faites que le dos soit visuellement distinct du devant pour que le flip ressemble à une véritable révélation, pas à un subtil changement de teinte Un flip blanc à violet se lit mieux qu'un flip gris clair à gris légèrement plus léger.

Bouton d'action

Couleur du texte, arrière-plan, couleur de vol stationnaire, bordure, remplissage et typographie Utilisez le même style de bouton que vous utilisez ailleurs sur la page afin qu'il ne semble pas déplacé Si vos boutons CTA principaux sur le site sont en violet uni avec du texte blanc, faites en sorte que le bouton de la boîte à feuilles mobiles corresponde à ceux-ci.

6 Cas d'Utilisation Pratique pour le Widget Elementor FlipBox

Le monde réel place le widget gagne sa garde :

1. Grilles de service. Front : icône et nom du service Retour : description d'une phrase et un bouton“Learn More” reliant à la page du service.
2. Présentoirs de fonctionnalités. Front : icône de fonctionnalité Retour : explication sur deux lignes et un lien vers la page complète de fonctionnalité.
3. Cartes de membre de l'équipe. Front : photo et nom Retour : bio et un lien vers leur page d'auteur ou LinkedIn.
4. Points forts des prix. Front : nom du plan. Retour : trois premières fonctionnalités et un bouton au complet tableau tarifaire.
5. Le style FAQ révèle. Front : question. Retour : réponse courte. Convient aux pages de destination où un accordéon plein semble trop lourd.
6. Vignettes de portefeuille. Front : image du projet Retour : nom du client, type de projet, et un bouton de”“View Case Study.

Si vous voulez quelque chose de plus visuel pour le travail de portefeuille, le Widget de point d'accès d'image est un meilleur ajustement lorsque vous devez mettre en évidence des zones spécifiques à l'intérieur d'une seule image au lieu de retourner des cartes entières.

Conseils de conception qui convertissent réellement

Les choses qui valent la peine d'être connues en regardant de vrais sites utilisent le widget :

• Gardez l'avant simple. Icône, titre de 3 mots, sous-titre de 1 ligne Voilà. Les visiteurs scannent le recto, ils ne le lisent pas.
• Mettez la vraie valeur au dos. Quelqu'un planait parce que quelque chose sur le devant les attrapait Récompensez le vol stationnaire avec quelque chose d'utile, pas plus de peluches marketing.
• Correspondre aux hauteurs sur une rangée. Une boîte à feuilles à 280 px à côté d'une à 320 px donne l'impression que la rangée est cassée Définissez une hauteur fixe dans la section Général.
• Test sur mobile. Sur les appareils tactiles, le premier tapotement retourne la carte et le second tapotement suit le lien du bouton Assurez-vous que le flux en deux étapes fonctionne avec un vrai pouce, pas seulement avec une souris.
• Ne les abusez pas. Plus de 6 boîtes à feuilles mobiles sur une seule page commencent à sembler fantaisistes. Une ou deux sections par page sont le point idéal.

Note d'accessibilité : Les Flipbox reposent sur le survol, que les lecteurs d'écran et les utilisateurs de clavier ne peuvent pas déclencher de la même manière qu'un utilisateur de souris. Assurez-vous que le contenu arrière est également disponible ailleurs sur la page (une section pliable, une page dédiée, un H2 à proximité) ou ajoutez un état de mise au point visible afin que les utilisateurs de clavier puissent également retourner la carte. C’est la chose la plus courante oubliée par les concepteurs de WordPress.

Gratuit vs Pro : ce que vous obtenez

Le widget Master Addons FlipBox est en version gratuite Vous pouvez télécharger le plugin à partir du répertoire WordPress et l'utiliser sur des sites illimités Pro débloque plus de widgets et d'extensions autour de lui, pas la boîte à feuilles elle-même.

Si vous avez seulement besoin de la boîte à feuilles, la gratuité suffit Si vous voulez le plein Plus de 80 bibliothèques de widgets, constructeur de thèmes, générateur de popup et kits de modèles, jetez un œil à Prix Master Addons Pro.

Foire aux questions

Envelopper

Le Widget FlipBox Élémenteur est l'un de ces petits ajouts qui frappe au-dessus de son poids Une rangée de boîtes à feuilles mobiles propre peut remplacer tout un bloc de texte, tirer plus de temps de vol stationnaire, et toujours charger rapidement L'astuce est la retenue : gardez le devant simple, mettez la valeur au dos, et choisissez un style d'animation par section.

Pour une couverture plus approfondie des paramètres, le documentation officielle de FlipBox parcourt chaque option Et si vous souhaitez que plus de widgets interactifs s'associent à elle, le Guide des bibliothèques d'icônes d'éléments est une bonne prochaine lecture.

Lecture connexe: Fonctionnalités d'animation Master Addons | Widgets marketing d'élémentor | Widget de table de tarification des éléments