Comment créer des superpositions et des survolages de boîtes de retournement dans WordPress

Voulez-vous ajouter des superpositions de boîtes de retournement 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. Dans ce cas, vous pouvez utiliser des boîtes de retournement et des survols d'image pour ajouter des effets animés accrocheurs à votre site.

Dans cet article, nous vous montrerons comment ajouter des superpositions de boîtes de retournement et des survols d'image à votre site WordPress.

Qu'est-ce qu'une boîte de retournement ?

Une boîte de retournement est une boîte qui se retourne lorsque vous la survolez avec votre souris. Vous pouvez ajouter cet effet de survol à du contenu tel que des images et des zones de texte.

Similaire à d'autres contenus animés tels que les GIFs et les curseurs réactifs, l'effet de boîte de retournement peut le rendre plus interactif et engageant. Par exemple, vous pourriez afficher la photo d'un auteur et son nom, puis utiliser une animation de boîte de retournement pour révéler sa biographie lorsque le lecteur la survole.

Si vous êtes un freelance WordPress, vous pourriez afficher les logos de vos clients, puis utiliser une animation de retournement pour révéler 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 en abuser. Un grand nombre d'animations peut devenir écrasant et déroutant, et peut même affecter les performances de votre site web.

Cela dit, examinons comment vous pouvez ajouter des superpositions de flipbox et des effets de survol d'image à votre site web WordPress.

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

Il existe de nombreuses façons d'ajouter des animations à WordPress, notamment en utilisant le constructeur de pages SeedProd ou en écrivant du code personnalisé.

Cependant, la meilleure façon de créer des effets de flipbox et de survol est d'utiliser le plugin Flipbox – Awesomes Flip Boxes Image Overlay. Ce plugin gratuit propose plusieurs styles de flipbox différents, combinant images, texte et boutons d'appel à l'action.

Créer une nouvelle Flipbox

La première chose à faire est d'installer et d'activer le plugin Flipbox – Awesomes Flip Boxes Image Overlay. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Une fois le plugin installé et activé, vous pouvez créer votre première flipbox en allant dans Flip Box » Créer une nouvelle.

Cela affiche tous les différents modèles que vous pouvez utiliser.

Si vous ne souhaitez utiliser aucun de ces designs, cliquez sur « Importer des modèles ».

Si vous voyez un modèle que vous souhaitez utiliser, cliquez sur « Importer » pour l'ajouter à votre blog WordPress ou à votre site web.

Après avoir choisi un design, vous devez cliquer sur son bouton « Créer un style ».

Dans la fenêtre contextuelle qui apparaît, tapez un nom pour la conception de la boîte à bascule. Ceci est juste pour votre référence, vous pouvez donc utiliser ce que vous voulez.

Vous pouvez également choisir la mise en page à utiliser en cliquant sur la 1ère, 2ème ou 3ème.

Une fois cela fait, cliquez sur « Enregistrer ».

Ajouter du contenu à votre Flipbox

Vous pouvez modifier l'apparence de la flipbox à l'aide des onglets Général, Avant et Arrière.

Vous pouvez modifier les polices, le remplissage et les marges. La plupart de ces paramètres sont explicites, il est donc utile de les parcourir pour voir les différents effets que vous pouvez créer.

Lorsque vous êtes satisfait de l'apparence de la boîte, il est temps d'ajouter du contenu. Faites simplement défiler jusqu'à l'aperçu de la flipbox en bas de l'écran et placez votre souris dessus.

Lorsqu'il apparaît, cliquez sur le bouton « Modifier ».

Pour modifier le titre qui apparaît à l'avant de la flipbox, vous pouvez le taper dans le champ « Titre avant ».

Après cela, vous pouvez modifier l'icône avant en cliquant sur le champ « Icône de police » puis en choisissant une nouvelle image dans la fenêtre contextuelle qui apparaît.

Ensuite, vous pouvez ajouter une image à l'avant de la boîte à bascule. Cliquez simplement sur « Télécharger une image », puis choisissez un fichier dans la médiathèque ou téléchargez une nouvelle image depuis votre ordinateur.

Si vous n'avez pas encore d'image que vous souhaitez utiliser, vous pouvez en créer une à l'aide d'un logiciel de conception web tel que Canva.

Lorsque vous êtes satisfait de la boîte à bascule avant, il est temps de concevoir l'arrière. Pour commencer, tapez le contenu que vous souhaitez afficher dans la zone « Informations de fond ».

Souvent, vous voudrez utiliser un appel à l'action pour envoyer les visiteurs vers une page connexe, telle que la liste d'un produit populaire, les informations sur les prix ou tout autre contenu.

Pour modifier le texte qui apparaît sur le bouton d'appel à l'action, tapez simplement dans « Texte du bouton de fond ». Vous pouvez ensuite ajouter l'URL de destination dans le champ « Lien ».

Enfin, cliquez sur « Télécharger maintenant » pour changer l'image d'arrière-plan.

Lorsque vous êtes satisfait de la configuration de l'arrière de la boîte à bascule, il est temps de cliquer sur « Soumettre ».

L'aperçu sera maintenant mis à jour pour afficher toutes vos modifications.

Créer plusieurs boîtes à bascule

À ce stade, vous voudrez peut-être ajouter d'autres boîtes en cliquant sur le « + » dans la section « Ajouter de nouvelles boîtes à bascule ».

Cela vous permet de créer plusieurs flipboxes avec le même style, puis de les organiser en colonnes et en lignes.

Vous pouvez maintenant créer d'autres boîtes à bascule en suivant le processus décrit ci-dessus.

Par exemple, vous pourriez créer une boîte à bascule pour chacun de vos plans tarifaires.

Ajoutez la boîte à bascule à votre site web WordPress

Lorsque vous êtes satisfait de la boîte à bascule, vous pouvez l'ajouter à votre site web WordPress à l'aide d'un shortcode que le plugin fournit automatiquement.

Sur le côté droit de votre écran, copiez simplement la valeur dans la zone « Shortcode ».

Vous pouvez maintenant ajouter la boîte à bascule à n'importe quelle page, publication ou zone prête pour les widgets en utilisant le shortcode.

Pour des instructions étape par étape sur la façon de placer le shortcode, veuillez consulter notre guide sur comment ajouter un shortcode dans WordPress.

Le plugin dispose également d'un widget flipbox que vous pouvez ajouter à n'importe quelle zone prête pour les widgets de votre thème WordPress.

Si vous avez créé plus d'une animation flipbox, vous aurez besoin de connaître l'ID. Pour obtenir ces informations, vous pouvez aller dans Flip Box » Flip Box et regarder dans la colonne « ID ».

Dans l'image suivante, l'ID de la flipbox est 1.

Une fois que vous avez ces informations, allez dans Apparence » Widgets.

Ici, vous devez cliquer sur le bouton « + ».

Vous pouvez maintenant taper « Flipbox ».

Lorsque le bon widget apparaît, faites-le simplement glisser et déposez-le sur la barre latérale, le pied de page ou une section similaire.

Le widget Flipbox affichera l'une de vos animations par défaut.

Pour afficher une autre flipbox à la place, tapez son ID dans le champ.

Lorsque vous êtes satisfait de l'apparence du widget, cliquez sur « Mettre à jour ».

Pour plus d'informations, veuillez consulter notre guide sur comment ajouter et utiliser des widgets dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter des superpositions et des survolages flipbox à votre site WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment créer une galerie d'images, ou voir notre sélection d'experts des meilleurs plugins de slider WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.