How to Use the Global Styles Feature on Background Sections
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, access the “Style Options” from 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 “Style Options” from the left sidebar. From there, click on the “Style” field:
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 on this background section as well.
Editing the Global Styles of background sections
If you want to edit a “Global Style” that you have saved for your background sections, you will have to do the following:
Click on one of the background sections that has the "Global Style" you want to edit and then open the “Style Options” from the left sidebar. From there click on the pencil icon, representing the “Edit Global Style” option:
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 respective background section and access its “Style Options” from the left sidebar. Then, click on the “Unlink Global Style” option next to the “Style” section:
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, you will first have click on one of the background sections that has the respective style and access the “Style Options” in the left sidebar.
From there, click on the “More” option (three dots icon) which is next to the “Style” section:
Then, based on which option you would like to use, you will have to select either “Rename” or “Delete”:
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”:
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.
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:
- How to Use the Global Style Feature on Buttons
- How to Use the Global Style Feature on Content Boxes
Hopefully, this article was useful for you. If so, please reward our efforts with a smile below.