• Accueil / Pardot / Comment ajouter des…
, Comment ajouter des bascules à votre page de préférences Pardot<span class="wtr-time-wrap after-title"><span class="wtr-time-number">1</span> minutes de lecture</span>

Comment ajouter des bascules à votre page de préférences Pardot1 minutes de lecture


Vous cherchez un moyen de pimenter votre page de préférences Pardot ? Essayez d’utiliser des bascules au lieu de cases à cocher. Dans ce tutoriel, je vais vous montrer comment créer une page de préférences qui utilise des bascules au lieu de cases à cocher. Avec un peu de HTML et du CSS, vous pouvez transformer votre page de préférences en quatre étapes simples.

Démo

Voici un exemple de ce que nous allons créer dans ce tutoriel.

Voir le stylo
Page des préférences de Pardot avec des bascules
de Jenna Molby (@jennamolby)
au Stylo de code.

Étape 1 : Stylisez votre page de préférences

Cet article ne couvre pas les bases du style de votre page de préférences Pardot. Cliquez ici pour apprendre à personnaliser votre page à partir de zéro.

Étape 2 : Mettre à jour le modèle de page de préférences

Pour que les bascules fonctionnent, vous devrez modifier le forme section de votre modèle de mise en page. Accédez au modèle de mise en page et cliquez sur l’onglet formulaire. Remplacez le contenu par ce code HTML.

Qu’est-ce qui a changé ?

  1. Au lieu de placer les champs de formulaire dans un paragraphe, les champs de formulaire sont placés dans un liste ordonnée avec une classe nommée « commutateurs ».
  2. Certains jQuery sont ajoutés pour mettre à jour le balisage HTML du formulaire de préférences.

Étape 3 : télécharger des icônes dans Pardot

Il y a deux icônes qui devront être téléchargées dans Pardot, une icône de coche et une icône « x ». Téléchargez les images, puis chargez-les dans la bibliothèque de contenu de Pardot.

, Comment ajouter des bascules à votre page de préférences Pardot<span class="wtr-time-wrap after-title"><span class="wtr-time-number">1</span> minutes de lecture</span>

Étape 4: Ajoutez le CSS pour les bascules

Ajoutez ce CSS à votre modèle de mise en page. Mettez à jour les deux premières lignes pour inclure les chemins des images vers les icônes que vous avez téléchargées à l’étape 4.

Maintenant, votre page ressemblerait à ceci, avec les cases à cocher transformées en bascules.

, Comment ajouter des bascules à votre page de préférences Pardot<span class="wtr-time-wrap after-title"><span class="wtr-time-number">1</span> minutes de lecture</span>

Facultatif : ajoutez tout CSS supplémentaire

J’ai ajouté du CSS supplémentaire à ma page pour styliser les étiquettes, les descriptions de liste et les options de ma page. Voici le CSS que j’ai ajouté.

Le résultat final

Voici à quoi ressemble ma dernière page.

Voir le stylo
Page des préférences de Pardot avec des bascules
de Jenna Molby (@jennamolby)
au Stylo de code.

Des questions?

Envoyez-moi un tweet @jennamolby, ou laissez un commentaire.

Remerciement spécial à Tuts+ pour un excellent tutoriel sur les bascules CSS. Ce didacticiel a été l’inspiration pour le créer dans Pardot.





Source de l’article traduit automatiquement en Français

Besoin d'aide ?
Vous utilisez Pardot depuis un certain temps mais vous n'êtes pas sûr d'en
exploiter tout le potentiel

Notre analyse de votre Pardot offerte dès aujourd'hui
Merci, vous pouvez compléter notre questionnaire
Nous allons revenir vers vous rapidement !

Fermer