Si vous êtes à la recherche d'un tutoriel sur la façon de créer des flip boxes dans WordPress, nous avons un guide complet pour vous.
Ce qu'il vous faut, c'est savoir comment en créer une à partir de rien. Mais avant cela, apprenons quelques détails sur les flip boxes.
Qu'est-ce qu'une boîte de dialogue dans WordPress ?
A flip box dans WordPress est un élément de contenu interactif qui combine du texte et des éléments visuels avec un effet d'animation.
Il comporte généralement deux faces. Il est généralement utilisé pour présenter un texte de manière créative, combiné à un effet de bascule hypnotique.
Les gens ajoutent des flip boxes car ils constituent un élément engageant et interactif fortement recommandé pour attirer immédiatement l'attention des visiteurs.
Examinons maintenant d'autres scénarios concernant les boîtes Flip.
Créer de belles tables
Avec l'éditeur de blocs
Pourquoi utiliser des boîtes de dialogue dans les sites Web WordPress ?
Les folioscopes sont un élément de conception puissant qui peut rehausser le contenu de votre site WordPress de plusieurs façons. Voici pourquoi il vaut la peine de les utiliser :
- Attirer l'attention: Les boîtes à clapet attirent l'attention des visiteurs comme un aimant et suscitent leur curiosité, les encourageant à explorer davantage.
- Mettre en évidence les informations clés: Les boîtes à rabat vous permettent de présenter les détails importants de manière précise au recto et d'offrir des explications ou des détails supplémentaires au verso, ce qui rend le contenu plus complet.
- Présenter élégamment Conentent : Les flip boxes vous permettent de présenter votre contenu de manière élégante. Au lieu d'un texte simple ou de boîtes statiques, les flip boxes offrent une manière élégante de présenter des services, des profils d'équipe, des CTA, etc.
Maintenant que vous avez pris connaissance des avantages de l'utilisation des flip boxes sur votre site web, nous allons passer au tutoriel principal ci-dessous.
Comment créer des boîtes de dialogue dans WordPress
Étant donné que WordPress ne dispose pas d'un bloc de base pour créer une boîte de retournement, nous utiliserons un plugin tiers appelé Flipbox.
Flipbox dispose d'une collection d'effets CSS3 pour rendre les flipbox plus attrayants. Il fonctionne avec n'importe quel constructeur de pages et est responsive par défaut.
Étape 1 : Installer la Flipbox
La première étape consiste à installer le plugin Flipbox en vous connectant au tableau de bord de votre site web. Naviguez ensuite vers Plugins (1) > Ajouter un nouveau plugin (2). Recherche Flipbox (3) et installer le plugin (4).
N'oubliez pas d'activer le plugin après l'installation.
Étape 2 : Créer vos boîtes à rabats
Cliquez maintenant sur Flip Box (1) et Créer un nouveau après cela (2).
Sélectionnez le style de votre choix sur la page et cliquez sur "Créer un style". Si vous faites défiler la page vers le bas, vous verrez de nombreux styles.
Donner un nom dans votre flip box (1)et sélectionnez l'option numéro du schéma. Les se trouvent dans la section Styles que vous avez déjà vu (Chaque style a trois présentations). Enfin, cliquez sur le bouton Économiser bouton (3).
Étape 3 : Personnaliser votre Flip Box
Toutes les options sont destinées à la personnalisation. Personnalisez-les en fonction de vos besoins. L'aperçu est présenté ci-dessous sur la même page.
Sélectionnez l'option "Ouvrir les boîtes à rabats à partir de" pour insérer votre contenu.
Saisir le Titre avant (1) et Icône frontale (2)Enfin, cliquez sur Télécharger l'image pour télécharger une image pour le front (3).
Descendez sur la même page et entrez le code suivant Informations sur le backend ou texte détaillé du contenu (1) et le Texte du bouton du backend (2). Vous pouvez également saisir le lien du bouton si vous voulez (3). Ensuite, vous devez définir une image pour l'image d'arrière-plan du backend en cliquant sur le bouton "Télécharger l'image” (4).
Après avoir tout configuré, appuyez sur le bouton "Soumettrebouton " (1).
Vous pouvez ajoutez d'autres flip boxes si vous le souhaitez. Suivre les lignes directrices de l'"étape 3" à plusieurs reprises pour ajouter d'autres flip-boxes à la flip-boxe actuelle.
Vous pouvez également modifier ou supprimer vos cases de retournement également. Vous pouvez voir les options en plaçant votre curseur sur les flip boxes.
Après toutes les modifications et personnalisations, cliquez sur "Poste par ligne” (1) pour définir le nombre de flip boxes que vous souhaitez afficher à la fois par ligne. J'ai sélectionné trois éléments car je souhaite afficher trois éléments par ligne. Maintenant, appuyez sur la touche Soumettre bouton (2).
Ensuite, vous devez enregistrer votre Flip Box. Il suffit de cliquer sur le bouton Enregistrer (1).
Étape 4 : Insérer le shortcode Flip Box
Aller à Flip Box (1) et copier le shortcode (2).
Allez dans vos articles ou pages où vous souhaitez afficher la boîte de retournement. Pour ce faire, naviguez jusqu'à Messages (1) > Tous les messages (2) et modifier ce message ou cette page (3). N.B. Il en va de même pour l'édition d'une page, mais vous devez vous rendre à l'adresse suivante Pages > Toutes les pages d'abord.
Pour insérer le flip box, vous devez insérer le fichier Bloc de codes courtscliquez sur l'icône "+" (Add Block Icon) dans l'éditeur (1), et tapez "Code court"dans la boîte de recherche (2). Cliquez sur l'icône "Shortcode" (code court) pour l'insérer dans l'éditeur(3).
Collez maintenant le shortcode (1) et enregistrez ou publiez votre article ou votre page.
Voici la démo ci-dessous.
Dernières réflexions !
La création de flip boxes dans WordPress est un moyen facile d'améliorer le design et l'engagement de votre site web. Les flip boxes sont un ajout simple qui peut laisser une impression durable sur votre public.
En suivant les étapes ci-dessus, vous pouvez facilement intégrer des éléments dynamiques et visuellement attrayants qui ont une apparence professionnelle et améliorent la façon dont les visiteurs interagissent avec votre contenu.
J'espère que les lignes directrices ont été faciles à suivre. Mais si vous avez rencontré des difficultés, faites-le moi savoir dans la section des commentaires ci-dessous. Je me ferai un plaisir de vous aider.
N'oubliez pas non plus de partager ce tutoriel avec vos amis sur les réseaux sociaux.
Lire la suite
- Comment ajouter une boîte de commentaires aux articles/pages de WordPress en 2 façons faciles
- Comment rendre l'en-tête d'un tableau collant sur WordPress (3 étapes faciles)
- Comment changer la couleur de survol d'un bouton sur WordPress en 3 étapes faciles
- Comment créer un tableau réactif dans WordPress
- Comment ajouter un bouton à bascule à votre site WordPress
