Thrive Knowledge Base

How to Use the Global Styles Feature

“The Global Styles” feature works on the same principle as the other global features (such as the Global Colors).  You give a certain style to a button, a content box or a background section and then, you save it as a “Global Style”.

This means that the next time you will add another element of the same type (button, content box or background section) you will have the option of choosing the same style for it.

This way you can have buttons, for example, that look alike/have the same styling without having to go through the process of styling them again and again.

Furthermore, you will be able to make style modifications in the same time for all the elements that have global styles applied to them. You can simply modify one element and the changes will be applied to every element of the same kind with a global style.

Here is how to use this feature on the three elements that it is available on:

1. ​Global Styles on Buttons

Customize the button

First, you will need to add a button to your page by dragging and dropping it. Then, you will see that the options of the button will open in the left sidebar.

Use these options to customize the button. For instance, you can use the “Style Options” and the “Main Options” of the button in order to change its style, color, size etc.

Save the Style as ‘Global’

After you are done with customizing your button, you can save its style as ‘Global’ and use it later on for other buttons.

You will need to use the “Style Options” to do this. Click on the “Style Options” from the left sidebar to open this section and then, click on the file and globe icon, which represents the “Save as Global Style” option:

A drop-down will open and you will have to give a name for this Button Style. Type the name you want to give it in the designated box and then, click on “Apply”:

As simple as that, the style for this button will be saved as global, meaning that you can use it whenever you add a new button and you want it to have the same style.

Adding a Global Style to buttons

If you have saved a button style, it is very easy to apply it to other buttons that you add to your page. After you add the new button, open the “Style Options” from the left sidebar, and then, click on the “Style” field:

Once the style drop down is open, you can see the “Global Styles” section. This is where all the styles that you have saved will be displayed:

All you have to do is to select the "Global Style" that you have previously saved and want to use on the new button as well. Click on it and then, click on the “Apply” button.

Once this is done, the style of the new button will be identical to the style of the button which was saved as global. Thus, the buttons will have the “Global Styles” feature applied to them.

This also means that whenever you change the style of a button with a global style, the other buttons that have the same style applied to them, will be changed as well.

Editing ​the Global Style of buttons

​Editing ​a “Global Style” that is applied to buttons can be done in a few easy steps.

Click on one of the buttons that has the "Global Style" you want to edit and select the “Style Options” from the left sidebar. Then, click on the pencil icon, representing the “Edit Global Style” option:

You will enter the “editing” mode of the button's "Global Style". Modify the style of the button according to your preferences using the sidebar options.

Important! Please note that whenever you edit a “Global Style”, the changes that you make will also be visible on every other element that has the same global style applied to it.

​When you are done, click on the “Done” button, from the bottom middle part of the page, to exit the editing state:

Unlink a button from a Global Style​

If there is a certain button that has a “Global Style”, meaning it has a shared style with other buttons, and you don’t want this to be applied to it anymore, you can simply unlink the button from the respective style.

Access the button’s “Style Options” from the left sidebar and click on the “Unlink Global Style” option next to the “Style” section:

The button will be unlinked from the “Global Style”, thus, when you modify it, the other buttons which still have the “Global Style” will not be modified anymore.

Rename or delete a Global Style from buttons

If you want to rename or delete a style that you have previously saved for buttons, you will need to access the “Style Options” ​of one of the buttons that has the respective style.

You will find these options in the left sidebar, if you click on the button. ​Open the “Style Options” and click on the “More” option (the three dots icon) which is next to the “Style” section:

This will open a drop-down with the “Rename” and the “Delete” options and you will have to choose one based on what you wish to do:

Rename

If you click on the “Rename” option the same drop-down will open that you have previously used to give a name for this Global Style. 

Simply replace the current name with the new one you wish to give to the style in the name field and then, click on “Apply”:

Delete

If you click on the “Delete” option, a warning message will appear, letting you know that deleting a “Global Style”, will mean that all the buttons with the same style will be reset to their default styles.

Once you confirm that this is indeed what you want to do, the “Global Style” will be deleted and the buttons that were using that style will be reset to their default style.

2. Global Styles on Content Boxes

Customize the content box

The first step is to add a content box by dragging and dropping it to the page. Then, you can customize it using the content box options the appeared in the left sidebar.

You have the possibility to change many aspects of the content box, such as its layout, background style, width, height etc.

Save the Style as ‘Global’

The next step is to save the style of this content box as a global one. Click on the “Style Options”, which is the first one from the left sidebar, to open this section and then, click on the file and globe icon, which represents the “Save as Global Style” option:

You will need to give a name to this content box style in the drop down that opens. Simply fill in the name you want for it, in the designated box and then, click on "Apply":

This will save the style of the content box as ‘global’, meaning that from this point on, you will have the possibility to add this style to any of the content boxes on your page.

Adding a Global Style to content boxes

Adding a previously saved “Global Style” to one of your content boxes is very easy.

Click on the respective content box that you want to add the “Global Style” to and then, open the “Style Options” in the left sidebar. From here, click on the “Style” field:

This will open the style drop down, which contains all the content box styles that you have saved:

All you have to do is to select the style that you want to apply to the content box and then, click on “Apply”:

The style will be added to your content box and from now on, when you modify something on this global style, the modifications will be visible on this content box as well.

Please keep in mind that whenever you change the style of a content box with a global style, the changes will be added to the other content boxes that have the same style applied to them as well.

Editing the Global Styles of content boxes

In order to edit a “Global Style” that is applied to content boxes, you will have to do the following:

Click on one of the content boxes which has the "Global Style" you want to edit. Then, select the “Style Options” from the left sidebar and click on the pencil icon, representing the “Edit Global Style” option:

This will open the editing mode of the content box’s “Global Style”. The “Style Options”, “Typography,“ ”Background Style”, “Borders & Corners” and “Shadow” options will be available in the left sidebar.

Use these to modify the “Global Style” according to your preferences and when you are done click on the “Done” button, from the bottom middle part of the page, to exit the editing state:

Important! Please keep in mind that whenever you edit a “Global Style”, the changes that you make will also be visible on every other element that has the same global style applied to it.

Unlink a content box from a Global Style

If a content box has a “Global Style” then, it has a shared style with all the other content boxes that have the same “Global Style” applied to them. Thus, changes on the “Global Style” will be reflected on each of those content boxes.

In case you don’t want a certain content box to have a “Global Style” anymore, then, you will have to unlink the content box from the respective style.

Here is how you can do that:

Open the “Style Options” of the content box from the left sidebar and click on the “Unlink Global Style” option next to the “Style” section:

Just like that, the content box will be unlinked from the “Global Style”, so when you modify it, the other content boxes that still have the “Global Style” will not be affected.

Rename or delete a Global Style applied to content boxes

In case you want to rename or delete a global style that you have previously saved for content boxes, then, first click on one of the content boxes that has the respective style.

Then, you have to access the “Style Options” of the content box from the left sidebar and click on the “More” option (three dots icon) which is next to the “Style” section:

The “Rename” and the “Delete” options will appear in a small drop down and you will have to choose the one you want to use:

Rename

Clicking on the “Rename” option will open the same drop-down that you have previously used to name this Global Style.

You will just have to replace the current name of the style with the new one that you want to give to it, in the name field and then, click on “Apply”:

Delete

If you click on the “Delete” option, a warning message will appear. This message will let you know that if you delete the global style, then, all the elements that have this style applied to them will be reset to their default style.

You need to confirm that this is indeed what you wish to do and once you do that, the global style will be deleted and the content boxes will be reset to their default style.

3. Global Styles on Background Sections

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”:

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 using the "Global Style" option for the last two aforementioned elements, please bare in mind the following information:

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.

Hopefully, this article was useful for you. If so, please reward our efforts with a smile below :)

>