The Page Builder is the visual editor for the content of a page. You build a page by dragging blocks onto a canvas, clicking text to type, and adjusting styles in side panels — what you see in the editor is what visitors get.
The Page Builder. The canvas shows the page as visitors see it; the toolbar is above it; the panel on the right switches between Blocks, Layers, Settings and Styles.
Every page has two parts, edited in two places:
| Part | Where you edit it | What it contains |
|---|---|---|
| Page settings | Pages → Page Settings (pencil icon) | Title, address (slug), status, SEO and social fields, and per-page header and breadcrumb options. See Pages. |
| Page content | Pages → Edit Content (builder icon) — the Page Builder | Everything visitors read and see on the page: sections, text, images, buttons, forms and live blocks such as services or products. |
Content is stored per language. The editor opens the page in the language you chose; if the page has not been translated yet it starts from the default-language content, and the first time you save, TruCMS creates the translation. See Multilingual Content.
Permission
Opening the builder, inserting layouts and previewing live blocks require the edit page permission. See Roles & Permissions.
The toolbar runs along the top of the canvas. The icons on the left switch the preview size; the group in the middle-right holds editing tools; the four icons at the far right choose what the side panel shows.
| Toolbar item | What it does |
|---|---|
| Desktop / Tablet / Mobile | Previews the page at full width, at tablet width (770 px), mobile landscape (568 px) or mobile portrait (320 px). Styles you set while a smaller size is selected apply to that size only. |
| Show borders | Toggles the dashed outlines that show where containers, rows and columns are. On by default; turn it off to see the page cleanly while editing. |
| Preview | Hides all editing guides so you can see the page as visitors will. |
| Full screen | Gives the editor the whole browser window. |
| View code | Shows the HTML and CSS of the page (read-only). |
| Undo / Redo | Steps back and forward through your changes. |
| Import | Lets you paste ready-made HTML. Importing replaces the content on the canvas, so use it on a new page. |
| Edit Code | Opens the HTML of the selected element for editing. |
| Save Content | Saves the page. Nothing is stored until you choose this. |
| Template Library | Opens the catalogue of ready-made sections and pages. See Template Library in the Builder. |
| Side panel (far-right icons) | What it shows |
|---|---|
| Styles (brush) | The Style Manager for the selected element. |
| Settings (gear) | The options of the selected element: link addresses, image descriptions, and the settings of live blocks. |
| Layers (stack) | A tree of everything on the page, so you can select, reorder or delete elements that are hard to click. |
| Blocks (plus) | The library of blocks you can drag onto the page. |
Open the Blocks panel, find a block (use Search blocks… at the top), and drag it onto the canvas. A blue guide shows where it will land. Blocks are grouped into categories:
The Blocks panel. Categories from installed modules (Booking, TruCommerce) appear alongside the built-in ones.
| Category | What it contains |
|---|---|
| Basic | Link Block, Quote, Text section, Link, Simple List and Simple List Item — small building blocks. |
| Templates | Ready-made sections you can edit: Header Banner 1 and 2, Customers (three styles), Text Marquee, Cards Section, CTA 1 and 2, Testimonials, Featured, Cards Grid, Icon Section, Carousel Section and Features. For hundreds more, use the Template Library. |
| Layout | Container, Row, Column, Column Break, 1/2/3 Column, Media Object and Sidebar — the grid that arranges everything else. |
| Components | Alert, Tabs, Badge, Card, Counter, Collapse (accordion) and Button. |
| Typography | Text, Header (heading) and Paragraph. |
| Media | Image and Video. |
| Content | Live blocks for your own content: Blog, Blog Cards, Advertisements, Share and Widgets. See Dynamic Blocks & Shortcodes. |
| Forms | The Contact form. |
| Booking | Live blocks of the Booking module (services, providers, packages, locations, booking form, customer bookings and more). See Booking Page Builder Components. |
| Products, Product Categories, Product Tags, Search and Filters, TruCommerce Merchandising, Pages | Live blocks of the TruCommerce module (product lists and sliders, categories, search, collections, bundles, comparison, cart, checkout). See TruCommerce Blocks & Widgets. |
Start with a layout
Most pages are quicker to build from a ready-made layout: choose Template Library in the toolbar, insert a section such as a hero, then replace the text and pictures.
Click any element to select it. A small bar appears at its corner with four icons: Select parent (the arrow, to select the container around it), Move (drag to a new place), Clone and Delete. Use Layers when an element is hard to click.
Double-click text to type in it. A small formatting bar appears for bold, italic, links and similar. Click outside the text to finish.
Double-click an image to open the media manager. Drag a file into the upload area, or choose one you uploaded before. Set the picture’s description (alt text) in Settings so visitors who use screen readers know what it shows. The Video block accepts a file from your media library or a link from a video site.
Select a button or link and open Settings to set its address, where it opens (same or new window) and its title. Link to your own pages with a path such as /contact-us.
Select an element and open Styles (the brush). Settings are grouped in collapsible sections:
The Style Manager for a selected heading. Sections open and close; changes apply to the selected element.
| Section | What you can set |
|---|---|
| General | Display, float, position and the top/right/bottom/left offsets. |
| Flex | Flexible-box layout: direction, wrapping, alignment and spacing between children, and the size and order of children. |
| Dimension | Width, height, maximum width, minimum height, margin and padding. |
| Typography | Font, size, weight, letter spacing, colour, line height, alignment and text shadow. |
| Decorations | Background colour and image, corner radius, border and shadow. |
| Extra | Opacity, transitions and transforms. |
At the top of the Styles panel, the Classes field shows the style classes the element uses. Editing while a class is selected changes every element that shares it; untick the class to style only this element. The State menu lets you style the hover, focus and other states.
Colours and fonts follow the theme
The canvas loads the same stylesheet as the public site, so colours and fonts you set in Theme Options appear in the editor too. Prefer theme colours to hand-typed ones so the page follows later design changes.
Switch the device in the toolbar and check each page at every size. Columns stack automatically on small screens. If something looks wrong at one size, select it while that device is active and change its styles — the change applies from that screen width downwards without affecting desktop.
The Layers panel shows the page as a tree. Click an entry to select it; drag to reorder.
The layers panel lists the structure of the page from the outside in. It is the quickest way to select a hidden or very small element, to reorder sections, and to understand how a ready-made layout is built.
Some blocks are not fixed text but live: they read your real services, products, posts or advertisements and show them on the page. Their settings appear under Settings and the canvas shows a live preview.
A live block selected on the canvas, with its options (layout, category, location, limit and more) in the Settings panel.
See Dynamic Blocks & Shortcodes for how they work, and Data-Bound Sections for template sections that bind to a record you choose.
There is no autosave
The editor keeps changes in the browser until you choose Save Content. Closing the tab, reloading or navigating away discards unsaved work. Save often, especially after large edits.
If you made a mistake, use Undo before saving. After saving there is no version history in the editor, so keep a backup (or export the page’s design as a layout) before big redesigns.
| Symptom | What to do |
|---|---|
| The canvas is blank or very slow to load | Reload the editor. Pages with many live blocks load their previews one by one; wait a few seconds. |
| A live block says Select … to load the preview | The block needs a required choice (a service, a product, a form). Pick it in Settings. |
| My change is missing on the public site | You did not choose Save Content, or a page cache is serving an older copy. See the FAQ. |
| I cannot find the Edit Content icon | Your role lacks the edit page permission. |
| Layouts from the library look unstyled | Reload the editor; layout styles are loaded with each inserted layout. |
Pages · Template Library in the Builder · Dynamic Blocks & Shortcodes · Data-Bound Sections · Echo Theme Options