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 considérablement améliorer 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 allons explorer ce qu'est Flipbox, le rôle des superpositions et des survols Flipbox dans les sites WordPress, et vous fournir 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 pivote lorsque l'utilisateur la survole. Il comprend généralement deux côtés, 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 les survols de 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é qui offre cette fonctionnalité. Plusieurs plugins Flipbox sont disponibles, mais deux choix populaires sont les plugins Elementor et ElementsKit Flipbox . 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 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 : Activer le widget Flip Box

Pour ce faire, connectez-vous à votre tableau de bord d'administration WordPress et accédez à ElementsKit ⇒ widgets ⇒ flip box widget , activez le widget et cliquez sur Save Changes .

Étape 2 : Faites glisser et déposez le widget

Modifiez la page en sélectionnant l'option Modifier avec Elementor. Ensuite, recherchez le widget flip box avec une icône Ekit et faites simplement 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 de retournement. Il y a quatre options : Retourner, Zoomer, Glisser et 3D. Chacun a un style différent.

• Direction du retournement : cela détermine la direction dans laquelle l'animation de retournement ira. Selon le type de retournement que vous avez choisi, vous verrez différentes options pour la direction dans laquelle il peut basculer.

• Flip Trigger : c'est ainsi que vous réalisez le retournement. Vous pouvez choisir entre trois options : Hover (lorsque vous déplacez votre souris dessus), Box Click (lorsque vous cliquez sur la case) ou Button Click (lorsque vous cliquez sur un bouton spécifique).

• Hauteur de la boîte de retournement : vous pouvez modifier la hauteur de la boîte de retournement. À 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 boîte à rabat, 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 pas ajouter d'images).

• 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 du retournement : écrivez une description ou une explication pour ce côté de la boîte de retournement.

• Alignement : Décidez si vous voulez 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 boîte à rabat, 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 :

Wrapper : 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 l'emballage. Les options pour les côtés avant et arrière de la boîte à rabat peuvent être personnalisées.

Icône : En développant 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 normales et en survol. Les extrémités avant et arrière de la boîte à rabat peuvent avoir des styles d'icônes personnalisés.

Titre : À partir d'ici, vous pouvez modifier la typographie , la couleur du titre et la marge du titre pour les deux côtés de la boîte de retournement.

Sous-titre : modifiez cette option pour personnaliser la typographie, la couleur du titre et la marge du titre du sous-titre pour les deux côtés de la boîte à rabat.

Description : Ici, vous pouvez personnaliser la typographie, la couleur de la description et la marge de la description pour les deux côtés de la boîte à rabat.

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 la bordure, la zone de bordure et d'autres paramètres. Le bouton peut être stylisé pour les vues régulières et de survol.

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

Tableau facile à utiliser

Meilleures superpositions Flipbox et plugin de survol pour WordPress

Voici mon aperçu de deux superpositions Flipbox populaires et de plugins de survol pour WordPress côte à côte. Ce sont les plugins Elementor et ElementsKit Flipbox. Regarde

Plugin Elementor Flipbox

Elementor est un plugin de création de page 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 Elementor, vous pouvez facilement ajouter des effets de retournement interactifs à vos images, icônes, titres et descriptions. Le plug-in fournit une interface conviviale dans laquelle vous pouvez personnaliser la direction de 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 nombreuses options de style et sa compatibilité avec différents thèmes.

Plugin ElementsKit FlipboxComment

ElementsKit est un package complémentaire complet pour Elementor qui améliore ses fonctionnalités. Il existe 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. Le plug-in ElementsKit Flipbox fournit également des options de personnalisation supplémentaires. Vous pouvez avoir différents styles de Flipbox, des effets de superposition, des effets de survol et divers événements déclencheurs. Il s'intègre de manière transparente à 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 ont des interfaces conviviales et de nombreuses options de personnalisation. 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 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 qui offrent 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 Flipboxes.

Comment créer une flip box dans WordPress ?

Vous pouvez créer une flip box dans WordPress en utilisant des 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 changer l'apparence lors du survol d'un élément d'image.

Comment afficher le contenu au survol dans WordPress ?

Vous pouvez afficher du contenu au survol dans WordPress en utilisant différentes méthodes. Une façon consiste à utiliser CSS pour afficher le contenu masqué lors du survol d'un élément spécifique. Alternativement, les plugins Flipbox offrent souvent des options pour afficher différents contenus sur les côtés avant et arrière de la Flipbox, visibles au survol.

Conclure

L'ajout de superpositions et de survols Flipbox à votre site WordPress peut considérablement améliorer 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 pour pimenter votre site Web avec des superpositions et des survols Flipbox, et captivez les visiteurs de votre site avec un contenu interactif et visuellement attrayant.