If you are using Content Boxes on your website and you want some of them to have the same style, here is how to do that:
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. In your left sidebar, you will notice the “Template ContentBox” section. Click on the "Save as Global Style" option located next to it:
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, click on the downwards pointing arrow from the "Template ContentBox" section:
This will open the style drop-down, which contains all the content box styles that you have saved, as well as a list of "Default Templates" you can choose from:
All you have to do is to select the saved 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, in the left sidebar, 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:
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 in 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:
In the same left sidebar click on the “Unlink Global Style” option:
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, click on one of the content boxes that has the respective style, and from the left sidebar options select the "More" option (three dots icon):
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:
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”:
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.
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.
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 Background Sections
If this article was helpful for you, let us know by rating us with a smile below.