Principaux points à retenir
- Ces 10 exemples de bascule de contenu pour Elementor sont des démos en direct construites avec le widget Master Addons Toggle Content, et chacune bascule entre deux versions de la même section.
- Un basculement de contenu fonctionne mieux lorsque les deux options partagent une seule mise en page et que seuls les détails changent, comme les prix mensuels et annuels ou les mesures métriques et impériales.
- La tarification est l'exemple de bascule de contenu le plus courant, et deux des dix démos sont des interrupteurs de facturation, une étiquetée mensuelle et annuelle et une étiquetée facturée mensuelle et facturée annuelle.
- Les basculements de contenu conviennent également au contenu non tarifaire, notamment les tableaux de spécifications, les résultats trimestriels, les menus du déjeuner et du dîner et les messages écrits pour deux publics.
- Chaque option du widget Basculer le contenu contient du texte de l'éditeur ou un modèle de section, de page ou de widget enregistré, de sorte que n'importe quelle disposition d'élément peut se trouver derrière le commutateur.
Le contenu bascule les exemples pour Elementor qui fonctionnent le mieux montrent le même genre de contenu des deux côtés du commutateur Les plans restent les mêmes et le prix change Le tableau reste le même et les unités changent Vous trouverez ci-dessous dix démos live qui suivent cette règle, avec ce que chacun change et quand utiliser le modèle.
Tous les dix ont été construits avec Basculer le contenu: le widget de bascule de contenu dans Master Addons Pro. Cliquez sur n'importe quel lien de démonstration pour essayer le commutateur vous-même.
Table des matières
Ce qui fait basculer un bon contenu
Un basculement de contenu vaut la peine d'être utilisé lorsqu'un visiteur a besoin de l'une des deux versions et jamais des deux à la fois Si les gens veulent lire les deux côtés ensemble, mettez-les côte à côte.
| Modèle | Option gauche | Option droite | Exemple ci-dessous |
|---|---|---|---|
| Période de facturation | Mensuel | Annuel | 1, 2 |
| Unités | Métrique | Impérial | 4 |
| Portée des données | Opérations propres | Chaîne d'approvisionnement | 5 |
| Public | En équipe | Par vous-même | 7 |
| Période | Q3 | Q4 | 6 |
| Processus | Fait sur commande | En stock | 8 |
| Catégorie | Résidentiel | Civique | 9 |
| Heure de la journée | Déjeuner | Dîner | 10 |
| Portée du plan | Simple | Illimité | 3 |
Exemples de bascule de prix
La tarification est l'endroit où la plupart des gens rencontrent pour la première fois une bascule de contenu Deux périodes de facturation partagent les mêmes forfaits, donc un commutateur réduit de moitié le nombre de cartes sur la page.
1. Cartes de prix des interrupteurs de facturation
Un commutateur mensuel et annuel se trouve au-dessus des cartes de démarrage, d'équipe et d'échelle. Sur Annuel, chaque carte affiche le taux mensuel inférieur et une ligne avec le total annuel et l'économie. Le plan intermédiaire porte une étiquette des plus élus des deux côtés.
Utilisez-le pour: SaaS et tarification des abonnements. Ouvrez la démo de Billing Switch.
2. Basculez le contenu avec les prix
Celui-ci utilise les étiquettes Facturé mensuellement et Facturé annuellement au-dessus des forfaits personnels et de démarrage. Chaque option contient un ensemble complet de tableaux de prix, donc toute la ligne change en un clic.
Utilisez-le pour: pages tarifaires construit à partir de Widgets de table de tarification. Ouvrez la démo des prix.
3. Basculer le contenu arrondi
Un interrupteur arrondi se déplace entre un forfait Single et un forfait Unlimited, chacun avec son propre titre et sa propre description Les deux côtés diffèrent par la portée, de sorte que le commutateur n'est pas lié à une période de facturation.
Utilisez-le pour: des plans qui diffèrent par leur portée, comme uniques et illimités. Ouvrez la démo Rounded.
Exemples de bascule de table et de données
Les tableaux sont le deuxième ajustement naturel Les lignes et les colonnes restent en place et les chiffres changent, de sorte que les visiteurs gardent leur place lorsqu'ils actionnent l'interrupteur.
4. Tableau des spécifications du commutateur unitaire
Une table de géométrie de vélo bascule entre Metric et Imperial Reach, stack et les autres mesures sont listées pour trois tailles de trame, avec une colonne de tolérance Les acheteurs dans différents pays obtiennent chacun des numéros qu'ils peuvent lire.
Utilisez-le pour: spécifications du produit, tableaux de tailles et recettes. Ouvrez la démo Unit Switch.
5. Tableau de référence du commutateur de données
Un rapport sur les émissions bascule entre les opérations propres et la chaîne d'approvisionnement Chaque côté répertorie les sources, leur part de la référence et le tonnage Deux tableaux qui rempliraient un écran partagent désormais chacun un.
Utilisez-le pour: rapports, repères et chiffres avant et après. Ouvrez la démo Data Switch. Si les données ne changent jamais d'un simple clic, un simple widget table est plus simple.
6. mesures de changement de trimestre Bento
Une grille bento de résultats bascule entre Q3 et Q4 Les revenus, la croissance et les notes sous chaque chiffre changent tous ensemble Il se lit comme un tableau de bord et prend l'espace d'un.
Utilisez-le pour: mises à jour des investisseurs, rapports annuels et statistiques mensuelles. Ouvrez la démo de Quarter Switch.
Vous voulez les dix au même endroit ? Le Basculer la page du widget Contenu dispose d'une visionneuse qui charge chaque démo, ainsi que les paramètres complets du widget.
Exemples de bascule de public et de catégorie
Le dernier groupe change le message Chaque face est écrite pour un lecteur différent ou couvre une catégorie différente.
7. Panneau de fonctionnalités du commutateur d'audience
Une page de cours bascule entre En équipe et De votre propre côté Chaque côté a son propre titre, point d'épreuve et liste de fonctionnalités Les visiteurs choisissent la version qui les décrit et sautent le reste.
Utilisez-le pour: produits vendus aussi bien aux entreprises qu'aux particuliers. Ouvrez la démo Audience Switch.
8. Calendrier des étapes de l'itinéraire de commande
Une liste d'étapes numérotée bascule entre Made to order et In stock Les étapes et l'attente diffèrent sur chaque itinéraire, et la disposition reste la même Il répond à “que se passe-t-il après que j'ai commandé ?” pour les deux types d'acheteur.
Utilisez-le pour: expédition, embarquement et tout processus avec deux chemins. Ouvrez la démo de Route de commande. Pour une seule séquence datée, le Widget Chronologie est le meilleur ajustement.
9. Carte de superposition de changement de projet
Un studio d'architecture change une grande carte de projet entre Résidentiel et Civique Chaque côté a sa propre photo, lieu, année et bref Deux études de cas s'adaptent là où on irait normalement.
Utilisez-le pour: portefeuilles avec deux axes de travail. Ouvrez la démo de Project Switch.
10. Liste de menus de commutation de service
Un menu de restaurant bascule entre le Déjeuner et le Dîner Les heures de service sont assises sous le commutateur, et les plats et les prix changent avec les clients voient le menu du repas qu'ils planifient.
Utilisez-le pour: restaurants, salons et toute entreprise avec deux listes de services. Ouvrez la démo Service Switch.
Comment construire un de ces exemples
Chaque exemple est un widget Toggle Content avec deux éléments Construisez la première version de votre section, copiez-la, modifiez les détails et mettez une version dans chaque élément.
- Glisser Basculer le contenu sur la page et nommez les deux éléments du Éléments liste.
- Pour le contenu court, partez taper à la sur Contenu et écrire dans l'éditeur.
- Pour une mise en page complète, set taper à la pour modéliser et choisir un modèle enregistré pour chaque élément.
- Définir Indice actif dans Basculer les paramètres pour choisir l'option qui s'affiche en premier.
- Stylez l'interrupteur dans les sections Basculeur, Indicateur et Étiquettes de l'onglet Style.
La version tarifaire comporte quelques étapes supplémentaires, que nous abordons comment ajouter un basculer de tarification mensuel et annuel dans Elementor. La liste complète des paramètres se trouve dans le Basculer la documentation du contenu.
Questions fréquemment posées
Qu'est-ce qu'un toggle de contenu dans Elementor ?
Un basculement de contenu est un widget avec un commutateur et deux étiquettes ou plus Un clic sur une étiquette montre le contenu de cette option et cache les autres Elementor n'en inclut pas, il provient donc d'un addon tel que Master Addons Pro, où le widget s'appelle Toggle Content.
Que puis-je mettre dans une bascule de contenu ?
Dans Toggle Content, chaque option contient soit du texte de l'éditeur intégré, soit un modèle Elementor enregistré. Comme un modèle peut contenir n'importe quel widget, l'option peut être une table de tarification, une table de données, un formulaire, une galerie d'images ou une section entière.
Un basculement de contenu peut-il avoir trois options ?
Oui. Cliquez sur Ajouter un élément dans la liste Éléments pour ajouter une troisième ou une quatrième option Un commutateur lit mieux avec deux ou trois étiquettes Pour plus que cela, les onglets sont généralement plus faciles à numériser pour les visiteurs.
Ces contenus basculent-ils les démos disponibles sous forme de modèles ?
Les démos sont affichées dans la visionneuse de modèles sur la page du widget Toggle Content, où vous pouvez ouvrir chacune d'elles Elles ont été construites avec le widget Toggle Content, qui fait partie de Master Addons Pro.
Réflexions finales
Les dix exemples de bascule de contenu ci-dessus couvrent trois tâches : changer de prix, changer un ensemble de chiffres et changer de message Dans chacun d'entre eux, la mise en page reste immobile et seuls les détails bougent, le changement est donc facile à suivre.
Essayez-les sur le Basculer la page du widget Contenu(en), puis construisez le vôtre avec deux versions d'une section que vous avez déjà.
Lecture connexe
