(3 minutes read)
Under CAN-SPAM Act and GDPR Policy, every email must have a link to Preference Page and Unsubscribe Page in the email footer, complying with these policies Pardot provides Unsubscribe Page and Preference Page. These pages use the Standard Layout provided by Pardot.
While working for a US-based customer, the demand for customizing these pages as per their brand was a critical yet interesting styling challenge. Keeping the standard functionality the same only look and feel were upgraded. Styling these pages involves overriding the CSS of standard Pardot styling through the class tags.
To customize the Preference Page by default, the preference page uses the “Standard”
layout template. You can edit the “Standard” template or create a brand-new layout template
Marketing > Landing Page > Layout Templates > New Layout Template
Paste your HTML into the template. Add the tag %%content%% where you want the
preference center form to appear.
The preference center has two different CSS layouts-
- If you want to style the page other than %%content%% then you need to apply CSS on the Layout tab. You can link the CSS stylesheet for that, or you can use the <style> tag in the header
- If you want to style the Preference Centre form, you have the predefined classes from Pardot, one can override them. To style the preference center form you need to add the CSS in the Form tab of the Page layout using the <style> Tag
Here is an example where the Pardot CSS has been overridden and the Preference Centre
has a brand-new look
standard Pardot CSS classes.
More about the Author: Jai Jethanandani