If you have chosen a landing page template while building your website, you have the possibility to customize it to best fit your purposes.
You can customize each element on the landing page individually, by simply clicking on it and using the available options from the left sidebar.
However, besides these options, you also have the specific options that are available for the landing page itself.
In order to access them, first, you have to head over to the “Settings” section, by clicking on the gear icon in the right sidebar:
Now you will see three sections from where you can customize your landing page:
For the remaining sections, we have these articles in our knowledge base that you might find useful:
Click on the “Global” section from the “Settings” menu to be able to use the following “Global Settings” for your landing page:
Here you are able to customize the different types of texts (headings, paragraphs, hyperlinks, plain texts) that appear on your landing page.
After you click on the “Fonts” section a pop-up window will open and you can use the various customization options to personalize the text types. Simply click on the text type you wish to customize and you will see that its specific options will appear in the left sidebar.
After you are done click on the “Close” button from the bottom right part of the window and the changes you have made will be visible on the page:
Note: The text customization that you do here is part of the “Global Settings”, which means that it will be applied to every text of the same type on your page.
For instance, if you choose the “Heading 3” to have a blue color, then, all the Heading 3 types will turn blue on your page and every other Heading 3 that you will add to the page will be blue as well.
Naturally, you can change these settings anytime you find it necessary. This way you save time and effort while building your landing page.
You can read more about how to use the font settings and further customize them in this article.
Header & Footer
With the help of the “Header” and the “Footer” sections, you can easily add new headers or footers to your landing page or insert the ones that you have previously created since these are global elements as well.
All you have to do is click on the respective sections and follow the steps. In case you need more info on how to edit your headers and footers, check out this tutorial.
Note: If you have Thrive Theme Builder active on your website, then your landing page might load by default the headers and footers that you've set up while configuring your Site Wizard.
If the header, for example, is loaded by default but you would prefer to hide it, simply click on it and then use the visibility section of the left sidebar to do that:
Landing Page Settings
In order to access these, look for “Landing Page Settings” in the “Settings” menu and click on it:
Then, the options will open in two places: the left sidebar, as well as the right sidebar.
Let's go first through the options available in the left sidebar:
Status & Visibility
The first section from the left sidebar allows you to change the status and visibility settings of the page:
The first option is the "Visibility" one, and you can click on the option next to it, to change the visibility of the landing page:
When you click on that, a small pop-up will open, with all of the available options:
A public page will be visible to everyone.
A private page will only be visible to the administrators and editors of the page.
A Password Protected page is a page that can be accessed only by someone who has the password.
You can find more information about these options here.
Next comes the "Publish Status" option, from where you can choose to publish or save the page as a draft. If the page is published, you will have the "Switch to draft" option, and, if it is a draft, you will be able to publish it:
The next section is the "Main Options" one:
Here, you can first add a "Header" or a "Footer" to the landing page, and then use some options to customize these parts.
Note: If you are using Thrive Theme Builder on your site, you will have two more available sections here: the “Top” and “Bottom” ones, and you can also choose between various pre-designed templates:
These dedicated articles from our knowledge base go into more detail about using the "Header", "Top", "Bottom" and "Footer" sections:
Layout covers entire screen width
Firstly, you can make the layout of your landing page cover the entire screen width, by activating the switch next to this option:
Secondly, in case you do not want the content to cover the entire screen width, you can select an optimal content width by dragging the slider under the “Content Maximum Width” option or entering a value manually, in the box next to it:
Note: If the "Layout covers entire screen width" option is off, then the second one will be called "Layout Maximum Width", instead of "Content Maximum Width":
The next section of the left sidebar is the "Typography" one:
Besides changing these options from the right sidebar (Settings -> Global), you can also change the "Typography" settings of the landing page from here.
For this option, we have created a separate article, so please check it out if you need more information about this. You can find it here.
This option will allow you to customize the background of your landing page in various ways. You can add different layers as the background of your landing page - you can add a solid color, or an image, patterns, and so on:
If you need more details about this feature, check out this article from our knowledge base.
Now moving on to the options available in the right sidebar:
This option allows you to revert the landing page to the theme page. However, please keep in mind that if you choose to do this, you will lose the custom content that you have added to the landing page.
After you click on this option, you will have to confirm that this is indeed what you wish to do and once you have confirmed, the landing page will be reverted to the theme page.
If you do not have Thrive Theme Builder active on your website, then two additional options will appear here in the right sidebar:
Disable or Enable the Theme’s CSS
From these two options, you can disable or enable the theme’s CSS.
By default, the “Disable Theme CSS” option is selected, meaning that the style properties of your theme will no longer be loaded on your landing page.
This is helpful because depending on what theme you use, there might be a lot of style information (coding) that was loaded before, but it is not always necessary to be loaded. Thus, your page will load faster.
However, please keep in mind, that this option also has its limitation. In the case of elements, such as “WordPress Content”, that requires style information from the theme, you will have to leave this option unchecked for the element to load properly.
The last set of options that you can use to customize your landing page is the “Advanced Settings”.
You will have to click on this section of the right sidebar to open it:
The “Advanced Settings” consist of a few options regarding the HTML and CSS of your landing page, as well as a few other options:
View Page Source (HTML)
If you click on this option, you will see the page source (the HTML code of your page). You can edit and change this code directly from the window that opens.
After you are done you can click on the green check sign, from the upper right part of the window, and the changes will be applied to the code or you can use the “x” icon to cancel and exit the window:
Just like with the previous option, clicking on the “Custom CSS” will open a window where you can add a custom CSS code to your page.
Once you have added the code, you can click on the check sign from the upper right part of the window to apply it to your page:
With the help of this option, you can set up page events in order to make sure that your visitors will see your offers and promotions:
If you wish to learn more about setting up page events, watch this tutorial.
Just as its name says, here you can add custom scripts to your page. After you click on the option, complete the designated fields (the header, the body, or the footer section) with your custom scripts:
Once you have done that, the scripts that you inserted will appear in the corresponding sections of your page.
CSS in the <head> section
In general, Thrive Architect will strip the custom CSS from the <head> section of landing pages. This is usually extra CSS that is not needed throughout the landing page.
You have the possibility to disable this functionality by ticking the checkbox that appears after you click on this section:
However, please keep in mind that doing this might prevent some landing page settings from working properly.
Turn Off Save Reminders
When you are editing a page in Thrive Architect, you receive periodical reminders to save your work:
These reminders disappear after a few seconds and their purpose is to make sure you don’t lose any of your progress.
However, if you don’t wish to receive these reminders any more, you can simply turn them off by clicking on the “Turn Off Save Reminders” option.
Feel free to use all of the above-mentioned settings and options to make sure your landing page is customized according to your preferences.
In case you would like to find out more about landing pages and how you can use them on your website, make sure to check out this section of our knowledge base.
We hope this article was useful for you. If so, give us a smile below :)