Parfois, une section doit montrer deux choses au même endroit, comme des FAQ et une grille d'équipe, ou des prix mensuels et annuels. Le Basculer le contenu widget dans Modules complémentaires principaux pour Elementor ajoute un petit commutateur qui bascule entre eux Chaque option de bascule contient soit du texte brut, soit un modèle d'élémenteur entièrement enregistré, et les visiteurs appuient sur une étiquette pour échanger ce qui s'affiche.
Vous définissez les étiquettes, les icônes facultatives et ce que chacune affiche, puis vous stylisez le commutateur pour qu'il corresponde C'est une façon claire de s'insérer davantage dans moins d'espace sans envoyer de personnes vers une autre page Ce guide couvre chaque paramètre du widget.
Préférez regarder en premier ? ce court tutoriel parcourt le widget Toggle Content bout à bout :
Ce que fait le widget Toggle Content #
Le widget affiche un interrupteur à bascule avec deux étiquettes ou plus Cliquez sur une étiquette et la zone ci-dessous passe au contenu de cette option Chaque option peut être un bloc de texte que vous saisissez ou un modèle, une section ou une page enregistrée de votre bibliothèque.
Parce qu'il peut extraire des modèles, la bascule ne se limite pas au texte court. Vous pouvez basculer entre une mise en page FAQ entière et une section équipe, toutes deux construites ailleurs dans Elementor et intégrées à la bascule.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Si vous prévoyez de basculer les modèles, enregistrez-les d'abord dans votre Elementor bibliothèque de modèles.
Comment ajouter le widget Basculer le contenu #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Basculer le contenu(ou faites défiler vers la section Modules complémentaires principaux) Faites-le glisser sur votre page Il se charge avec deux exemples d'options de bascule afin que vous puissiez voir le commutateur tout de suite.
Configurez les options de bascule #
Dans le Contenu tab, le Basculer le contenu la section détient un Éléments répéteur. Chaque élément est une option de bascule Les valeurs par défaut sont Label One et Label Two, et vous en ajoutez d'autres avec Ajouter un élément(en anglais), dupliquer avec l'icône de copie, ou supprimer avec le X.
Cliquez sur un élément pour ouvrir ses paramètres, qui ont leurs propres sous-onglets Contenu et Style.
- Étiquette: le texte sur le bouton basculer, comme FAQ ou Notre équipe Il prend en charge les balises dynamiques.
- Icône: une icône optionnelle affichée à côté de l'étiquette.
- Type: choisissez Contenu pour le texte tapé ou Modèle pour extraire une mise en page enregistrée.
- Contenu: lorsque Type is Content, un éditeur de texte intégral apparaît avec un support, un formatage et une vue de code.
Basculer un modèle enregistré au lieu de texte #
Définir Type à Modèle et deux autres contrôles apparaissent : Type de modèle (comme la section) et Choisir section« , où vous choisissez n'importe quel modèle enregistré dans votre bibliothèque. C'est ce qui permet à une seule option de bascule d'afficher toute une disposition prédéfinie. ».
Dans la démo, une option pointe vers une section FAQ enregistrée et l'autre vers une section équipe. Retournez la bascule et toute la mise en page échange.
Basculer les paramètres #
Le Basculer les paramètres la section contrôle le comportement du commutateur.
- Indice actif : quelle option s'affiche en premier lorsque la page se charge. Réglez-la sur 1 pour la première option, 2 pour la seconde, et ainsi de suite.
- Position: placez l'icône de l'étiquette avant ou après le texte de l'étiquette.
- Vitesse de l'indicateur : à quelle vitesse l'indicateur actif glisse entre les options, en quelques secondes.
Stylez la bascule #
Le Style tab est divisé en Bascule, Indicateur, et Étiquettes. La section Basculeur contrôle le conteneur de commutation lui-même.
- Style: la forme de la genouillère, telle que Ronde.
- Couleur de fond et rayon de bordure : l'aspect de la piste de commutation.
- Aligner, zoom et largeur : positionnez et mettez à l'échelle l'interrupteur dans sa colonne.
- Bordure, Ombre de boîte, Rembourrage, Marge : les contrôles de cadrage habituels.
Le Indicateur la section stylise la surbrillance coulissante derrière l'étiquette active et le Étiquettes la section définit la typographie et les couleurs du texte de l'étiquette dans les états actif et inactif.
Le résultat sur la page #
Publier ou prévisualiser et le basculement fonctionne en direct : les visiteurs appuient sur une étiquette et le contenu ci-dessous échange avec une diapositive Ici, le basculement passe de la mise en page FAQ au modèle Notre équipe, chacun étant une section entièrement enregistrée.
Cas d'utilisation courants #
- Tarifs mensuels et annuels basculé au-dessus d'un tableau tarifaire.
- FAQ et équipe sections partageant un emplacement sur une page de service.
- Description et spécifications sur une page produit.
- Avant et après mises en page d'études de cas.
- Deux modèles enregistrés échangé sans deuxième page ni popup.
Conseils pour travailler avec le widget Toggle Content #
- Construisez d'abord des modèles. Enregistrez les sections que vous souhaitez basculer dans votre bibliothèque, puis pointez chaque option sur une.
- Gardez les étiquettes courtes. Un ou deux mots s'adaptent proprement à l'interrupteur et lisent rapidement.
- Définissez délibérément l'indice actif. Dirigez avec l'option que la plupart des visiteurs veulent voir en premier.
- Correspondre aux hauteurs de contenu là où vous le pouvez. Basculer entre des hauteurs très différentes fait sauter la page.
- Utilisez les icônes pour plus de clarté. Une petite icône à côté de chaque étiquette aide les gens à distinguer les options.
Foire aux questions #
Qu'est-ce que le widget Toggle Content dans Master Addons ?
Il s'agit d'un widget Elementor qui ajoute un commutateur à bascule pour basculer entre deux ou plusieurs ensembles de contenu au même endroit. Chaque option de bascule peut contenir du texte tapé ou un modèle Elementor enregistré, et les visiteurs appuyent sur une étiquette pour échanger ce qui s'affiche.
La bascule peut-elle afficher un modèle Elementor enregistré ?
Oui. Dans une option de bascule, définissez Type sur Modèle, choisissez le Type de modèle, puis choisissez une section ou une page enregistrée dans votre bibliothèque. La bascule affiche ensuite toute cette disposition afin que vous puissiez basculer entre des conceptions complètes prédéfinies.
Comment définir l'option qui s'affiche en premier ?
Ouvrez la section Basculer les paramètres et définissez l'index actif Utilisez 1 pour la première option, 2 pour la seconde, et ainsi de suite Cette option s'affiche lorsque la page se charge, et les visiteurs peuvent passer aux autres en appuyant sur leurs étiquettes.
Puis-je ajouter des icônes aux étiquettes à bascule ?
Oui. Chaque option de bascule a un champ Icône dans sa sous-onglet Contenu. Vous pouvez également définir si l'icône se trouve avant ou après le texte de l'étiquette à l'aide de l'option Position dans les paramètres de bascule.
En quoi Toggle Content est-il différent de Tabs ?
Les deux changent de contenu en place, mais la bascule est un seul commutateur compact conçu pour deux ou quelques options, souvent un choix binaire comme mensuel et annuel. Les onglets conviennent aux listes plus longues de sections. Basculer le contenu rend également simple l'extraction des modèles enregistrés.
Envelopper #
Le widget Toggle Content intègre deux mises en page dans un seul emplacement et permet aux visiteurs de basculer entre elles en appuyant sur Ajouter vos options, choisir du texte ou un modèle enregistré pour chacune, définir laquelle mène et styliser le commutateur pour qu'il corresponde à d'autres façons d'organiser le contenu, voir le Widget Onglets: parcourez le tableau complet Widgets et extensions Master Addons&, et vérifiez le page de tarification pour ce que chaque plan comprend.
