Styling elements in the editor can be achieved in two ways: Global Design and Local Design. Global Design allows you to create a consistent design style for all elements at once, for example all Form modules, and easily adapt them through the design process. Local Design is when you change design for one specific isolated element, which doesn't have any impact on other similar elements.
Global Design vs Local Design
Global Design
Global Design is often the first step in defining how the elements of your site should appear. In just a few steps, you are able to style the Main Background, Main Wrapper and Content Wrapper, the Header and the Footer. You are also able to quickly define the Global Colors, text styles, module designs and more.
Local Design
Sometimes you need to differentiate one element from the styling it inherits from Global Design. In these cases, the use of Local Design allows you to easily define specific styles for the one element and doing so will not impact the Global Design of all other like elements.
Removing Local Design
If you have applied styling locally to a module or another element, it can always be removed again. Removing the styling will cause the element to, once again, inherit the styling from the Global Design applied.
Impacts of using Local Design
Using Local Design is helpful, but it does have impacts. The attributes of the elements styled locally cannot be differentiated per viewport.
Examples of Global Design in use
Imagine you need to adjust the colors across your branding and the font family. If you have set up the modules on your website to inherit from Global Design, your colors will be updated throughout your entire website after you've changed the Global Colors in Global Design. By choosing a new font family in the General Texts section of Global Design, every module with text and global elements such as the header and footer will update to the new font family. There's no need to click through all your pages and update individual modules.
How do I edit Global Design?
The Global Design menu is easily accessible from the Editor's main navigation. Click on Global Design to expand a menu with the various design parameters that you can alter.
Examples of Local Design in use
Imagine you have used Global Design to define the appearance of all Button modules. Now you want to add a button to the website header that stands out from the rest of the design. When adding the Button module you can style it locally and thereby "break" the Global Design. This specific button module will now be differentiated from all other buttons.
How do I edit Local Design?
Local Design is edited on a per element basis. Hover on the label on any module/column/row on your website to expand the options menu. Select Design in order to perform local design changes on the specific element.