L'une des pages de destination exclusives que nous vous proposons en tant que membres à vie et nouveaux clients du Black Friday est la superbe page de destination de vente de logiciels. Cette page de destination vous surprendra avec ses diviseurs de section uniques et ses maquettes de haute qualité. Dans cet article, nous allons vous montrer comment utiliser la fonctionnalité de contenu dynamique de Divi pour y ajouter des tableaux de prix dynamiques !

Si vous êtes un client à vie actuel ou si vous avez acheté un nouveau compte ou mis à niveau lors de notre vente Black Friday, vous pouvez télécharger cette mise en page dès maintenant.

Obtenez la page de destination exclusive de la vente de logiciels Black Friday

Avant d'entrer dans ce cas d'utilisation, vous devrez mettre la main sur la page de destination exclusive de Black Friday Software Sale que vous pouvez obtenir en devenant un nouveau membre Elegant Themes, en mettant à niveau votre compte existant ou en étant déjà membre à vie avec nous. Si vous êtes effectivement déjà membre à vie, vous pouvez vous connecter à notre espace membre et télécharger toutes nos pages de destination exclusives ici. Tout le monde devra utiliser le bouton ci-dessous pour acheter ou mettre à niveau avant de pouvoir suivre le reste de notre didacticiel.

Réclamez l'accord avant qu'il ne disparaisse !

Utiliser Comment créer des tableaux de prix dynamiques avec Divi

Pour le reste de cet article, nous supposerons que vous avez profité de notre offre Black Friday ou que vous êtes déjà un membre à vie et que vous avez accès à la page de destination de Black Friday Software Sale.

Une fois que vous avez téléchargé la nouvelle page de destination de vente de logiciels depuis notre espace membre, vous pouvez regarder la vidéo ci-dessous pour voir à quel point il est facile de la configurer. Nous vous encourageons également à suivre ce didacticiel pour préparer votre site à une personnalisation plus poussée.

Dans cet article de cas d'utilisation, nous allons vous montrer comment créer des tableaux de prix dynamiques avec Divi et le plugin gratuit Advanced Custom Fields. La création de tableaux de tarification dynamiques est idéale si vous avez un client qui modifie souvent les prix des abonnements et que vous souhaitez lui permettre de les modifier lui-même sans accéder à Divi. Cela vous aidera à vous assurer qu'ils ne gâchent rien sur la page elle-même tout en ayant la possibilité de modifier le prix, la description et le niveau d'adhésion d'un certain forfait.

Aperçu

Avant de nous y plonger, jetons un coup d'œil rapide au résultat final.

Commençons!

Installer le plugin de champs personnalisés avancés

La première chose que vous devrez faire est d'installer le plugin Advanced Custom Fields sur votre site WordPress en allant dans Plugins > Ajouter un nouveau > Rechercher le plugin et l'installer .

Créer un nouveau groupe de champs

Une fois que vous avez activé le plugin, vous pouvez commencer. Ajoutez un nouveau groupe de champs.

Nom + Emplacement

Donnez un nom à votre nouveau groupe de champs. Gardez à l'esprit qu'à la fin de cette partie du didacticiel, vous aurez trois groupes de champs (égal au nombre de tableaux de prix), alors assurez-vous de le nommer correctement. Modifiez également les paramètres d'emplacement de ce groupe de champs.

Ajouter un champ de niveau d'adhésion

Il est temps de commencer à ajouter des champs ! Nous aurons besoin de trois au total. Ajoutez un champ de niveau d'adhésion à l'aide des paramètres suivants :

• Libellé du champ : niveau d'adhésion 1
• Nom du champ : membership_level_1
• Type de champ : Sélectionner
• Choix : ajouter le contenu de votre choix

Ajouter un champ de description d'adhésion

Continuez en ajoutant un champ de description d'adhésion.

• Libellé du champ : Description de l'adhésion 1
• Nom du champ : membership_description_1
• Type de champ : Texte

Ajouter un champ de prix

Le dernier champ dont vous aurez besoin est un champ de prix.

• Libellé du champ : Prix 1
• Nom du champ : price_1
• Type de champ : Texte

Dupliquer le groupe de champs deux fois et ajuster le nom et les champs au numéro de la table de tarification

Un groupe de champs équivaut à un tableau de prix sur notre page. Maintenant que nous avons terminé le premier, nous pouvons le cloner deux fois pour nous assurer que nous avons suffisamment de groupes de champs pour correspondre au nombre de tableaux de prix sur notre page.

Changer le nombre de tous les champs dans le groupe

Chacun des champs dynamiques que vous créez sera affiché dans le Visual Builder. Pour vous assurer de savoir à quelles informations vous vous connectez, attribuez un numéro différent aux groupes de champs dupliqués et à leurs champs.

Créer une nouvelle page à l'aide de la page de destination de la vente de logiciels de Divi

Dans la prochaine partie de ce didacticiel, nous ajouterons les tableaux de tarification dynamiques à notre page de destination de vente de logiciels. Créez une nouvelle page en utilisant cette mise en page.

Ajouter du contenu dynamique à la page

Revenez au backend de cette page et ajoutez du contenu dynamique à chacun des tableaux de prix.

Ajouter une nouvelle ligne sous le tableau des prix sur la page

Structure des colonnes

Continuez en activant Visual Builder et en ajoutant une nouvelle ligne ici :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Ensuite, accédez aux paramètres d'espacement et ajoutez une marge personnalisée.

• Marge supérieure : 100 pixels
• Marge inférieure : 100px

Ajouter le module CTA à la colonne 1

Connecter le champ de titre au contenu dynamique de niveau d'adhésion 1

Le premier module dont nous aurons besoin dans la colonne 1 est un module d'appel à l'action. Liez le champ de titre au champ de niveau d'adhésion 1 que vous avez créé dans la partie précédente de ce didacticiel.

Connecter la zone de contenu à la description de l'adhésion 1 Contenu dynamique

De même, connectez la zone de contenu à la description de l'adhésion 1.

Couleur de l'arrière plan

Ensuite, accédez aux paramètres d'arrière-plan et modifiez la couleur d'arrière-plan du module CTA.

• Couleur d'arrière-plan : #ffffff

Image de fond

Ajoutez également une image d'arrière-plan subtile. Vous pourrez trouver l'image d'arrière-plan suivante dans votre médiathèque après avoir téléchargé la page de destination de la vente de logiciels :

• Image de fond : software-sale-13.png

Paramètres de texte

Continuez en allant dans les paramètres de texte et en modifiant l'orientation du texte du module.

• Orientation du texte : à gauche

Paramètres du texte du titre

Pour correspondre au style de conception de la page de destination, apportez également quelques modifications aux paramètres du texte du titre.

• Police du titre : Rubik
• Poids de la police du titre : léger
• Couleur du texte du titre : #4258ff
• Taille du texte du titre : 40 px
• Hauteur de la ligne de titre : 1,3 em

Paramètres du corps du texte

Idem pour les paramètres du corps du texte.

• Police de caractère : Rubik
• Poids de la police du corps : moyen
• Couleur du corps du texte : rgba(0,0,0,0.34)
• Taille du corps du texte : 15px
• Hauteur de la ligne du corps : 1,8 em

Espacement

Ajoutez ensuite un rembourrage supérieur.

• Rembourrage supérieur : 60px

Frontière

Et ajoutez « 8px » à chacun des coins supérieurs du module.

Boîte ombre

Enfin, nous ajouterons une ombre de boîte subtile pour créer de la profondeur sur la page.

• Position verticale de l'ombre de la boîte : 50px
• Force de flou d'ombre de boîte : 100px
• Couleur de l'ombre: rgba (66,88,255,0.2)

Ajouter un module de texte à la colonne 1

Connecter la boîte de contenu au contenu dynamique du prix 1

Allez-y et ajoutez un module de texte juste en dessous du module d'appel à l'action dans la colonne 1. Liez la zone de contenu de ce module au contenu dynamique Prix 1.

Couleur de l'arrière plan

Continuez en changeant la couleur de fond de ce module.

• Couleur d'arrière-plan : #ffffff

Paramètres de texte

Modifiez également les paramètres de texte.

• Police du texte : Rubik
• Poids de la police de texte : léger
• Couleur du texte : #4258ff
• Taille du texte : 70 pixels
• Hauteur de la ligne de texte : 1 em

Espacement

Ajoutez ensuite des valeurs de remplissage personnalisées.

• Rembourrage inférieur : 60px
• Rembourrage gauche : 40 px

Frontière

Continuez en allant dans les paramètres de bordure et en ajoutant « 8px » aux deux coins inférieurs.

Boîte ombre

Enfin, donnez également à ce module de texte une ombre de boîte.

• Position verticale de l'ombre de la boîte : 80px
• Force de flou d'ombre de boîte : 100px
• Couleur de l'ombre: rgba (66,88,255,0.2)

Faites glisser le module de boutons vers la colonne 1

Le dernier module dont nous aurons besoin dans la première colonne est un module de bouton. Clonez l'un des modules de boutons que vous pouvez trouver dans la ligne précédente et placez-le dans la colonne 1.

Changer l'espacement

Ouvrez les paramètres du module de boutons et ajoutez une marge personnalisée.

• Marge supérieure : 30px
• Marge inférieure : 50px

Cloner tous les modules de la colonne 1 et les placer dans les colonnes restantes

Pour gagner du temps, nous allons cloner deux fois les trois modules de la colonne 1 et placer les doublons dans les colonnes restantes de la ligne.

Modifier les modules dans la colonne 2

Module CTA

Connecter le champ de titre au contenu dynamique de niveau d'adhésion 2

Nous devrons modifier les doublons, en commençant par le module CTA dans la deuxième colonne. Connectez le champ de titre au contenu dynamique de niveau d'adhésion 2.

Connecter la zone de contenu à la description de l'adhésion 2 Contenu dynamique

Faites la même chose pour la zone de contenu.

Ajouter un arrière-plan dégradé

Ajoutez ensuite un arrière-plan dégradé au module.

• Couleur 1 : #6959ff
• Couleur 2 : #c1bfff
• Direction du dégradé : 15 deg
• Position de départ : 22 %
• Position finale : 95 %

Changer la couleur du texte du titre

Modifiez également la couleur du texte du titre.

• Couleur du texte du titre : #ffffff

Changer la couleur du corps du texte

Idem pour la couleur du corps du texte.

• Couleur du corps du texte : #ffffff

Changer l'espacement

Pour mettre en évidence ce tableau de prix particulier, nous allons également jouer avec les valeurs d'espacement.

• Marge supérieure : -50px (ordinateur de bureau), 0px (tablette et téléphone)
• Rembourrage supérieur : 100 pixels

Module de texte

Connecter la Content Box au contenu dynamique Price 2

Continuez en ouvrant le module de texte dans la colonne 2 et liez la zone de contenu au contenu dynamique Prix 2.

Changer la couleur d'arrière-plan

Modifiez ensuite la couleur d'arrière-plan de ce module.

• Couleur d'arrière-plan : #6959ff

Changer la couleur du texte

Et changez la couleur du texte en blanc.

• Couleur du texte : #ffffff

Changer l'espacement

Enfin, modifiez les valeurs de remplissage personnalisées dans les paramètres d'espacement.

• Rembourrage inférieur : 120px
• Rembourrage gauche : 40 px

Modifier les modules dans la colonne 3

Module CTA

Connecter le champ de titre au contenu dynamique de niveau d'adhésion 3

Nous devrons également modifier les modules de la colonne 3. Liez le champ de titre au contenu dynamique de niveau d'adhésion 3.

Connecter la zone de contenu à la description de l'adhésion 3 Contenu dynamique

Idem pour la zone de contenu.

Ajouter un arrière-plan dégradé

Ensuite, ajoutez un fond dégradé au module.

• Couleur 1 : #c87cff
• Couleur 2 : #ffbcf8
• Direction du dégradé : 18 degrés
• Position de départ : 22 %
• Position finale : 95 %

Changer la couleur du texte du titre

Changez la couleur du texte du titre en blanc.

• Couleur du texte du titre : #ffffff

Changer la couleur du corps du texte

Faites la même chose pour la couleur du corps du texte.

• Couleur du corps du texte : #ffffff

Module de texte

Connecter la Content Box au contenu dynamique Price 3

Continuez en ouvrant le module de texte dans la colonne 3 et en modifiant également le contenu dynamique ici.

Changer la couleur d'arrière-plan

Ajoutez ensuite une couleur d'arrière-plan différente.

• Couleur d'arrière-plan : #c87cff

Changer la couleur du texte

Enfin, changez la couleur du texte en blanc et le tour est joué ! Vous avez maintenant trois tableaux de prix entièrement dynamiques sur votre page !

• Couleur du texte : #ffffff

Dernières pensées

Ce cas d'utilisation fait partie de notre offre Black Friday où nous partageons 6 pages de destination GRATUITES en édition limitée avec les clients et les membres à vie du Black Friday. En rejoignant notre communauté habilitée pendant ces jours et en devenant membre, vous obtiendrez :

• 25% DE RABAIS SUR TOUT
• Les 6 pages de destination gratuitement
• Accès à nos superbes thèmes et plugins
• Prix ​​bonus

Saisissez l'opportunité et devenez membre dès aujourd'hui !