Blocks is a Studio Edition feature that enables you to save content as a template and re-use it wherever you need it. They are like lego pieces and will save you a lot of time creating custom layouts. There are Layout Blocks which are pre-made blocks from Semplice for you to use and Custom Blocks which are the custom blocks you create and save yourself.
This guide will only focus on custom blocks. (we trust in your abilities to add a layout block)
1. Static Blocks vs Components
When you save content as a Static Block it will always look the same and the block cannot be changed later. When you add the block on your page you can of course change the local instance but you cannot alter the saved block itself. When you save your content as a Component on the other hand you have a dynamic version of your block that can be changed later and will be updated across all pages.
2. Local overrides for Components (v7.3.0+)
The problem with Components before v7.3.0 was that you were not able to make changes to a local instance of your component without changing it globally. Now we finally have Local Overrides which makes it possible to change properties of a local instance of a component without touching the master. Once you make a local change to a component the input field will get purple and also a purple dot gets added which can be clicked to reset that value back to the global master.
This way you can always see the values you changed on your local instance and reset them if needed. There are no restrictions which means you can change every option there is in your component.
3. Editing the Master
Once you want to make global changes to your component you have to edit the master. You can do this by double click on the component in the editor or click on the Edit Component button left to the Save button in the edit popup.
4. Edit Component View
After you clicked on Edit Component (or double clicked) you will enter the edit component view. You will notice that in this view your local overrides will get removed and you will see the master version of your component. All changes you make here will affect all instances of this component across all pages & projects. After you made your changes and hit save your local overrides will get applied again.
5. Reset all local overrides to Master
There is no reset all option so if you messed something up or don't want to reset a lot of values one by one just remove your component and add it freshly which will add the master version without any local overrides.
6. Unlink a component
If you want to unlink an component from its master and transform it to a static content you can do this by clicking on the unlink button in the edit popup. This will not remove your local overrides.
7. Special Case - The Text Modules
Text modules are a special case because in Semplice all text modules use a WYSIWYG editor which means it uses inline styling. What this means is that the stylings (sizes, colors etc.) are inside the text which makes it not suitable for local overrides. Here is an example:
Lets assume this is the text on your master component:
<p data-font-size="5rem">Iam the master text</p>Now lets change that locally with a local override:
<p data-font-size="5rem">This ia a local override</p>I hope you can already see the problem. If we would now change the font size of the master it would not change it on the local instance of the component because the font size is embedded in the text and basically is inside the local override.
Luckily there is a solution for that which was always the most professionel way in Semplice to deal with this problem.
Using Custom Typography Styles
In Customize → Typography you can add custom typography styles and then apply them in your text modules. The walkthrough for a component would be.
- Create a component from a text module (or a section/column with a text module)
- Edit the text module in your master component and make sure to only apply custom typography styles without any inline formatting changes.
- Now that custom styles will be applied for every instance and you can even do some changes on your local override (like colors etc.) Just make sure that when you add new lines or blocks to always apply the custom style.
- Now if you need to make global changes to your text formatting you don't change the master component but update the custom typography style. (unless you want to apply a new custom typography style to the master)
When you follow these rules you can make local overrides to your text module but the formatting will always look the same because it comes from a custom typography style.
8. Notes
- There are no local overrides for animations