Principaux points à retenir
- Un basculeur de table de tarification Elementor nécessite deux jeux de cartes, un avec des prix mensuels et un avec des prix annuels, et un contrôle qui affiche un jeu à la fois.
- Le plugin gratuit Elementor peut le faire avec le widget Nested Tabs : un onglet par période de facturation, une rangée de cartes de tarification à l'intérieur de chaque onglet, sans addon.
- Le widget Toggle Content de Master Addons Pro donne au commutateur le look attendu par les gens, une pilule avec des étiquettes mensuelles et annuelles et charge chaque ensemble à partir d'un modèle de section enregistré.
- Le widget Master Addons Pricing Table contient un prix par carte et n'a pas de commutateur de facturation propre, donc chaque itinéraire de cette page le associe à un deuxième widget.
- Les modèles enregistrés à partir d'un conteneur Elementor sont stockés en tant que type de conteneur, et la liste des sections Basculer le contenu affiche uniquement les modèles de type Section, alors enregistrez la ligne de tarification en tant que section.
- Afficher les prix annuels par mois avec un billet de” annuel facturé en“ afin que les deux états à bascule se comparent comme pour comme.
Un basculeur de table de tarification Elementor est un commutateur au-dessus des plans qui retourne chaque carte entre les prix mensuels et annuels Elementor n'a pas de widget qui fait cela tout seul, et la plupart des tables de tarification addon détiennent un seul prix par carte, donc la bascule est toujours construite à partir de deux parties : deux jeux de cartes et quelque chose qui montre un jeu à la fois.
Ce guide construit la bascule trois façons sur les trois mêmes plans La route 1 utilise le widget gratuit Elementor Nested Tabs La route 2 utilise le widget Toggle Content de Additions maîtres avec deux modèles de section enregistrés, qui est la version qui ressemble à un véritable commutateur de facturation La route 3 couvre les widgets qui expédient avec un commutateur intégré et ce que vous abandonnez pour la commodité.
Table des matières
Comment fonctionne un basculement tarifaire dans Elementor
Un basculement de prix est deux lignes de prix complètes et un contrôle qui cache l'une d'entre elles Lorsqu'un visiteur clique sur Annuel, la ligne mensuelle est masquée et la ligne annuelle est affichée Rien ne recalcule C'est pourquoi les cartes mensuelles et annuelles peuvent être construites avec n'importe quel widget de prix, y compris ceux avec un seul champ de prix.
Le contrôle est la partie qui change entre les itinéraires Nested Tabs vous donne des boutons d'onglets Toggle Content vous donne un interrupteur de pilule avec un indicateur coulissant Un widget avec un interrupteur intégré vous donne son propre contrôle et son propre design de carte Les cartes en dessous restent les mêmes dans les deux premiers itinéraires, alors choisissez les cartes en premier et le contrôle en second.
Une règle s'applique à chaque itinéraire : afficher le prix annuel sous forme de chiffre mensuel en indiquant qu'il est facturé chaque année. 39 $/mois, facturé annuellement au” à côté de 49 $/mois au” permet au lecteur de voir l'économie sans faire d'arithmétique. Un total annuel à côté d'un prix mensuel semble plus cher même lorsqu'il est moins cher.
Étape 1 : créez les cartes mensuelles et annuelles
Construisez d'abord la ligne mensuelle, puis dupliquez-la et modifiez les prix Dans Elementor, ajoutez un conteneur avec trois conteneurs pour enfants côte à côte et déposez-en un Widget de table de tarification dans chacun. Définissez le nom du plan, le sous-titre, le prix et la période dans l'onglet Contenu. Donnez à la carte du milieu Highlight Table et un ruban pour que la ligne ait un plan par défaut.
Cliquez maintenant avec le bouton droit sur le conteneur parent et choisissez Dupliquer Dans la copie, ouvrez chaque carte et modifiez le prix Pour la facturation annuelle, activez le commutateur de vente, entrez le prix mensuel comme prix d'origine et le prix annuel par mois comme prix, et définissez la période sur “/mois, facturé annuellement.” Le chiffre mensuel barré fait la vente.
Vous avez maintenant deux lignes sur la page Les routes 1 et 2 décident de la façon dont elles sont affichées une à la fois.
Route 1 : Onglets imbriqués (Élémenteur gratuit)
Le widget Nested Tabs du plugin gratuit Elementor place un conteneur dans chaque onglet, donc toute une ligne de tarification s'insère dans un panneau d'onglets. Il a besoin de la fonctionnalité Flexbox Container, qui est activée par défaut sur les installations actuelles d'Elementor.
- Faites glisser le Onglets widget (le imbriqué, avec l'icône du conteneur) sur la page ci-dessus où le prix doit se situer.
- Dans l'onglet Contenu, renommer l'onglet n°1 en Mensuel et l'onglet n°2 à Annuel. Supprimer le troisième onglet.
- Faites glisser le conteneur de prix mensuel dans le panneau d'onglets mensuel et le conteneur annuel dans le panneau Annuel Utilisez le navigateur (le panneau de couches) si la cible de chute est difficile à atteindre.
- Dans l'onglet Style, définissez l'alignement du titre de l'onglet sur le centre et donnez à l'onglet actif la couleur de votre accent.
Le résultat fonctionne, et il ne coûte rien Ce à quoi il ne ressemble pas est un commutateur de facturation Onglets lus comme navigation, donc certains visiteurs manquent que les prix annuels existent Vous pouvez styliser les deux titres des onglets en forme de pilule avec le rayon de bordure et les couleurs d'arrière-plan, qui se rapproche Sur les téléphones, Nested Tabs se transforme en accordéon sous le point d'arrêt que vous avez défini, alors vérifiez que le panneau Mensuel est celui ouvert par défaut.
Route 2 : Basculer le contenu avec deux modèles de section
Le widget Toggle Content affiche l'un des nombreux éléments de contenu derrière un interrupteur de pilule, et chaque élément peut être un modèle Elementor enregistré. Deux lignes de prix enregistrées plus ce widget sont une bascule mensuelle et annuelle qui ressemble à celles des pages de tarification SaaS. Toggle Content fait partie de Maître Addons Pro.
Enregistrez chaque ligne sous forme de modèle de section
- Cliquez avec le bouton droit sur la poignée du conteneur de prix mensuel et choisissez Enregistrer sous Modèle.
- Nommez-le “Pricing monthal” and save Faites de même pour le conteneur annuel que “Pricing annual”.
- Ouvrir Modèles > Modèles enregistrés dans l'administrateur WordPress et vérifiez la colonne Type.
Elementor enregistre un conteneur comme Conteneur tapez, et la liste des sections du widget Basculer le contenu affiche uniquement les modèles du Section tapez, c'est pourquoi l'étape 3 vérifie la colonne Si vos deux modèles disent Container, la liste déroulante de la section “Choose n'affichera rien Le correctif consiste à construire la ligne à l'intérieur d'une section héritée (Elementor > Paramètres > Fonctionnalités, ou ajouter une section du Navigateur) avant de sauvegarder, ou de choisir Page comme type de modèle dans le widget et enregistrer les lignes comme modèles de page à la place Les deux routes fonctionnent ; la section un conserve les valeurs par défaut du widget.
Ajouter le widget Basculer le contenu
- Glisser Basculer le contenu du groupe Master Addons sur la page où appartient la tarification Supprimer les deux conteneurs de tarification d'origine, puisque les modèles les contiennent désormais.
- Dans le Éléments répéteur, ouvrez le premier élément Définissez l'étiquette sur Mensuel, tapez sur Modèle, Type de modèle à Section« et choisissez “Pricing monthal” sous Choisir la section. ».
- Ouvrez le deuxième élément, définissez l'étiquette sur Annuel et choisissez “Pricing annual”.
- Sous Basculer les paramètres« Laissez l'indice actif à 1, donc le mensuel s'affiche en premier et définissez la couleur active sur votre accent ».
Aperçu de la page et cliquez sur Annuel La ligne mensuelle glisse et la ligne annuelle glisse, avec l'indicateur de pilule se déplaçant. L'onglet Style contrôle la taille de la pilule, les couleurs de l'étiquette et l'espace entre le commutateur et le contenu.
Le widget ne met pas en file d'attente la propre feuille de style du modèle enregistré, donc si une carte semble non stylée sur le front-end, définissez ses couleurs dans les contrôles du widget plutôt que dans les paramètres de page du modèle, ou effacez le cache Elementor depuis Elementor > Tools. Si vous modifiez un plan plus tard, modifiez le modèle enregistré sous Modèles > Modèles enregistrés, pas la page ; la page ne fait que la référencer.
Route 3 : un widget de tarification avec un commutateur intégré
Certains addons expédient un widget de tarification avec un commutateur de facturation déjà à l'intérieur, vous entrez donc un prix mensuel et un prix annuel par carte et le widget tire la bascule HT Mega a un widget de table de tarification Flip Switcher qui fonctionne de cette façon La plupart des autres, y compris les addons essentiels, les addons Premium, PowerPack et les addons Plus, font ce que fait Route 2 : un widget de bascule ou de commutation séparé (Pro dans chacun de ces plugins) enveloppant deux jeux de cartes La table de comparaison de widgets qui planifient chaque widget de bascule se trouve dans.
Le widget Master Addons Pricing Table a un champ de prix par carte et aucun commutateur intégré, c'est pourquoi ce guide le couple avec Toggle Content Le compromis avec un commutateur intégré est la conception : vous êtes limité aux dispositions de cartes de ce widget et à son style de commutateur Avec deux jeux de cartes, chaque contrôle dans le widget Table de prix reste disponible, y compris les cinq mises en page, le ruban et les info-bulles de fonctionnalités, et vous pouvez changer le commutateur sans reconstruire les cartes.
Si vous souhaitez que le commutateur soit intégré à un widget, vérifiez trois choses avant de vous engager : si le prix annuel du widget peut afficher le chiffre mensuel barré, si le texte de l'étiquette du commutateur est modifiable et comment les cartes s'empilent sur un téléphone.
Sections de tarification à bascule prêtes à l'emploi
Le Bibliothèque de modèles Master Addons a des sections de prix avec la bascule déjà câblée. “Billing Switch Pricing Cards” utilise Toggle Content avec deux lignes de prix, et “Billing Toggle Pricing Tabs” fait de même avec des onglets, y compris une option de trois ans Importez-en un à partir de Modèles > Modèles principaux d'addons dans l'éditeur, puis échangez les noms de forfait, les prix et les fonctionnalités La publication des modèles de tableau de prix comporte plus de sections comme celles-ci, avec les paramètres derrière chacune.
Les deux sections sont construites avec des widgets Master Addons Pro, elles ont donc besoin du plugin Pro actif pour importer.
Quel itinéraire choisir
| Si vous | Utilisation | Pourquoi |
|---|---|---|
| Exécutez gratuitement Elementor et voulez que ce soit fait aujourd'hui | Route 1, onglets imbriqués | Pas de module complémentaire et les cartes de tarification peuvent être n'importe quel widget. |
| Vous voulez un interrupteur qui ressemble à une bascule de facturation | Route 2, Basculer le contenu | Interrupteur de pilule, indicateur coulissant, modèles que vous pouvez réutiliser sur d'autres pages. |
| Avoir trois périodes de facturation ou plus | Route 2 ou route 1 | Les deux prennent n’importe quel nombre d’éléments ; un commutateur intégré en prend généralement deux. |
| Voulez le moins de widgets sur la page | Route 3, interrupteur intégré | Un widget par carte, au prix du choix de mise en page. |
Vous voulez l'interrupteur sans le construire deux fois ? Le Basculer le widget Contenu affiche n'importe quel modèle enregistré derrière une pilule mensuelle et annuelle, donc le Tableau des prix les cartes conservent les cinq mises en page, le ruban et les info-bulles.
Questions fréquemment posées
Elementor a-t-il un widget à bascule de tarification ?
Le widget Table des prix de No. Elementor Pro contient un prix par carte et n'a pas de commutateur de facturation Le widget Onglets imbriqués du plugin gratuit peut afficher deux lignes de prix sous forme d'onglets Mensuel et Annuel, qui est l'option intégrée la plus proche.
Le tableau des prix Master Addons peut-il basculer seul entre mensuel et annuel ?
N° Chaque carte Table de Tarification a un prix, un prix original pour les ventes et une période Construisez une ligne mensuelle et une ligne annuelle, enregistrez chacune comme modèle de section et montrez-les via le widget Basculer le contenu de Master Addons Pro.
Pourquoi mon modèle enregistré manque-t-il dans la liste déroulante Toggle Content ?
Elementor enregistre un conteneur comme type de modèle de conteneur, et les listes déroulantes Modèles de type de section uniquement Enregistrer la ligne d'une section existante, ou définir Type de modèle sur Page dans le widget et enregistrer les lignes comme modèles de page.
Le prix annuel doit-il indiquer le montant total ou mensuel ?
Afficher le montant par mois avec un billet de” annuel facturé aux“ et utiliser le commutateur de vente pour effectuer une frappe sur le prix mensuel. Le lecteur compare ensuite comme avec like et voit l'épargne sur la carte au lieu de la calculer.
Un basculement des prix nuit-il au référencement ?
Non. Les deux lignes sont dans la page HTML et la ligne cachée est masquée avec CSS, donc les moteurs de recherche lisent chaque prix. Conservez les noms et les prix des forfaits sous forme de texte plutôt que d'images.
Réflexions finales
Un basculement mensuel et annuel sur un tableau de prix Elementor est deux lignes de prix et un contrôle Nested Tabs vous donne le contrôle gratuitement et se lit comme des onglets Toggle Content, dans Master Addons Pro, vous donne un pill switch et charge chaque ligne à partir d'un modèle de section enregistré, avec le seul attrapé que les modèles doivent être le type Section Un widget avec le commutateur intégré permet d'économiser une étape et vous coûte le choix de la disposition.
Commencez par les cartes sur le Page du widget de la table de tarification(, qui a une bascule active construite exactement de cette façon, puis ajoutez le commutateur qui correspond à votre plan.
Lecture connexe
