All Collections
Thrive Architect
Landing Pages
Use the Landing Page Script Manager to Insert CSS Code Into all Landing Pages
Use the Landing Page Script Manager to Insert CSS Code Into all Landing Pages

Find out how to include CSS code into all Landing Pages, with the help of the Script Manager from your Thrive Dashboard

Alexandra Rus avatar
Written by Alexandra Rus
Updated over a week ago

There might be situations in which you would like to apply some custom styling to your Landing Pages, and the only way in which you could do that is with the help of a custom CSS code.

This article will show you how you can do that, and insert custom CSS across all your Landing Pages, without having to edit each one individually.

Add or Edit a Landing Page

First things first, you will have to open your Landing Page, or simply add a new one from your WordPress dashboard.

This is how the Landing Page that I want to apply my custom CSS to looks like:

The change that I want to achieve with the help of the custom CSS code is the following: the color of the paragraph located under my first heading will be pink, instead of black:

So for that, I will need a custom CSS that will basically overwrite the existing color of all paragraphs, across all the Landing Pages from my website.

Add the Custom CSS

To do that, head over to your WordPress admin dashboard and access the Thrive Dashboard:

In the new dashboard that appears on the screen, look for the Analytics & Scripts card and click on it:

Here in the Script Manager, you will be able to add a new script:


This is the script we will be using for this example:

<style>
p {
color: pink !important;
}
</style>

Important!

The most important thing worth keeping in mind here is that in order for this to work properly, you will have to add the "<style>" & "</style>" tags at the beginning and end of your code, just as seen above.


Paste your custom CSS in the first field and then give it a name. Once done, click on the downwards pointing arrow next to the "Placement" field:

The code will have to be added in the header, so make sure to select the "Before </head>" option from the drop-down:

Next, check the box next to the "Landing Pages" to make sure the code will be applied to all your Landing Pages:

Now this is done, and you can click on "Continue":

After doing this, you can go ahead and open one of your Landing Pages and see how the changes have been applied to them. In this example, just as already mentioned, the paragraph text will become pink:

This is how easily you can add custom CSS to all your Landing Pages, without having to individually open and edit each one of them.

I really hope you found this tutorial useful. If so, make sure to rate it with a smile below :)

Did this answer your question?