Comment concevoir du contenu à bascule WordPress dans Elementor

basculer wordpress avec elementor

Quelle est la meilleure façon d’afficher du contenu comportant plusieurs sections ou proposant des options ?

Par exemple, une page de tarification peut contenir différents types de systèmes de tarification, tels que des offres mensuelles, annuelles et à vie. Afficher toutes ces offres sur une seule page peut être gênant pour les clients. Ils doivent faire défiler un long chemin vers le bas pour consommer le contenu.

Alors, comment allez-vous trier cela pour rendre la page propre et minimale tout en conservant toutes les informations et le contenu requis ?

C'est là que le contenu à bascule vient à la rescousse. Il vous permet de créer du contenu interactif avec une interface intelligente. 

En ce qui concerne WordPress, il existe de nombreuses façons de créer du contenu à bascule. Cependant, le moyen le plus simple vient avec Elementor. Cet article vous guidera à travers les étapes de création de contenu WordPress Toggle avec Elementor.

Qu'est-ce que le contenu à bascule ?

La fonction de bascule permet à l'utilisateur de contrôler la visibilité du contenu sur une page Web. Le contenu à bascule est généralement utilisé sur les sites Web pour afficher différentes versions ou sections du contenu.

Avec la bascule de contenu, seule une partie du contenu sera visible dans la fenêtre, tandis que les autres seront placées sous un onglet ou un titre. Lorsque les utilisateurs cliquent sur un onglet, le contenu en dessous sera uniquement visible.

Par exemple, une page de tarification qui propose deux offres de tarification, mensuelle et annuelle. Si vous utilisez un contenu à bascule, une seule des offres, mensuelles ou annuelles, sera visible à l'écran. 

Lorsque l'utilisateur clique sur l'onglet mensuel, les offres mensuelles seront visibles. De même, lorsque l'onglet annuel est ouvert, les offres annuelles sont affichées.

Un guide étape par étape pour créer du contenu à bascule Elementor avancé dans WordPress

Bien qu'il existe de nombreux plugins à bascule WordPress disponibles, le moyen le plus simple de créer un bouton à bascule Elementor avancé sur WordPress est fourni avec ElementsKit !

Le widget Advanced Toggle d'ElementsKit ajoute des fonctionnalités supplémentaires à votre contenu de bascule WordPress. Il vous permet d'afficher le contenu de manière plus élégante avec le plus grand nombre d'options personnalisables.

Voici comment créer du contenu à bascule WordPress sophistiqué à l’aide du widget Advanced Toggle d’ElementsKit :

Étape 1 : Choisissez les styles pour le bouton bascule Elementor

Pour utiliser le widget à bascule avancé, tout d’abord, faites glisser et déposez le widget dans votre conception Elementor. Après cela, vous pourrez configurer le contenu à bascule et personnaliser leurs styles.

bascule wordpress

Le widget ElementsKit Advanced Toggle est livré avec deux styles de boutons différents. Non seulement les styles sont différents, mais leurs fonctionnalités sont également différentes. 

Avec le style 1, vous pouvez afficher plusieurs onglets. Sous ces onglets, vous pouvez ajouter du contenu à bascule. Lorsque vous avez plusieurs options à afficher, vous pouvez choisir ce style.

basculer la vue dans Elementor
comment activer la bascule dans wordpress

Le style 2 consiste à basculer entre deux contenus avec un bouton bascule traditionnel. Lorsque vous choisissez ce style, seuls les deux premiers onglets seront affichés. Un bouton à bascule typique apparaîtra pour basculer entre les deux contenus. 

Pour ce didacticiel, vous utiliserez le style 1 pour vous montrer des options plus personnalisables.

Étape 2 : Ajouter des onglets au menu à bascule dans WordPress

Vous pouvez ajouter des onglets en un seul clic à l'aide du widget à bascule ElementsKit Advanced. Pour ajouter un nouvel onglet, cliquez sur le bouton AJOUTER UN ÉLÉMENT. Pour le contenu de chaque onglet, vous pouvez définir le Titre, Couleur d’arrière-plan de l’indicateur, Couleur du titre pour l'effet Normal et Survol pour chaque onglet individuellement. De plus, si vous souhaitez rendre un onglet visible par défaut, vous pouvez activer l'option Gardez cet onglet ouvert fonctionnalité.

bascule avancée dans wordpress

En outre, vous pouvez définir le Alignement pour basculer les onglets vers la droite, la gauche ou le centre. L'option de Activer Ajax est également disponible.

Étape 3 : Comment ajouter du contenu à bascule WordPress dans Elementor ?

Le processus de création de contenu en fait un «Avancé" basculer le widget. Vous pouvez littéralement concevoir du contenu pour chaque onglet sans quitter l'éditeur Elementor. Cela donne un énorme avantage car vous pouvez créer et personnaliser le contenu dans la même page que celle sur laquelle vous modifiez le bouton bascule.

aperçu de la bascule avancée dans wordpress

Pour créer le contenu bascule, cliquez sur la section contenu sous le bouton bascule. UN Zone des widgets apparaîtra sur votre écran. Dans cette interface, vous pouvez concevoir du contenu à bascule avec tous les éléments Elementor et ElementsKit. Vous avez la possibilité de créez votre propre conception ou utiliser des modèles enregistrés. En outre, vous pouvez utiliser le Bibliothèque de modèles ElementsKit pour créer un splendide contenu à bascule WordPress.

Étape 4 : Personnaliser le bouton bascule Elementor avec ElementsKit

La personnalisation du bouton bascule Elementor est simple et flexible avec ElementsKit. Dans le Section Changer de conteneur (sous l'onglet Style), vous pouvez choisir le type d'arrière-plan pour les boutons à bascule, puis réglez rembourrage, boîte ombre style, et rayon de frontière.

comment créer une bascule avancée dans wordpress

Pour le interrupteur à bascule, des options permettant de définir le rayon de la bordure et l'ombre de la boîte sont également disponibles.

De plus, dans le Contenu section, vous pouvez définir le Typographie pour les titres des onglets à bascule.

Ça y est ...! Le contenu bascule est maintenant prêt. Vous pouvez maintenant ajouter le contenu à bascule pour rendre votre conception Web plus élégante et dynamique.

Pour en savoir plus, lisez la documentation complète sur comment utiliser le widget ElementsKit Advanced Toggle.

Pourquoi devriez-vous choisir ElementsKit pour créer le bouton bascule Elementor ?

Une question très légitime que vous pouvez poser est la suivante : parmi tous les plugins bascule WordPress disponibles, pourquoi choisiriez-vous ElementsKit ? La réponse en une seule ligne serait : il s’agit du widget à bascule avancé avec toutes les fonctionnalités avancées.

Pour élaborer, ElemensKit dispose d'une fonctionnalité avancée de création de contenu. La plupart des widgets à bascule Elementor offrent la possibilité de basculer entre seulement deux contenus. Avec ElementsKit, vous pouvez créer autant de contenu à bascule que vous le souhaitez avec un certain style. De plus, vous pouvez créer un bouton bascule Elementor et le contenu bascule dans le même éditeur. Cela rend la création de contenu WordPress plus facile que jamais. En outre, vous pouvez également utiliser des modèles prédéfinis.

Voici pourquoi choisir Widget de bascule avancé ElementsKit pour créer du contenu à bascule WordPress dans Elementor :

  • Création de contenu avancée.
  • Ajoutez un nombre illimité de contenu à bascule.
  • Créez un bouton bascule et concevez le contenu bascule en un seul endroit, sans avoir à quitter l'éditeur.
  • Concevez du contenu à bascule sophistiqué avec Elementor.
  • Rend la section interactive pour les utilisateurs.
  • Réduit le temps de défilement pour améliorer l’engagement.

En un mot

Le contenu à bascule WordPress est un excellent moyen d’améliorer l’expérience utilisateur sur votre site Web. Les bascules vous permettent de modifier l'apparence de votre site Web, le rendant plus interactif. 

Lors de la création de contenu à bascule, ElementsKit offre les fonctionnalités les plus flexibles et les plus avancées. Si vous avez suivi le guide ci-dessus, vous devriez pouvoir créer facilement un bouton bascule Elementor.

commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *