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 them and using the available options for each of them.
However, besides these options, you also have the specific options that are available for the landing page itself, as a whole.
The various options you can customize your landing page with can be found in the “Settings” menu. Thus, in order to access them, first, you have to open the “Settings” menu, by clicking on the gear icon in the right sidebar:
Once you have opened the “Settings” menu, you will see three sections that contain the options you can customize your landing page with: “Global”, “Landing Page Settings” and “Advanced Settings”:
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. Click on the particular text type that 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 then, follow the steps given. In case you need more info on how to edit your headers and footers, check out this tutorial.
2. 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.
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 for 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 have purchased and activated 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:
Add a Header
If you want to add a header, click on the "Header" section, in the left sidebar:
This will make the "Header" section visible. Then, in the top part of the editor, where the header should be, click on the "Insert Header" option:
A pop-up will open, where you can choose a header from. You have the option of choosing one of your previously saved "Headers", or creating a new one:
After finding the one you prefer, click on it, to select it, and click on "Insert Header":
Then, you can use the "Header" options from the left sidebar to customize this section:
Add a Footer
Just as you can add a "Header" section to your Landing Page, you can also add a "Footer" section. For that, click on the "Footer" section, from the "Main Options" section of the left sidebar:
After that, go to the bottom side of your page, and click on "Insert Footer":
From here on, the steps are exactly the same as in the case of adding a "Header":
- Choose a section from your previously saved "Footers", or create a new one;
- Customize it using the "Footer" options from the left sidebar:
Also, feel free to take a look at this article, if you need to understand how to use all of the "Footer" section options.
Then, after the possibility of adding a "Header" and a "Footer section to the Landing Page, there are two more options here that you can choose from:
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 about, 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: a 'Solid color', an 'Image', the 'Gradient' option, or a 'Pattern'.
If you need more details about this customization, check out the “Background Style” part of this tutorial.
The “Landing Page Settings” from the right sidebar are related to the theme that you are using to create your website:
Disable or Enable the Theme’s CSS
From here you can disable or enable the theme’s CSS by clicking on the “Disable Theme CSS” or “Enable Theme CSS” options.
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.
Revert to Theme
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.
3. Advanced Settings
The last set of options that you can use to customize your landing page is the “Advanced Settings” from the “Settings” menu. You will have to click on this section of the menu 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 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 anymore, you can simply turn them off by clicking on the “Turn Off Save Reminders” option.
You are welcome 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 how various options and elements work in Thrive Architect, please follow this link.
We hope this article was useful for you. If so, give us a smile below :)