Customizing Campaigns with CSS

Customizing Campaigns with CSS

When looking to customize a campaign beyond the standard options available, you can further customize the campaign using CSS (Cascading Style Sheets).

To accomplish customization via CSS you will need to know the various classes used within the campaign, below is a list of campaign attributes and their corresponding classes.

.cu-btn

Email

.fb-btn

Facebook

.ig-btn

Instagram

.li-btn

LinkedIn

.mgr-btn

Messenger

.pass-btn

Passcode

.skip-btn

Free WiFi

.twl-btn

SMS

.tw-btn

Twitter

.vk-btn

Vkontakte

.custom-fields input

Form Input

.social-btn

Form Button

.buy button

Payment Button

When adding CSS in the Advanced section of the campaign, all CSS needs to be contained within style tags <style></style>, as shown.

When changing button colors there are a couple of tools you can use. One is an HTML Color Picker or use an Online Image Color Picker and match the color from your customers web property exactly.

If you take the time to familiarize (or just Google) CSS attributes you can also move objects in the campaign for further customization, like moving logos, creating greater spacing between objects or just increasing or decreasing font sizes.

For the ability to make additional changes we recommend downloading the Firefox Quantum: Developer Edition. With the Firefox browser you can open your landing page preview,right click on a page element and choose Inspect Element. This will show you the Element ID/class and the current CSS configuration. You can test any changes you wish to make in the browser and even copy directly into the Advanced section of your campaign, as seen in the below video.


Did this answer your question?


Platform Support

Powered by HelpDocs