icon

Volt CMS Tutorial

Customize Styling of Volt Content

There are different levels in which granularity you are able to define styling for Volt content.

By default, Volt content does not apply any styling. All styling will be taken over from the general Blocs project settings and the styling defined there.

Styling on Global Level

If you want to change all instances of Volt content, overwrite the global definition of the different HTML tags.

For example, for a paragraph (p) HTML tag, create a class .volt-content p in the class manager and apply your custom styling.

Do the same for other HTML tag if required, like heading h1, h2, or list items li, etc.

This class does not have to be assigned to a bric, as it is defined for all Volt content.

cleanshot-2025-04-23-at-1020242x cleanshot-2025-04-23-at-1020532x cleanshot-2025-04-23-at-1021542x cleanshot-2025-04-23-at-1022102x cleanshot-2025-04-23-at-1033192x

Styling on Bric Instance Level

In order to change styling only for certain instances of Volt content, create CSS classes like .red-text .volt-content p in the class manager, or for other HTML tags like h1, h2, li, etc. the same way.

Afterwards, add the class .red-text (and only this) to the Volt content bric where it should be applied to.

cleanshot-2025-04-23-at-1031082x cleanshot-2025-04-23-at-1031172x cleanshot-2025-04-23-at-1031422x cleanshot-2025-04-23-at-1031592x cleanshot-2025-04-23-at-1032282x cleanshot-2025-04-23-at-1032522x

Styling inside the Online Editor for End Users

todo

Previous Post
6 / 12
Next Post