Comment créer des effets Flipbox dans WordPress

Vous souhaitez ajouter des superpositions de flipbox et des effets de survol d’image à votre site WordPress ? Même si vous utilisez un thème WordPress de haute qualité, vous pourriez vous sentir limité par les options de personnalisation. Les Flipbox et les survols d’image ajoutent des effets animés accrocheurs à votre site. Dans cet article, on vous présente comment ajouter des superpositions de flip box et des survols d’image sur votre site WordPress.

Qu’est-ce qu’une Flipbox?

Une flipbox est une boîte qui se retourne lorsque vous amenez votre souris dessus. Vous pouvez ajouter cet effet d’animation de survol à des sections spécifiques de votre site Web, y compris des zones de texte et des images.

Le terme vient de la fonction unique de «retournement» qui se produit lorsque la souris survole l’image. Vous pouvez contrôler la façon dont l’image se retourne, ainsi que les informations et la conception des deux côtés de l’image.

Si votre site Web est relativement statique, vous pouvez utiliser un effet flipbox pour le rendre plus interactif. Par exemple, vous pouvez ajouter un flipbox de survol d’image à une page de prix de produit. De cette façon, lorsque les utilisateurs survolent vos niveaux de tarification, le prix s’affiche.

Ou, si vous êtes un pigiste, vous pouvez ajouter des logos de l’entreprise avec laquelle vous avez travaillé et créer un lien vers chaque projet. Bien que ces effets animés puissent améliorer l’expérience utilisateur de votre site Web, il est important de ne pas aller trop loin.

Pensez à l’effet flipbox comme ajouter un assaisonnement à un repas. C’est là pour rehausser les saveurs et les ingrédients existants, mais trop et ça ruinera le plat.

Comment vous pouvez ajouter des flipbox et des effets de survol d’image à votre site Web WordPress ?

Dans la suite de cet article, on vous présente les quelques techniques à suivre afin d’ajouter en l’espace de quelques minutes seulement, de beaux effets flibpox à votre site internet WordPress.

Comment créer des superpositions Flipbox et des effets de survol dans WordPress

Vous pouvez ajouter des flipbox et des effets de survol à votre site WordPress en utilisant de nombreuses méthodes telles que le générateur de page Elementor ou en ajoutant du CSS personnalisé. Cependant, l’approche que nous recommandons utilise le plugin Flipbox – Awesomes Flip Boxes Image Overlay. Ce plugin est flexible et facile à utiliser. C’est le meilleur plugin WordPress de flipbox et de survol d’image.

La version gratuite du plugin vous offre rapidité et simplicité. Une fois le plugin installé, vous pouvez rapidement ajouter de belles flip boxes à votre site. Si vous avez besoin de plus d’options de personnalisation, vous voudrez peut-être passer à la version premium du plugin. Cela vous permet de contrôler les couleurs de vos flipbox et d’ajouter du CSS personnalisé.

Vous constaterez peut-être que les modèles existants ont déjà fière allure lorsqu’ils sont ajoutés à votre site. Dans ce cas, aucune mise à niveau n’est nécessaire. Une fois le plugin installé et activé, vous pouvez créer votre première flipbox en allant sur Flip Box »Créer nouveau.

Cela fait apparaître toute la sélection de modèles. Si cela ne suffit pas, vous pouvez cliquer sur l’option de menu « Importer des modèles » pour encore plus de modèles que vous pouvez utiliser.

Découvrez Flipbox – Awesomes Flip Boxes Image Overlay en version gratuite

Avec la version gratuite du plugin, vous avez le choix entre 5 modèles différents, plus 10 autres modèles que vous pouvez importer. Pour importer un nouveau modèle personnalisable, cliquez sur le bouton «Importer» à côté du numéro de style.

Il est maintenant temps de sélectionner et de commencer à personnaliser votre modèle. Vous devez cliquer sur «Créer un style» pour charger votre premier design flipbox. Cela fera apparaître un menu contextuel dans lequel vous pourrez nommer votre flipbox et choisir la mise en page à personnaliser.

Les 1ère, 2ème, 3ème options de «Mise en page» correspondent aux flipbox individuelles de la mise en page. Cliquez sur « Enregistrer » une fois que vous avez fait vos choix. Il est important de mentionner que votre conception finale correspondra étroitement au modèle de flipbox.

Il est donc préférable de choisir un modèle qui ressemble à ce que vous voulez qu’il ressemble sur votre site Web. Il y a trois onglets principaux que vous utiliserez pour changer l’apparence de votre flipbox, «Général», «Avant» et «Backend».

Sur chacun de ces onglets, vous pouvez modifier les polices, le remplissage et les marges. Mais, nous pensons que les options par défaut ont déjà fière allure. Ensuite, nous allons changer le texte des deux côtés de la flipbox. Survolez la flipbox en bas de l’écran et cliquez sur «Modifier».

Cela fera apparaître une fenêtre contextuelle qui vous permet de modifier le texte avant, le texte arrière et l’image d’arrière-plan. Pour modifier le titre, modifiez la zone de texte «Titre avant» et la zone «Icône de police:» si vous souhaitez qu’une icône différente s’affiche.

Si vous souhaitez ajouter une image d’arrière-plan, cliquez sur « Télécharger l’image » à droite de l’option « Image avant ». Ensuite, téléchargez une nouvelle image ou sélectionnez une image dans votre bibliothèque multimédia existante.

Après cela, vous suivrez la même série d’étapes pour l’arrière de la flipbox sous les \`\` Paramètres du backend  ». Ici, vous pouvez modifier le titre et le texte qui s’affichent lorsque la carte se retourne. Vous pouvez également modifier les champs «Texte du bouton de backend» et «Lien». Ceux-ci modifient le texte du bouton et la destination de vos utilisateurs lorsque l’utilisateur clique dessus.

Enfin, cliquez sur «Télécharger maintenant» pour modifier l’image d’arrière-plan au dos de la flipbox. Comme ci-dessus, vous pouvez soit télécharger une image, soit en sélectionner une dans votre bibliothèque multimédia.

Intégration flipbox sur WordPress :suivez notre tutoriel

Une fois les modifications terminées, assurez-vous de cliquer sur le bouton «Soumettre» pour enregistrer vos modifications. Vous remarquerez que vos nouvelles modifications s’afficheront immédiatement dans la fenêtre «Aperçu». Si vous souhaitez créer une rangée entière de flipbox, cliquez sur l’icône «+» dans la méta-boîte «Ajouter de nouvelles flipbox».

Cela fera apparaître une boîte de dialogue similaire à celle ci-dessus qui vous permet de personnaliser votre deuxième flipbox. Vous avez maintenant créé et personnalisé vos flipbox, il est donc temps de les ajouter à votre site WordPress. Le moyen le plus simple de le faire est d’utiliser le shortcode inclus. Sur le côté droit de votre écran, il y a une méta-boîte intitulée \`\` Shortcode  », copiez le shortcode qui ressemble à l’image ci-dessous.

Ensuite, accédez à une page ou à une publication sur laquelle vous souhaitez ajouter le flipbox et collez votre shortcode. Ensuite, cliquez sur « Publier » ou « Mettre à jour » si votre message est déjà en ligne. Vos nouvelles flipbox seront désormais disponibles sur votre site. Notez que lorsque vous redimensionnez la fenêtre de votre navigateur, les flipbox s’ajustent car ils sont 100% réactifs.

Ce plugin comprend également un widget flipbox que vous pouvez ajouter à n’importe quelle zone de widget prise en charge par votre thème. Pour ce faire, accédez à Apparence »Widgets et trouvez le widget intitulé ‘Flipbox – Superposition d’image de Flip Boxes Awesomes’.

Ensuite, vous pouvez faire glisser et déposer le widget à votre emplacement préféré. Enfin, saisissez l’ID de style, qui se trouve dans le menu principal du plugin Flipbox, et cliquez sur «Enregistrer».

Installer une flipbox sur son site : notre conclusion

Nous espérons que cet article vous a aidé à apprendre comment ajouter des superpositions et des survols flipbox à votre site WordPress. Il s’agit d’une méthode un peu longue mais redoutablement efficace, qui permet de générer des leads et d’offrir une belle expérience utilisateur.

Pour plus d’informations sur WordPress, ne manquez pas notre article sur les façons de corriger les erreurs 28 cURL.