Elements are the atomic building blocks of every Sitejet page — individual text blocks, buttons, images, forms, videos. Presets are collections of elements; pages are collections of presets. Understanding how elements work unlocks everything from simple text edits to advanced layout tweaks. This guide explains the element types, how to add and edit them, the flexbox-based layout system and how to target elements with custom CSS when you need to go beyond the visual editor.
What are elements? · Element types at a glance · Adding elements to your page · Editing an element · Element properties and styling · Understanding flexbox layout · Targeting elements with custom CSS · FAQ
An element is the smallest editable unit on a Sitejet page. Click anywhere on the canvas and you select an element — a heading, a paragraph, an image, a button. Everything you see on the page is composed of elements, and everything is editable by clicking.
Presets (pre-built sections like hero banners or pricing tables) are simply collections of elements pre-arranged by Sitejet’s designers. You can add elements individually, or drop in a preset that already contains them.
| Category | Elements |
|---|---|
| Text | Heading (H1–H6), paragraph, blockquote, list, link |
| Media | Image, gallery, video (YouTube / Vimeo / self-hosted), icon, separator |
| Action | Button, contact form, call-to-action block |
| Layout | Section, container, row, column, spacer |
| Dynamic | Collection list, blog feed, map, social links |
| Advanced | Custom HTML, embed, code snippet |
Two main approaches:
For whole sections (hero, feature grid, testimonials), use Presets instead of building from individual elements — dramatically faster.
Click once to select. Double-click text to edit inline. Element-specific properties appear in the right sidebar.
Common editing actions:
The right sidebar has three tabs per element: Content, Style, Layout.
Most styling pulls from your brand variables (colours and fonts set in Config). Change a brand variable and every element using it updates automatically. This is how you keep visual consistency across 20+ pages without micro-managing each element.
Sitejet uses CSS flexbox for layout. Every section is a flex container with elements as flex items. Once you internalise the three flex concepts, arranging complex layouts becomes intuitive.
For most UK SME pages you will not touch the flex settings directly — presets already have sensible defaults. But when you need a specific layout (logo bar, two-column feature grid, centered button row), understanding flexbox speeds the work.
Every element has a unique ID you can see in the right sidebar (Advanced > ID). Use that ID in your custom CSS (Config > Custom Code > CSS tab):
#my-hero-button {
border-radius: 9999px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
You can also apply classes at element level (Advanced > Classes) and target them with .class-name selectors. Useful for repeated custom styles across multiple elements.
For most work the visual editor is enough. Custom CSS is the escape hatch when you need something the UI does not expose. See our how to use custom code guide for more.
Q: What is the difference between an element and a preset?
A: An element is a single building block (one heading, one image, one button). A preset is a pre-built section made of multiple elements (a full hero banner, a three-column feature grid, a testimonial block). Use presets for whole sections; use individual elements for fine-tuning.
Q: Can I create my own element?
A: You can build a custom preset — a reusable section of elements — and save it to your library. You cannot create new atomic element types; Sitejet provides those.
Q: How do I centre an element horizontally?
A: Select the element, go to Layout tab, set alignment. For flex items, set justify-content centre on the parent container.
Q: Why does changing one element sometimes change others?
A: Most likely they share a brand variable (colour or font). Check the Config tab — if you change a variable there, every element using it updates. Override locally if you want an exception.
Q: Can I add custom JavaScript to an element?
A: Yes, via element-level Advanced settings or globally in Config > Custom Code > JS. For most UK SMEs, custom JS is rarely needed.
Q: How do I align text inside a button?
A: Select the button, use the alignment buttons in the Style tab or set text-align in Advanced CSS.