Comment créer des superpositions et des survols Flipbox dans WordPress 

Lorsqu’il s’agit de concevoir un site WordPress attrayant et engageant, l’ajout d’éléments interactifs peut améliorer considérablement l’expérience utilisateur. La Flipbox est l'un de ces éléments qui vous permet d'afficher du contenu de manière dynamique et interactive. 

Dans cet article de blog, nous explorerons ce qu'est Flipbox, le rôle des superpositions et des survols Flipbox dans les sites WordPress, et vous fournirons un guide étape par étape sur la façon d'ajouter des superpositions et des survols Flipbox dans WordPress.

Qu’est-ce que Flipbox ?

Une Flipbox est une fonctionnalité de conception qui vous permet de fournir du matériel sous la forme d'une boîte qui se retourne ou tourne lorsque l'utilisateur la survole. Il comprend généralement deux faces, le recto et le verso, avec un contenu différent de chaque côté. 

Rôle des superpositions et des survols Flipbox dans le site WordPress

Les superpositions et survols Flipbox peuvent aider à améliorer l’expérience utilisateur et l’attrait visuel de votre site WordPress. Ils vous permettent d'attirer l'attention sur des détails importants, de mettre en évidence des fonctionnalités ou d'exposer vos photos et vidéos de manière dynamique. Vous pouvez rendre votre site plus attrayant, stimuler l'engagement des utilisateurs et améliorer l'esthétique globale de la conception en incluant des superpositions et des survols Flipbox. 

Un guide étape par étape pour ajouter Flipbox au site WordPress 

Pour ajouter des superpositions et des survols Flipbox à votre site WordPress, vous aurez besoin d'un plugin approprié offrant cette fonctionnalité. Plusieurs plugins Flipbox sont disponibles, mais deux choix populaires sont Élémentor et ElementsKit Flipbox plugins. Ces plugins offrent des options faciles à utiliser et une variété de paramètres de personnalisation pour créer de superbes effets Flipbox. Installer et activer un plugin ce n’est pas sorcier. Vous pouvez le faire facilement en suivant quelques étapes. 

Revenons maintenant à l'ajout de Flipbox à votre site. Voici 4 façons simples et faciles de le faire.

Étape 1 : Activation du widget Flip Box

Pour ce faire, connectez-vous à votre tableau de bord d'administration WordPress et accédez à 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 en sélectionnant l’option Modifier avec Elementor. Alors, recherche pour le widget flip box avec une 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 : 

0. Options de retournement : Vous pouvez choisir l'apparence de l'animation inversée. Il existe quatre options : retourner, zoomer, glisser et 3D. Chacun a un style différent.

• Direction de retournement : Cela détermine la direction dans laquelle se déroulera l'animation de retournement. Selon le type de retournement que vous avez choisi, vous verrez différentes options quant à la direction dans laquelle il peut basculer.

• Déclencheur à bascule : C’est ainsi que vous réalisez le retournement. Vous pouvez choisir entre trois options : survol (lorsque vous déplacez votre souris dessus), clic sur la boîte (lorsque vous cliquez sur la boîte) ou clic sur un bouton (lorsque vous cliquez sur un bouton spécifique).

• Hauteur de la boîte rabattable : Vous pouvez modifier la hauteur de la flip box. À l’intérieur de ce paramètre, il y a deux onglets : AVANT et ARRIÈRE. Vous pouvez personnaliser le contenu de chaque côté séparément.

Pour chaque côté de la flip box, vous pouvez personnaliser les éléments suivants :

• Type de support: Choisissez si vous souhaitez utiliser une icône, une image ou aucune (si vous ne souhaitez ajouter aucune image).

• Icône/Choisir un fichier : Si vous avez choisi une icône ou une image, vous pouvez sélectionner celle que vous souhaitez utiliser dans une liste ou choisir un fichier sur votre ordinateur.

• Titre: Donnez un titre ou un nom à ce côté de la boîte à rabat.

• Sous-titre: Ajoutez un texte plus petit sous le titre pour donner plus d'informations.

• Description à retourner : Écrivez une description ou une explication pour ce côté de la boîte à rabat.

• Alignement: Décidez si vous souhaitez que le contenu soit sur le côté gauche, au centre ou sur le côté droit.

Une fois que vous avez fini de personnaliser le contenu des deux côtés de la flip box, vous pouvez modifier le style pour lui donner l'apparence que vous souhaitez.

Étape 4 : Formalisez votre flip box

Maintenant, allez dans l’onglet Style et développez chaque section avec les options de style correspondantes :

Emballage : Ici, vous pouvez modifier le type d'arrière-plan, la couleur, l'emplacement, la deuxième couleur, l'emplacement, le type, l'angle, etc. sous le wrapper. Les options pour les côtés avant et arrière de la flip box peuvent être personnalisées. 

Icône: En élargissant cette option. Vous pouvez modifier la couleur, le type d'arrière-plan, l'ombre de la boîte, le type de bordure et d'autres paramètres pour les vues standard et de survol. Les extrémités avant et arrière de la boîte à rabat peuvent avoir des styles d'icônes personnalisés.  

Titre: De là, vous pouvez changer la typographie, Couleur du titre et marge du titre pour les deux côtés de la boîte à rabat.

Sous-titre: Modifiez cette option pour personnaliser la typographie, la couleur du titre et la marge du titre 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 modifier la couleur du texte, la couleur d'arrière-plan, le type de bordure, le rayon de bordure, la zone de bordure et d'autres paramètres. Le bouton peut être stylé pour les vues normales et les vues de survol. 

Enfin, cliquez sur publier/mettre à jour pour enregistrer les modifications et prévisualiser votre flip box Elementor :

Tableau facile à utiliser

Meilleur plugin de superposition et de survol Flipbox pour WordPress 

Voici mon aperçu de deux plugins de superposition et de survol Flipbox populaires pour WordPress côte à côte. Ceux-ci sont Élémentor et ElementsKit Flipbox plugins. Regarde

Plugin Elementor Flipbox

Elementor est un plugin de création de pages largement utilisé et très apprécié pour WordPress. Il propose un widget Flipbox qui vous permet de créer de superbes animations flip sur votre site Web. Avec Élémentor, vous pouvez facilement ajouter des effets de retournement interactifs à vos images, icônes, titres et descriptions. Le plugin fournit une interface conviviale dans laquelle vous pouvez personnaliser la direction du retournement, le style d'animation, l'événement déclencheur (survol, clic) et divers éléments de conception. Elementor est connu pour sa flexibilité, ses options de style étendues et sa compatibilité avec différents thèmes.

Plugin Flipbox ElementsKit

ElementsKit est un package complémentaire complet pour Elementor qui améliore ses fonctionnalités. Il y a un module Flipbox dédié dans ElementsKit. Il ajoute des fonctionnalités et des effets Flipbox plus avancés à votre site Web alimenté par Elementor. Ce plugin offre une vaste bibliothèque de modèles Flipbox préconçus. Cela vous permet de créer rapidement des animations flip visuellement attrayantes. ElementsKit Flipbox Le plugin fournit également des options de personnalisation supplémentaires. Vous pouvez avoir différents styles Flipbox, effets de superposition, effets de survol et divers événements déclencheurs. Il s'intègre parfaitement à Elementor et offre une expérience utilisateur transparente pour la conception d'éléments Flipbox captivants.

Le plugin Elementor Flipbox et le plugin ElementsKit Flipbox peuvent être les meilleurs choix pour vous. Ceux-ci apportent des animations flip interactives et attrayantes aux sites Web. Ces plugins disposent d’interfaces conviviales et d’options de personnalisation étendues. De plus, ceux-ci sont compatibles avec le constructeur de pages Elementor. Il n'est pas nécessaire d'écrire des codes. Ainsi, ces plugins vous facilitent la création d’éléments Flipbox visuellement attrayants et interactifs.

Foire aux questions (FAQ)

Comment ajouter un effet de survol dans WordPress ?

Pour ajouter un effet de survol dans WordPress, vous pouvez utiliser CSS ou des plugins offrant des fonctionnalités d'effet de survol. De nombreux constructeurs de pages et plugins de personnalisation offrent des options pour ajouter des effets de survol à divers éléments, y compris les Flipbox.

Comment créer une flip box dans WordPress ?

Vous pouvez créer une flip box dans WordPress à l’aide de plugins Flipbox dédiés comme ElementsKit. Ces plugins vous permettent de créer et de personnaliser facilement des éléments Flipbox sans nécessiter de connaissances en codage.

Comment ajouter une image de survol dans WordPress ?

Pour ajouter une image de survol dans WordPress, vous pouvez utiliser CSS ou des plugins qui fournissent des effets de survol d'image. Ces plugins ont généralement des options pour spécifier une image différente ou modifier l'apparence lorsque vous survolez un élément d'image.

Comment afficher le contenu au survol dans WordPress ?

Vous pouvez afficher le contenu au survol dans WordPress en utilisant différentes méthodes. Une solution consiste à utiliser CSS pour afficher le contenu masqué lorsque vous survolez un élément spécifique. Alternativement, les plugins Flipbox offrent souvent des options pour afficher différents contenus sur les faces avant et arrière de la Flipbox, visibles au survol.

Conclure

L'ajout de superpositions et de survols Flipbox à votre site WordPress peut améliorer considérablement l'expérience utilisateur et rendre votre contenu plus attrayant. En suivant le guide étape par étape décrit dans cet article de blog et en utilisant des plugins Flipbox populaires comme ElementsKit, vous pouvez facilement créer de superbes effets Flipbox sans aucune connaissance en codage. Alors allez-y, pimentez votre site Web avec des superpositions et des survols Flipbox, et captivez les visiteurs de votre site avec un contenu interactif et visuellement attrayant.