While the ClickDimensions landing page block editor is good for creating pages from scratch, marketers can sometimes find themselves in need of a coded or templated approach to landing page design. In this case, the freestyle editor is helpful in allowing you to include your own custom HTML and CSS on a webpage.
But what happens when you have a CSS template or library already defined for you? Naturally, you don’t want to duplicate a document by copying and pasting it in the header between <style> tags. Rather, you may want to include your styles as a stylesheet in your HTML using a <link> tag. If you choose to go this route, many people assume you need to host your CSS files externally to ClickDimensions. However, that’s not true. You can use the ClickDimensions document manager to store and serve your ClickDimensions CSS files.
To set this up, you will need:
- Your landing page HTML, ready to copy and paste into the freestyle editor.
- Your CSS file saved and ready to upload to the document manager.
- A landing page web content record set to use the freestyle editor.
Here’s a screenshot of how your landing page record should be set up:
After you have saved your landing page record, we will click the design button to open the designer and get down to business:
From here, click into the source view of the freestyle editor and paste your HTML:
Notice that, inside the <head> tag, there is a <link> tag that looks like this:
“<link href=”assets/css/main.css” rel=”stylesheet” />”
Next, you will need to upload your CSS file to the document manager and then update this tag to reference the new location of the CSS file. To do this, start by placing a link to a newly uploaded file on your landing page. Do this by switching out of the source mode and into the design view. Then, you will want to click on the hyperlink manager:
Then, select Upload a File:
Once your CSS file is uploaded, it should show up with your other files in its respective folder:
Now, to provide some easily identified link text, click Insert Link:
Now that the link to this file has been inserted into the page, go back to the Source view, identify the href attribute of the newly created link (<a> tag) and copy the URL there. Then, paste that into the href attribute of the <link> tag calling in the CSS styles:
After copying and pasting the URL, delete the link you
inserted into the page and the <link> tag should look similar to this:
<link href=”https://app.clickdimensions.com/blob/clickdimesionscom-ajvpp/files/main.css” rel=”stylesheet” />
Now that your CSS is uploaded and linked, you should see a properly styled preview in the design view:
If you want to see your landing page full-size and outside of the editor, save the landing page, then click on Embed, select Embed As Link and follow the link provided:
Now that you have copied your HTML template into a freestyle editor, uploaded your custom CSS into the document manager and linked to it in the head of your landing page, you’re ready to share your new page with the world! It’s also worth noting that you can leverage this technique multiple times within the same landing page, so, if you have a grid framework that you use and a set of default company styles that exist in different CSS files, you can insert both using two separate <link> tags.
The post Using Custom CSS Files with ClickDimensions Landing Pages appeared first on ClickDimensions Blog.