Elementor est un puissant générateur de pages qui vous permet de créer des sites Web époustouflants en toute simplicité, et son widget Flipbox de base offre un moyen simple d'ajouter des effets 3 D interactifs Le problème ? C'est une fonctionnalité pro, les designs et les animations sont limités.
Master Addons est un puissant addon Elementor qui fournit également un widget flipbox C'est gratuit et permet une plus grande personnalisation que le widget Elementors Flipbox.
Avec Master Addons, vous pouvez créer des boîtes à feuilles mobiles 3 D à frappe visuelle qui déplacent, transforment et engagent les utilisateurs d'une manière que le widget Elementor par défaut ne peut tout simplement pas.
Dans ce guide, nous allons vous montrer comment créer des boîtes à clapet 3 D de premier ordre avec des addons principaux et créer des designs accrocheurs qui se démarquent.
Création d'un Flipbox Élémenteur 3 D avec des modules complémentaires principaux
Allons brique par brique et créons le nôtre flipbox utilisant Additions maîtres. À la fin, vous devriez avoir une compréhension très claire de la façon de créer votre propre unique.
Étape 1 : Installation des modules complémentaires principaux pour l'élémenteur
Avant de pouvoir commencer à utiliser le widget Master Addons Flipbox, vous devrez installer et activer le plugin Master Addons Voici comment :
1. dans votre tableau de bord WordPress, rendez-vous sur Plugins > Ajouter Nouveau.
2. Recherchez “Master Addons for Elementor” dans la barre de recherche.
3. Cliquez Installez maintenant et puis Activer une fois le plugin installé.
Une fois activés, les widgets Master Addons, y compris le Flipbox, seront disponibles dans l'éditeur Elementor.
Étape 2 : Ajout du widget Flipbox
Maintenant que le plugin est installé, ajoutons le Flipbox à votre page
1. ouvrez votre page dans l'éditeur Elementor Choisissez Flexbox ou grille comme mise en page.
2. Sur le panneau de gauche, recherchez le Flipbox. Vous devriez voir un widget Flipbox avec une “MABalise”.
3. Faites glisser et déposez le Flipbox widget dans la section souhaitée de votre page Une chose importante à noter ici est que chaque fois que vous travaillez avec des boîtes à feuilles mobiles c'est recommandé d'utiliser Flexbox pour vous assurer que vos boîtes à feuilles volantes ont l'air bien.
Une fois ajouté, un design de base de flipbox apparaît sur votre toile, prêt à être personnalisé.
Étape 3 : Création d'un Flipbox Élémenteur 3 D
Nous avons maintenant atteint les paramètres que vous pouvez modifier pour obtenir un effet 3D haut de gamme sur votre boîte à feuilles mobiles.
Tout d’abord.
1. Préréglage de style
Dans le préréglage de style, vous définissez le variation de conception et style d'animation
La variante de conception vous permet de personnaliser le devant de votre boîte Vous pouvez le régler sur : Défaut, Image, Diagonale, Icône Avant.
Avec le style d'animation, vous pouvez choisir exactement comment votre flipbox sera animée.
Les addons principaux ont plus de 20 animations premium disponibles Du simple retournement horizontal et vertical au Animations de retournement 3D, de cube(en), effets de retournement, etc.
Master Addons vous offre une animation flip 3 D dédiée qui donne à vos flipbox une sensation dynamique Vous pouvez même personnaliser le style flip de cette animation Une fois que vous l'aurez choisi, une nouvelle option apparaîtra dans les“Styleonglet” sous Paramètres généraux : Style de retournement 3D.
2. Contenu avant
Cliquez sur le Flipbox widget pour le modifier.
Sous le Contenu tab, vous verrez des champs pour ajouter votre contenu pour le Avant Boîte. Vous pouvez ajouter ici un titre, une description et une image ou une icône.
3. Contenu arrière
Faites défiler jusqu'au Retour Contenu section dans le même Contenu onglet.
De même, ajoutez le contenu que vous souhaitez apparaître lorsque la boîte à feuilles est inversée Vous pouvez ajouter un nouveau titre, du texte ou un bouton d'appel à l'action.
Vous pouvez styliser les deux côtés de la boîte à feuilles séparément, en utilisant le Style onglet pour ajuster les polices, les couleurs, le rembourrage, les bordures et bien plus encore de chaque côté.
Étape 4 : Amélioration des Flipbox 3 D avec d'autres extensions
Master Addons for Elementor ne s'arrête pas seulement à la fonctionnalité de base de la boîte à feuilles mobiles. Il amène votre boîte à feuilles mobiles à un tout nouveau niveau avec une variété d'extensions conçues pour ajouter de l'interactivité, des animations fluides et des effets engageants.
Nous explorerons les fonctionnalités puissantes qui vous permettent d'améliorer votre flipbox, la rendant plus dynamique, visuellement captivante et conviviale.
Que vous souhaitiez créer des transformations 3 D avancées, ajouter des effets de parallaxe ou affiner les animations d'entrée, Master Addons offre tout ce dont vous avez besoin pour faire passer vos boîtes à feuilles mobiles au niveau supérieur.
Transformées :
- Dans le Avancé tab, tu trouveras le Transforme paramètres.
- Ici, vous pouvez ajuster le rotation flipbox sur les axes X, Y, ou Z pour créer des effets 3 D plus complexes.
- Jouer avec échelle, traduire, et biais options pour une boîte à feuilles encore plus dynamique.
Rellax (effet parallaxe) :
- Pour activer l'effet Rellax, allez au Avancé onglet et défilement vers le Rellax paramètres.
- Activer l'effet et ajuster le vitesse de défilement pour créer un effet de parallaxe, où la boîte à feuilles se déplace à une vitesse différente de celle du reste du contenu lorsque les utilisateurs défilent.
Effets flottants :
- Ajoutez des effets flottants (Pro) pour faire dériver doucement la boîte à feuilles mobiles en boucle Cette option se trouve sous le Effets de mouvement section.
- Choisissez le type de mouvement (par exemple, flotter vers le haut ou vers le bas) et ajustez l'intensité à votre goût.
Conseils d'outils :
- Master Addons vous permet également d'ajouter Boutures d'outils à votre boîte à feuilles, qui apparaissent lorsque les utilisateurs survolent les éléments Les info-bulles peuvent fournir des informations ou un contexte supplémentaires sans encombrer votre conception.
- Vous pouvez activer et personnaliser les info-bulles pour le contenu avant et arrière de la boîte à feuilles mobiles dans les paramètres avancés.
- Personnalisez le texte, la position (en haut, en bas, à gauche ou à droite) et le style de l'info-bulle (couleurs, taille de la police) pour les adapter à votre conception.
Quelques autres extensions utiles
- Sous le Effets de mouvement onglet, activer Animation d'entrée pour appliquer un effet d'attention lorsque la boîte à feuilles apparaît sur la page.
- Vous pouvez choisir parmi diverses animations comme le fondu entrant, la diapositive ou le rebond pour faire apparaître votre flipbox lorsqu'elle entre dans la fenêtre d'affichage.
- Si vous souhaitez une animation de révélation fluide lorsque la boîte à feuilles est retournée, activez le Révéler option sous le Avancé paramètres.
- Cette fonctionnalité permet de révéler progressivement le contenu arrière de la boîte à feuilles mobiles, créant ainsi une transition raffinée.
- Utilisation Conditions d'affichage pour définir des règles pour quand et où la boîte à feuilles apparaît Vous pouvez contrôler la visibilité en fonction des types d'appareils (bureau, tablette, mobile) ou même des conditions comme la position de défilement.
Aperçu et finalisation de votre Flipbox
Une fois que vous avez personnalisé votre flipbox, il est temps de la voir en action.
- Cliquez sur le icône oculaire au bas du panneau Élémenteur pour prévisualiser votre flipbox dans l'éditeur.
- Testez le comportement de la boîte à feuilles mobiles sur différents appareils (ordinateur de bureau, tablette et mobile) pour vous assurer qu'elle est réactive et qu'elle est superbe partout.
- Effectuez tous les derniers ajustements à la conception, aux vitesses d'animation ou à la position jusqu'à ce que vous soyez satisfait de son apparence.
Une fois satisfait, cliquez Publier pour faire vivre votre flipbox sur votre site.
Conclusion
Master Addons for Elementor ajoute plus de piquant à l'expérience standard de la boîte à feuilles mobiles, offrant une gamme de fonctionnalités avancées qui vous permettent de créer des designs vraiment dynamiques et interactifs.
Pour aller avec les effets d'animation 3 D il y a des options comme les transformations, les effets de parallaxe, les transitions de révélation en douceur, et plus encore, vous pouvez utiliser pour donner vie à vos boîtes à feuilles mobiles d'une manière qui va au-delà des animations de base.
En suivant ce guide, vous pouvez facilement ajouter des boîtes à clapet accrocheuses à votre site, améliorant à la fois l'engagement des utilisateurs et l'attrait visuel. Alors, plongez dans Master Addons et commencez à expérimenter pour créer de superbes boîtes à clapet 3 D qui impressionneront vos visiteurs !
