Une carte qui se retourne en vol stationnaire affiche deux fois le contenu dans le même espace Le gratuit Widget Flipbox dans Modules complémentaires principaux pour Elementor vous offre une boîte recto-verso : une face avant avec une icône, un titre et une description, et une face arrière qui se retourne avec son propre texte et un bouton.
Vous choisissez une animation, remplissez les deux faces, ajoutez un bouton, puis stylisez chaque côté Il y a 22 effets de retournement : 6 dans le plugin gratuit et 16 autres avec Master Addons Pro, d'un simple fondu à un cube 3 D. Ce guide parcourt chaque paramètre du widget.
Ce que fait le widget Flipbox #
Le widget construit une carte à clapet à partir de deux faces Le Boîte avant est ce que les visiteurs voient en premier : une icône ou une image, un titre et une description Survolez-la et la carte se retourne vers le Boîte arrière(en), qui a son propre titre, sa propre description, et un bouton qui peut se lier n'importe où.
Trois onglets exécutent le tout. Contenu maintient l'animation, le texte avant et arrière et le bouton. Style gère la hauteur de la boîte, les bordures, les couleurs et la typographie de chaque visage. Avancé est l'espacement et la visibilité habituels des éléments.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Le texte et les icônes des deux faces, ainsi que le lien pour le bouton arrière.
Comment ajouter le widget Flipbox #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Flipbox(ou faites défiler vers la section Addons principaux) (les widgets portent un badge MA violet).Drag it on the page and it loads with a sample front and back you can edit.
Définir le style d'animation #
Ouvrir le Contenu onglet. Le Style Préréglé la section détient le Variation de conception et le Style d'animation« Et en dessous se trouvent les sections Front Box, Back Box et Action Button ».
Le Style d'animation dropdown est la partie amusante Il transporte 22 options, de sorte que la même carte peut se retourner, s'estomper, glisser ou se frayer un chemin vers la face arrière Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade et Fade Up sont gratuits ; le reste a besoin de Pro.
- Retourner horizontalement et retourner verticalement : la carte classique bascule sur chaque axe.
- Cube (haut en bas, bas en haut, gauche à droite, droite à gauche) : une rotation de cube 3 D entre faces (Pro).
- Fade and Fade Up (gratuit), Flip and Rollover 3 d (Pro) : softer révèle quand vous voulez quelque chose de subtil.
- Directions de glissement et diagonale (Pro) : poussez la face arrière d'un côté ou d'un coin.
Configurez la boîte avant #
Ouvrir le Boîte avant section. C'est le visage que les gens voient avant de planer, donc il doit gagner le flip.
- Style d'icône et icône : choisissez une icône dans la bibliothèque Une image sur le devant est livrée avec la variante de conception Front Image dans Pro.
- Titre et description : le titre avant et le texte, chacun avec une option Écrire avec IA.
- Alignement et titre HTML Tag : alignez le contenu et définissez le niveau de cap (H1 à H6).
Configurez la boîte arrière #
Ouvrir le Boîte arrière section pour le visage qui se retourne vers la vue Il prend les mêmes champs que le devant, donc un court teaser devant peut mener au vrai détail au dos.
- Icône: une icône séparée pour la face arrière.
- Titre et description : le titre et le texte du verso.
- Alignement et HTML Tag : disposition et niveau de cap pour le dos.
Ajouter le bouton d'action #
Le Bouton d'action section vit sur la face arrière Définissez l'étiquette et l'endroit où elle pointe, de sorte qu'un survol peut mener directement à un produit, un formulaire ou une autre page.
- Texte du bouton : le label, comme Get Started ou Learn More.
- Lien vers: L'URL que le bouton ouvre, avec les options habituelles de lien Elementor.
Stylez la carte à clapet #
Ouvrir le Style onglet. Le Général section fixe la frontière et, le cadre qui compte le plus ici, le Hauteur de la boîte à rabat(en), qui donne aux deux faces une taille fixe.
Sous Général, vous vous séparez Boîte avant et Boîte arrière sections. Chacune a sa propre couleur d'arrière-plan ou image, les couleurs de titre et de description, la typographie et la couleur des icônes, de sorte que les deux visages ne peuvent rien se ressembler si vous le souhaitez.
Cas d'utilisation courants #
- Cartes de service avec une icône sur le devant et les détails plus un bouton au dos.
- Membres de l'équipe montrant une photo sur le devant et une bio sur le revers.
- Faits saillants du produit cela révèle le prix et un bouton Acheter en vol stationnaire.
- Grilles caractéristiques où chaque carte passe à une brève explication.
- Carreaux de portefeuille avec une vignette à l'avant et un lien de projet à l'arrière.
Conseils pour travailler avec le widget Flipbox #
- Réglez une hauteur fixe. La hauteur de la boîte à rabat conserve les deux faces de la même taille, de sorte que la carte ne saute pas lorsqu'elle bascule. Laissez-le non réglé et une face arrière plus longue redimensionnera la carte en plein vol, qui regarde.
- Gardez le texte en arrière court. Le dos se retourne rapidement, donc une ligne serrée et un bouton se lisent mieux qu'un paragraphe complet.
- Faites correspondre l'animation à l'ambiance. Le fondu convient à une page calme ; le Flip et le Cube 3 D conviennent à un héros audacieux.
- Contraste les deux visages. Une couleur d'arrière-plan différente au dos rend le retournement évident en un coup d'œil.
- Liez toujours le bouton. Le bouton arrière est le gain, alors pointez-le à l'étape suivante.
Voir le tutoriel vidéo #
Préférez suivre à l'écran ? le didacticiel vidéo ci-dessous parcourt l'élément Flipbox du début à la fin, montrant comment fonctionnent les styles d'animation, les faces avant et arrière et le style dans l'éditeur Elementor.
Foire aux questions #
Qu'est-ce que le widget Flipbox dans Master Addons ?
C'est un widget Elementor qui construit une carte à deux faces La face avant montre une icône, un titre et une description, et sur le vol stationnaire, elle se retourne vers une face arrière avec son propre texte et un bouton Tout est défini à partir du panneau Elementor sans code.
Combien d'animations flip le widget Flipbox a-t-il ?
Le dropdown Animation Style comprend 22 effets, 6 gratuits et 16 avec Pro, tels que Flip Horizontal, Flip Vertical, Fade, Fade Up, Rollover, 3 d Flip, les variantes Cube, les directions des diapositives et Diagonal Vous en choisissez un par carte pour contrôler l'apparence de la face arrière.
Puis-je ajouter un bouton à la carte à clapet ?
Oui. La section Bouton d'action dans l'onglet Contenu définit l'étiquette du bouton et son lien Le bouton se trouve sur la face arrière, il indique donc quand la carte se retourne, ce qui en fait un endroit naturel pour envoyer des visiteurs vers un produit ou un formulaire.
Puis-je utiliser une image au lieu d'une icône sur le devant ?
Oui. Utilisez la variante de conception Front Image, une option Master Addons Pro, pour mettre une image sur le devant. L'onglet Style vous permet également de définir une image d'arrière-plan pour l'un ou l'autre visage, de sorte que les cartes à feuilles mobiles dirigées par une image sont faciles à construire.
Comment puis-je conserver les deux côtés de la carte à clapet de la même taille ?
Définissez la hauteur de la boîte à rabat dans la section Général de l'onglet Style. Il donne aux deux faces une hauteur fixe, de sorte que la carte reste de la même taille avant et après le retournement au lieu de redimensionner pour s'adapter au contenu de chaque côté.
Envelopper #
Le widget Flipbox transforme une carte plate en une carte interactive : choisissez une animation, remplissez les faces avant et arrière, liez le bouton, puis stylisez chaque côté. Pour les widgets associés, consultez le Widget de boîte d'informations et le Widget Membre de l'équipe: parcourez le tableau complet Widgets et extensions Master Addons& voir le Page du widget Flipbox pour les démos et une comparaison avec l'Elementor Pro Flip Box.
