Styling & layout
Every block on your page comes with a set of styling controls — no code required. Open any block in the editor and, alongside its own content fields, you'll find options to set its background, width, and spacing. These shape how a section looks and sits on the page, so two of the same block can feel completely different.
Width
Control how wide a block's content sits on the page:
- Full width — the default; content uses the normal page column.
- Indent 1 / Indent 2 columns — pull the content in from the edges for a narrower, more focused measure (this block is indented 1 column).
- Edge to edge — let the block stretch the full width of the screen, ideal for a hero image or a full-bleed coloured band.
Mixing widths down a page creates rhythm — a wide banner, then indented text, then a full-width gallery.
Background colour
Give a block a coloured background to set it apart — handy for highlighting a call to action, alternating sections down a long page, or grounding a quote. Colours come from your site's palette (set in Site Settings), so everything stays on-brand — and if you refresh your brand colours later, these backgrounds update right along with them. Village CMS also keeps your text readable automatically: pick a dark background and the text switches to light, so it's always legible.
Spacing
Adjust the breathing room above and below a block. Leave it normal for comfortable spacing, choose compact to tighten things up, or none to butt two blocks right against each other — useful when you want two coloured sections to meet with no gap between them. This section deliberately has no spacing above.
Custom CSS class
For finer control, add one or more CSS classes to a block. Village CMS is built on Bootstrap, so its utility classes work out of the box. For example rounded for soft corners, shadow for a drop shadow, or pt-5 and pb-4 to add padding. If the block has a background colour, your class applies to the coloured area itself, so padding adds space inside the colour rather than outside it. (Want to invent your own classes?
Link straight to a block
Give a block an ID and you can link directly to it, dropping a visitor right at that section. Add the ID pricing to a block, for instance #image jumps to the image block above whether your navigation is menu, a button, or from another page. It jumps straight there. Perfect for a long page with a "jump to" menu, or a "Skip to the form" button.
Dealing with font colour
Most of the time you will not need to touch text colour. Village CMS picks readable defaults and handles contrast for you: drop a block onto a dark background and its text turns light automatically, so headings and body copy stay legible with no effort. When you do want to set colours, there are three levels, from simplest to most precise.
Site-wide, in Site Settings. Under Site Settings → Typography you will find Body Text Colour and Heading Colour. These set the default colours for body copy and for every heading (h1 through h6) across your content. Leave them blank to keep the theme defaults. This is the quickest way to give your whole site a consistent voice.
A colour on one block or a few words. Your theme palette (Primary, Secondary, and so on) is available as utility classes. Add a class like text-primary or text-secondary to a block's CSS Class field, or colour selected words right in the editor, when you want a single element to stand out.
Per heading level, in your Style. The site-wide Heading Colour is one colour for all headings. When you want h1, h2 and h3 to differ, leave that setting blank and add rules to your Style (the custom CSS file under Templates):
h1 { color: #00343d; }
h2 { color: var(--bs-primary); }
h3, h4 { color: #555; }
Because Style is never overwritten by platform updates, these rules are yours to keep.
On dark backgrounds. Whatever colours you set apply to your ordinary content. On blocks with a dark background, Village CMS still switches text to white so it stays readable, so you never have to build a separate light version of your palette.
Need more than these controls allow? The next layer lets you edit the templates themselves — Edit with Liquid.