Lorsquamp;rsquoil samp;rsquoagit damp;rsquoafficher un plan tarifaire sur votre site Web, pouvez à tour de rôle créer des pages ou des sections de prix absolument étonnantes et attrayantes. Lors de la création damp;rsquoun site Web en utilisant Divi, il est très probable que le module liste de prix sera sélectionné. Ce module permet damp;rsquoajouter rapidement des listes de prix et de les modéliser au besoin. Cependant, si souhaitez ajouter plus damp;rsquointeraction dans cette partie spécifique de la page, pouvez également utiliser le module Switch pour afficher le calendrier de prix par clic. Il samp;rsquoagit damp;rsquoun bon moyen de mettre en évidence un régime tarifaire particulier en le gardant ouvert et en fermant les deux autres.
Dans ce tutoriel, nous allons progressivement montrer comment utiliser le module swap de Divi pour créer une belle conception de liste de prix swap. Une fois que avez trouvé un moyen, pouvez créer divers programmes de frais de clic switch pour namp;rsquoimporte quel type de site que créez. Allons y! Aperçu avant damp;rsquoaller plus loin dans ce tutoriel, jetons un coup damp;rsquooeil rapide aux résultats sur différents écrans de taille. Commençons à créer! Utilisez le constructeur visuel de Divi pour créer une nouvelle page ou ouvrir une page existante. Ajoutez une nouvelle zone à la page, ouvrez les paramètres de zone, et ajoutez un remplissage personnalisé en haut et en bas pour créer de lamp;rsquoespace en haut et en bas de la zone.
Remplissage en haut: 160 pixels remplissage en bas: 160 pixels Après avoir modifié les paramètres damp;rsquoespacement des pas, pouvez continuer à ajouter de nouvelles lignes en utilisant la structure de colonne suivante: Vous namp;rsquoavez pas besoin damp;rsquoapporter de modifications aux lignes, alors ajoutez un formulaire texte maintenant. Saisissez une partie du contenu H2 que avez sélectionné dans la zone de contenu du formulaire. Impo
Radial: bas colonne 3 position initiale: 30% position finale colonne 2: 30% Après avoir ajouté un fond de rampe, allez à lamp;rsquoonglet conception et modifiez les paramètres de taille.
Faire cette ligne pleine largeur: Oui utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 2 Ajouter un module de commutation à la colonne 1 ajouter du contenu il est temps de commencer à créer un plan tarifaire différent! Ajouter un nouveau module damp;rsquoéchange dans la première colonne et entrer un titre. Pour styliser les différents éléments de la boîte de contenu, nous avons utilisé des balises HTML supplémentaires. Continuez, copiez les lignes suivantes et ajoutez les à lamp;rsquoonglet texte de la zone de contenu: amp;amp Nbsp
Votre contenu est ici. Modifier ou supprimer ce texte en ligne ou dans les paramètres de contenu du module. Vous pouvez également styliser tous les aspects de ce contenu dans les paramètres de conception du module, ou même appliquer des CSS personnalisés à ce texte dans les paramètres avancés du module.
amp;amp Nbsp
$ 30 ans.
Non.
amp;amp Nbsp
Acheter maintenant
amp;amp Nbsp
État pouvez choisir damp;rsquoactiver ou damp;rsquoéteindre lamp;rsquoétat du module. Pour voir tous les changements que avez apportés au reste de ce tutoriel, je recommande de rester ouvert jusquamp;rsquoà ce que ayez terminé damp;rsquoéditer tous les différents paramètres de conception.
Allez à la configuration de fond du module Switch pour continuer et ajouter une couleur de fond blanche. Couleur de fond: FFFFFF
Les paramètres de lamp;rsquoicône changent la couleur de lamp;rsquoicône sur lamp;rsquoonglet conception suivant. Couleur de lamp;rsquoicône: 000000 Active désactive les paramètres et modifie la couleur de fond pour activer désactiver les paramètres de commutation.
Allumez la couleur de fond: rgba (255255255,0) Les paramètres du texte du titre sont ensuite modifiés. Police de titre: police de titre gothique distincte police de titre gras couleur du texte de titre: 000000
