Customizing a ClickDimensions Landing Page with CSS

If you are creating a Landing Page in ClickDimensions with the Block Editor you may want to be able to add extra scripts like CSS, JavaScript, and the like to your page. This article will give an example of how you can edit the CSS of the page for advanced styling options.


Here is our starting Landing Page. We have some basic text with bare-bones formatting, an image, and a background color for the page.

unstyled-landing-page

To add some CSS, we’ll navigate to Page > Add External Resources.

unstyled-landing-page-add-external-resources

It opens up a new window for us.

landingPageExternalResources

I’ll paste the CSS I wrote in the Head section and click Save. The page will update with the new format as specified by the CSS.

add-landing-page-css

CSS formats a background for the container, a white overlay for the text box, the bolded text and header text.

styled-landing-page


Here is our starting Landing Page. We have some basic text with bare-bones formatting, an image, and a background color for the page.

LandingPagenoCSS

To add some CSS, we’ll navigate to Page > Add External Resources.

LandingPageExternal

It opens up a new window for us.

LandingPageExternalWindow

I’ll paste the CSS I wrote in the Head section and click Save.

LandingPageExternalCSS

CSS formats a background for the container, a white overlay for the text box, the bolded text and header text.

LandingPagewithCSS