The “Global Style Feature” allows you to create a certain style for a Background Section, which you can later apply on any other background section from the page you are creating.
Here is how this feature works:
Customize the background section
In order to have a global style that you can apply to multiple background sections, you need to save a background style as global.
To do that, first, add a background section to your page and then, customize it, using its options that have appeared in the left sidebar. You can change its width, height, background style, borders, and much more.
Save the Style as ‘Global’
Once you have finished customizing the background section, you can save its style as a global one and use it for other background sections as well.
In order to do this, look for the “Section Template” in the left sidebar and then, click on the file and globe icon, which represents the “Save as Global Style” option:
A drop-down will open, where you will have to give a name to the style of this background section. Fill in the name in the appropriate field and click on “Apply”:
After this is done, the style of the background section will be saved as “global”, thus you will be able to apply it on any other background section from your page.
Adding a Global Style to background sections
You can add a previously saved “Global Style” to any of your existing or new background sections following these few easy steps:
Click on the background section that you want to apply the “Global Style” to and access its “Section Template” from the left sidebar:
This will open a drop-down that contains every “Global Style” for background sections that you have previously saved:
All you have left to do is to select the respective “Global Style” that you want to apply to your background section and after that click on the “Apply” button:
This way, the “Global Style” will be added to the background section and will act accordingly. This means that whenever changes are brought to this “Global Style”, they will be visible in this background section as well.
Editing the Global Styles of background sections
Once you have applied a global style to your background section, you can still go ahead and edit it if you want. You will notice that the “Section Template” will now show up in the left sidebar with a new set of options:
To edit the saved style, click on the pencil icon:
The editing mode of the ”Global Style” will be opened. You will be able to use the “Typography,“ ”Background Style”, “Borders & Corners” and “Shadow” options from the left sidebar in order to edit/customize the style of the background section.
When you have finished editing the “Global Style” according to your preferences, click on the “Done” button, from the bottom middle part of the page, to exit the editing state:
Important!
Please keep in mind that every time you edit a “Global Style”, the changes that you make will be visible on every element that has the same global style added to them, not just the one element that you edit.
Unlink a background section from a Global Style
If you don’t want a certain background section to have a “Global Style” anymore, then you can unlink it from the respective style. This will mean that it will no longer be connected with the other background sections that have that “Global Style”.
Thus, when the “Global Style” will be modified, the changes will not affect this background section anymore and you will also be able to edit it separately.
In order to unlink a background section from a “Global Style” click on the “Unlink Global Style” option, form the same left sidebar:
Once you do that, the background section will be unlinked from the “Global Style”.
Rename or delete a Global Style from background sections
In case you want to rename or delete a “Global Style” from your background sections, click on the “More” option (three dots icon):
Then, based on which option you would like to use, you will have to select either “Rename” or “Delete”:
Rename
If you choose to rename the global style, then, you will see the same drop-down appear that you have used to name the style.
Simply replace the current name, in the background style name field, with the new name that you want to give to the style and then click on “Apply”:
Delete
If you want to remove the “Global Style” and you click on “Delete”, a warning message will appear, letting you know that deleting the “Global Style” means that every element which has that style will be set to its default style.
If you confirm that this is indeed what you want to do, the style will be deleted, and just like the warning message said, the background sections that had that style will be reset to the default style.
Important Notes
When you apply a “Global Style” to a content box or a background section, that content box/background section will be synchronized with the other content boxes/background sections that have the same “Global Style” applied to them. This means that the options in the left sidebar will be available as follows:
-
The options that are not related to the CSS/the style of the element (Main Options, Decorations, Layout & Position, Scroll Behavior, Responsive, HTML Attributes) will be available when you click on the element and you can modify them directly for the element itself.
-
However, the options that concern the CSS/style of the element (Typography, Background Style, Borders & Corners, Shadow) will only be available when you enter the editing mode of the “Global Style” of the element. This happens because these are options that apply to the “Global Style”, thus, have a global level, so the changes you make using them will be reflected on each element with the same style.
In case you want to make adjustments to the CSS options for the element itself, you can unlink the element from the “Global Style” as described in the respective sections above for both content boxes and background sections.
Using the “Global Style” feature will save you time and together with the other features such as the “Global Gradients”, as well as the “Global Colors”, they will contribute to you having an effortless website-building experience.
If you need more info on how to use various Thrive Architect features and elements, then, please check out our tutorials here.
Also, if you want you can check out these articles to see how this feature works on other elements:
Hopefully, this article was useful for you. If so, please reward our efforts with a smile below.