Blocksify Style Classes let you reuse the same block styling across multiple blocks while keeping local overrides available.
Use local styles for one-off adjustments, and use Style Classes when a design should be named, reused, and edited from a central place.
What are local styles and Style Classes?
Local styles belong to the selected block instance. If you change padding, typography, background, border, radius, or shadow locally, that change affects only that block.
A Style Class is a reusable style preset. When several blocks wear the same class, editing the class can update all of them while the class stays separate from block content.
How do Style Classes work?
The class chip bar lets you create, attach, rename, and switch between classes from the block inspector. The Manage classes icon opens the central class hub in the Blocksify settings sidebar.
- A class chip means the block is using a named reusable style layer.
- The central hub manages class order and actions such as rename, usage check, CSS view, and delete.
- Class edits cascade to every block that uses that class.
- A local value on the block wins over the class value for the same property.
Create and test a Style Class
- Go to Pages → Add New or open a page, then select a block that has a design you want to reuse.
- Open the class control and create a new Style Class.
- Apply the same class to a second compatible block.
- Open the class hub and edit one class-owned style value. Both blocks update where they use that class value.
- Add a local override on one block when it needs an exception.
Why use Style Classes?
Repeat a design without rebuilding it
Use a class for repeated treatments such as a card surface, button style, image frame, callout block, or icon list pattern. This keeps repeated blocks visually aligned across a page or site.
Keep one-off exceptions local
When a single block needs a small exception, leave that exception local. If the same property is set in both places, the block’s local value wins without breaking the shared class.
Use the right layer for responsive work
Class-owned values and local values both participate in Blocksify’s device and hover editing model. Review responsive and hover editing before building a class that needs tablet, mobile, or hover-specific values.
Where Style Classes fit
Block-level classes are available across common Blocksify blocks, including layout and content blocks such as Section, Container, Text, Button, Image, Icon, and Icon List.
Blocks with styled parts, such as Tabs, Accordion, and Icon List, can also let the active class control supported parts. Form class support is intentionally separate because Form styling follows the reusable form.
Next step
Create a class for a repeated visual pattern, apply it to at least two blocks, then change the class once from the class hub. Use Global Settings when the repeated value should be a sitewide token instead of a reusable block style.