Principaux points à retenir
- Un basculement de tarification Elementor est construit à partir de deux parties : deux ensembles de tableaux de tarification, un mensuel et un annuel, et un widget de commutation qui affiche un ensemble à la fois.
- Le widget Price Table d'Elementor Pro n'a pas de commutateur mensuel et annuel, donc la bascule provient d'un widget de bascule de contenu ou de tables de tarification placées dans le widget Tabs.
- Le widget Master Addons Toggle Content charge un modèle enregistré dans chaque option, à l'aide du paramètre de contrôle de type sur le modèle et d'un type de modèle de section, de page ou de widget.
- Sur les sites Elementor qui utilisent des conteneurs, enregistrez chaque ensemble de tables de tarification comme modèle de page, car la liste des sections dans Basculer le contenu affiche uniquement les modèles enregistrés avec le type de section.
- Le paramètre Active Index dans Toggle Content décide quelle période de facturation les visiteurs voient en premier, avec 1 pour la première option et 2 pour la seconde.
Pour ajouter une bascule de tarification Elementor, créez vos forfaits mensuels et vos forfaits annuels sous forme de deux modèles enregistrés, puis chargez les deux dans un widget de bascule de contenu. Les visiteurs cliquent sur Mensuel ou Annuel et les prix échangent en place. La page reste haute d'un écran et personne n'a à lire six colonnes de prix à la fois.
Ce tutoriel utilise le tableau des prix et Basculer le contenu widgets de Master Addons, et il se termine par un itinéraire sans ajout à travers le widget Tabs Tout a été testé sur Elementor 4.3.
Table des matières
Ce dont vous avez besoin avant de commencer
Vous avez besoin d'Elementor, d'un widget de table de tarification et d'un widget qui change de contenu Elementor Pro a un widget de Table des Prix, mais ni Elementor ni Elementor Pro n'a le commutateur.
- Tableaux de prix. Ce guide utilise le Widget de table de tarification de Master Addons. Table des prix d'Elementor Pro ou des conteneurs unis avec des titres fonctionnent aussi.
- Le commutateur. Il s'agit de Toggle Content, qui fait partie de Maître Addons Pro.
- Vos prix. Décidez d’abord de la réduction annuelle. Deux mois de congé, soit environ 17 pour cent, sont un choix courant.
Comment ajouter un basculer de tarification dans Elementor
L'ensemble de la construction prend cinq étapes : établir les forfaits mensuels, les enregistrer, établir les forfaits annuels, les sauvegarder, puis les connecter à la bascule.
Étape 1 : Construisez les plans mensuels
Créez une nouvelle page, ou ouvrez un brouillon vierge, et modifiez-le avec Elementor Ajoutez un conteneur avec trois colonnes et faites glisser un widget Table de tarification dans chacune Remplissez le nom du plan, le prix, le texte de facturation et la liste des fonctionnalités.
Construisez un plan entièrement, puis dupliquez-le deux fois et modifiez les détails Cela maintient les lignes de fonctionnalités alignées Allumez Tableau des surlignements? et le ruban pour le plan que vous voulez que les gens choisissent.
Étape 2 : Enregistrez les forfaits mensuels sous forme de modèle
Cliquez sur la flèche à côté du bouton Publier et choisissez Enregistrer sous Modèle. Nommez-le les plans de tarification mensuels et enregistrez-le.
Enregistrer de cette façon crée un modèle de Page Cela compte, car Toggle Content répertorie les modèles par type Sa liste de Section n'affiche que les modèles qui ont été enregistrés avec le type de Section Sur un site qui utilise des conteneurs, un clic droit sur un conteneur et son enregistrement crée un modèle de Conteneur, et celui-ci n'apparaît pas dans la liste de Section Un modèle de Page s'affiche toujours sous Page.
Étape 3 : Construisez et enregistrez les plans annuels
Restez sur la même version. Changez chaque prix en taux annuel et changez le texte de facturation en Facturé chaque année. Ensuite, utilisez à nouveau Enregistrer comme modèle et nommez ce forfait tarifaire annuel.
Vous avez maintenant deux modèles avec la même mise en page et des numéros différents Vous pouvez supprimer le projet de page.
Étape 4 : Ajoutez du contenu Toggle et connectez les modèles
Ouvrez votre véritable page de tarification dans Elementor. Recherchez dans le panneau du widget Basculer le contenu et faites-le glisser à l'endroit où les plans doivent apparaître Si vous n'avez pas encore de page de tarification, commencez par l'un de ceux-ci Modèles de pages de tarification des éléments.
- Dans le Éléments liste, cliquez sur le premier élément et modifiez-le Étiquette au Mensuel.
- Définir taper à la à Modèle.
- Définir Type de modèle à Page.
- Dans Choisir pagechoisissez les forfaits de prix mensuels.
- Cliquez sur le deuxième élément, étiquetez-le chaque année et choisissez Plans de prix annuels de la même manière.
Mettez à jour la page et ouvrez-la sur le front-end Cliquez sur Annuel et les trois tableaux changent pour les prix annuels.
Étape 5 : Définissez l'option par défaut et stylisez le commutateur
Ouvrir Basculer les paramètres dans l'onglet Contenu. Indice actif choisit l'option qui indique le chargement de la page, 1 pour le mensuel et 2 pour l'annuel. poste met l'interrupteur avant ou après les tables, et Vitesse de l'indicateur définit la vitesse à laquelle la surbrillance glisse, 0,3 seconde par défaut.
Allez ensuite dans l'onglet Style Le Bascule la section a la forme de l'interrupteur (rond ou carré), la couleur de fond, l'alignement, le zoom pour la taille et la largeur. Les sections Indicateur et étiquettes en dessous définissent la couleur de surbrillance et les couleurs de l'étiquette pour les états normal et actif.
Besoin des tables d'abord ? Le Widget de table de tarification des éléments page affiche ses cinq mises en page, rubans, prix de vente et info-bulles caractéristiques.
Tutoriel vidéo
Cette vidéo montre le widget Toggle Content ajouté et configuré dans l'éditeur Elementor.
Un basculement tarifaire sans addon
Vous pouvez construire un changement de prix avec le propre d'Elementor Widget Onglets[traduction], parce que chaque onglet accepte n'importe quel widget à l'intérieur. Les visiteurs voient deux titres d'onglets où un addon affiche un commutateur coulissant, et les prix échangent de la même façon.
- Faites glisser le Onglets widget sur la page et supprimer le troisième onglet.
- Renommer les deux onglets Mensuel et Annuel.
- Cliquez sur l'onglet Mensuel et créez vos colonnes de tarification dans sa zone de contenu.
- Dupliquez ce conteneur dans l'onglet Annuel et modifiez les prix.
- Dans l'onglet Style, centrez les titres des onglets et arrondissez leurs coins pour qu'ils se lisent comme un interrupteur.
Le compromis est l'entretien Les deux ensembles de tableaux vivent sur la page elle-même, de sorte que l'éditeur devient long, et vous ne pouvez pas réutiliser les mêmes ensembles sur une autre page comme vous le pouvez avec des modèles.
| Basculer le contenu avec des modèles | Widget Onglets | |
|---|---|---|
| On dirait | Un interrupteur coulissant avec un indicateur | Deux titres d'onglets |
| Où vivent les tables | Dans les modèles enregistrés | À l'intérieur des onglets de la page |
| Réutilisation sur d'autres pages | Oui, choisissez les mêmes modèles | Copiez et collez le widget |
| Plus de deux options | Oui, ajoutez des éléments | Oui, ajoutez des onglets |
| Besoins | Maître Addons Pro | Élémenteur seulement |
Cinq choses qui font fonctionner un basculage tarifaire
Un basculement des prix n'aide que si les visiteurs le comprennent en une seconde Ces cinq habitudes couvrent la majeure partie de cela.
- Dites l'économie en mots Mettez “Billed annuellement, deux mois de congé” sous le prix Un commutateur seul ne dit pas aux gens pourquoi annuellement est meilleur.
- Gardez la disposition identique Mêmes plans, même ordre, mêmes lignes de caractéristiques dans les deux ensembles Seuls les nombres doivent bouger lorsque le commutateur bascule.
- Choisissez la valeur par défaut exprès Définissez l'index actif sur la période de facturation que vous souhaitez que la plupart des gens achètent.
- Vérifiez-le sur un téléphone Dans la section style Étiquettes, Empiler peut empiler les étiquettes sur mobile si elles ne rentrent pas dans une rangée.
- Le commutateur ne sauvegarde pas un choix Chaque visite commence sur l'option par défaut, alors pointez chaque bouton sur le lien de paiement pour sa propre période de facturation.
Pour des conseils de mise en page et de copie sur les tableaux eux-mêmes, consultez notre Conseils pour la table de tarification des éléments. Si vos forfaits diffèrent davantage par leurs fonctionnalités que par leur prix, a tableau comparatif sous la bascule, les gens vérifient les détails.
Questions fréquemment posées
Le widget Table des prix Elementor a-t-il une bascule mensuelle et annuelle ?
N° Le widget Table des prix dans Elementor Pro affiche un prix par table et n'a pas de commutateur de facturation Pour basculer entre les prix mensuels et annuels, placez deux ensembles de tables à l'intérieur du widget Onglets ou chargez-les dans un widget de basculer de contenu à partir d'un addon.
Puis-je ajouter un basculement tarifaire dans Elementor sans plugin ?
Oui. Utilisez le widget Onglets, nommez les onglets Mensuel et Annuel et créez un ensemble de colonnes de prix à l'intérieur de chaque onglet Il affiche les titres des onglets où un addon affiche un interrupteur coulissant, et les visiteurs voient toujours un ensemble de prix à la fois.
Pourquoi mon modèle enregistré manque-t-il dans la liste Toggle Content ?
Basculer le contenu répertorie les modèles par type Un conteneur enregistré seul est stocké en tant que modèle de conteneur, ce que la liste de sections n'affiche pas Enregistrer la mise en page avec Enregistrer en tant que modèle dans la flèche Publier, ce qui crée un modèle de page, et définir Type de modèle sur Page.
Le basculement des prix peut-il avoir trois options, telles que mensuelle, annuelle et à vie ?
Oui. Cliquez sur Ajouter un élément dans la liste Éléments du contenu Toggle et connectez un troisième modèle Avec trois options ou plus, les visiteurs cliquent sur l'étiquette qu'ils souhaitent et en cliquant sur l'étiquette active, ils passent à la suivante.
Google voit-il les deux séries de prix ?
Oui. Basculer le contenu imprime chaque option de la page HTML et affiche une à la fois, de sorte que les prix mensuels et annuels sont dans la source Faites de la version qui vous tient le plus à cœur l'option par défaut.
Réflexions finales
Une bascule de tarification Elementor nécessite deux modèles enregistrés et un commutateur. Créez les forfaits mensuels, enregistrez-les sous forme de modèle de page, répétez pour chaque année, puis chargez les deux dans Basculer le contenu et définissez l'index actif.
Le Basculer la page du widget Contenu dispose d'une démo de commutateur de facturation en direct sur laquelle cliquer avant de créer la vôtre.
Lecture connexe
