Le widget Flip Box vous aide à créer des boîtes animées qui se retournent de l’autre côté une fois que les utilisateurs agissent. Vous pouvez créer une boîte à bascule Elementor en cliquant et en survolant les deux. Vous pouvez personnaliser les deux côtés de la flip box à l'aide de ce widget.
Note: Vous devrez installer Elementor et ElementsKit pour suivre le processus. Si vous avez besoin d'aide pour installer et activer ElementsKit Pro, consultez le Guide d'installation d'ElementsKit.
Comment ajouter la flip box au site WordPress à l'aide d'ElementsKit #
Suivez les étapes décrites ci-dessous pour ajouter facilement une flip box à votre site WordPress à l'aide d'ElementsKit et Élémentor:
Étape 1 : Activer le widget Flip Box #
Aller vers ElementsKit ⇒ widgets ⇒ widget flip box, allumer le widget, et cliquez sur Enregistrer les modifications.
Étape 2 : Faites glisser et déposez le widget #
Modifiez la page avec l’option Modifier avec Elementor. Alors recherche pour le widget flip box avec l'icône Ekit et simplement faites glisser et déposez le widget sur la page.
Étape 3. Personnalisez les paramètres #
Développez le menu Flip box pour modifier les paramètres suivants :
- Retourner: Vous disposez de quatre options pour retourner : retourner, zoomer, glisser et 3D.
- Direction de retournement : Plusieurs options sont disponibles pour la direction d'inversion. Cependant, l'option apparaîtra en fonction de la valeur que vous sélectionnez pour l'option Retourner.
- Déclencheur à bascule : Ici, vous pouvez choisir l'option qui déclenchera le flip. Trois options sont disponibles : survol, clic sur la boîte et clic sur un bouton.
- Hauteur de la boîte rabattable : Vous pouvez ajuster la hauteur de la flip box à l’aide de cette option.
Sous Flip box height, vous trouverez deux onglets FRONT et BACK. Sélectionnez l’une des options pour personnaliser les éléments de la flip box pour chaque côté. Vous retrouverez la même option des deux côtés.
Les options que vous pouvez personnaliser pour chaque côté de la flip box incluent :
- Type de support: Vous pouvez choisir une icône ou une image. Vous pouvez également choisir l'option Aucun si vous ne souhaitez ajouter aucun fichier multimédia..
- Icône/Choisir le fichier : En fonction de l'option que vous choisissez pour le type de média, vous pouvez choisir l'icône/l'image ici.
- Titre: Donnez un titre.
- Sous-titre: Vous pouvez ajouter un sous-titre ici.
- Description à retourner : Rédigez une description pertinente en utilisant cette option.
- Alignement: Vous pouvez définir l’alignement à gauche, au centre ou à droite.
Une fois que vous avez fini de préparer le contenu des deux côtés de votre flip box, il est temps de modifier le style.
Étape 4 : Stylisez votre flip box #
Passez maintenant à l'onglet Style et développez chacune des sections pour modifier les options de style associées :
Emballage : Sous le wrapper, vous pouvez personnaliser le type d'arrière-plan, la couleur, l'emplacement, la deuxième couleur, l'emplacement, le type, l'angle, etc. Vous pouvez personnaliser les options pour le recto et le verso de la flip box.
Icône: Si vous développez cette option, vous pouvez modifier la couleur, le type d'arrière-plan, l'ombre de la boîte, le type de bordure, etc. pour la vue normale et la vue survolée. Vous pouvez personnaliser le style de l’icône à la fois pour l’avant et l’arrière de la flip box.
Titre: Ici, vous pouvez personnaliser la typographie, la couleur du titre et la marge du titre des deux côtés de la flip box.
Sous-titre: Développez cette option pour personnaliser la typographie, la couleur du titre et la marge du sous-titre des deux côtés de la flip box.
Description: Ici, vous pouvez personnaliser la typographie, la couleur de la description et la marge de la description des deux côtés de la flip box.
Bouton: Développez la section des boutons pour personnaliser la couleur du texte, la couleur d'arrière-plan, le type de bordure, le rayon de bordure, la zone de bordure et bien d'autres options. Vous pouvez styliser le bouton pour les vues normales et survolées.
Enfin, cliquez sur publier/mettre à jour pour enregistrer les modifications et prévisualiser votre flip box Elementor :