Advanced Blocks give you complete creative freedom and precision inside the UiCore builder. They’re designed for users who want full control over every element, layout, and style — beyond what’s possible with Composite Blocks.
With Advanced Blocks, you can select, edit, move, or restyle any element individually, build complex layouts inside existing blocks, desynchronise specific settings and create truly unique designs.
Note: The Advanced Blocks feature is available exclusively with the UiCore PRO theme.
When to Use Advanced Blocks
Use Advanced Blocks when:
- You need to customize individual items in a repeating layout (e.g., make one card stand out).
- You want to add extra elements inside an existing block, like an image, button, or text field.
- You need full creative control — including the ability to desync styles or structure.
If you’re looking for complete flexibility and fine-tuned design freedom, Advanced Blocks are the way to go.
Navigating Sub-Blocks
Unlike Composite Blocks, where elements are synchronized and grouped together, Advanced Blocks are made up of independent blocks.
Each element inside the block can be selected and edited separately, giving you full control over every part of the structure.
You can access and manage these sub-blocks in two main ways:
By clicking them – click any element in your advanced block that you want to edit (the icon, the heading, the text) and it’ll open in the settings sidebar.
By the navigator – located at the top of the settings panel, it displays your current position in the hierarchy and lets you move quickly between parent and child elements:
From either view, you can select, rename, or rearrange elements without having to click through each one on the canvas.
Sync and Desync Styles
One of the most powerful features of Advanced Blocks is the ability to synchronize or desynchronize styles.
This gives you full control over how elements behave and ensures you can balance consistency with creative flexibility.
Synchronized Styles
When a block is synchronized, any visual changes — such as color, typography, border, or spacing — automatically apply to all items in that group.
This keeps your design consistent and saves time when updating shared elements:
Desynchronized Styles
You can desync individual styles to give a specific property its own unique value — for example, changing only the text color while keeping the font size, padding, and other settings synchronized.
When a style is desynced, changes to that property apply only to the selected element, while all other synced properties still update across the group.
To sync or desync a specific style, click the small lock icon next to that property in the settings panel.
- Locked icon: the property is synced (changes affect all similar elements).
- Unlocked icon: the property is desynced (changes affect only this element).
Example 1 – Hover Effects If you have four icons with a hover background color:
- Activate the Hover State.
- Set the background color.
- Desync the first icon, then remove its hover background.
Now, the hover effect applies only to the remaining three icons, while the first one behaves independently.
To make the hover trigger when hovering over the entire box instead of just the icon, enable Inherit Hover.
Example 2 – Headings If you want one heading to stand out:
- Select that heading.
- Desync the Font Size property.
- Increase the size for just this element.
The rest of the headings stay synchronized, while your custom one has its own style.
Tip: Use desyncing selectively. Keep global consistency where needed and desync only the parts you want to emphasize — like featured icons, highlighted cards, or key headings.
