Guides

Short, practical walkthroughs for everyday work in WebBlocks CMS. Each guide covers one task, in a few steps, with screenshots.

New here? Start with Sign In To The Admin Panel and follow the Next link at the bottom of each guide. Looking for how a feature behaves rather than how to use it? That lives in the reference documentation.

WebBlocks CMS dashboard showing the sidebar and an overview of pages, blocks, and media.

Sign In To The Admin Panel

Open the admin panel, sign in, and find your way around the dashboard.

Pages list showing page titles, paths, and publishing status.

The Admin Panel In Two Minutes

What lives where in the sidebar, and which screens you will actually use.

Layout Slots tab showing which slots the page layout defines and which the page has.

Page, Layout, Slot, Block

The four words the CMS uses for everything, in plain language.

Profile screen showing name, email, interface language, and the password section.

Your Profile And Language

Change your name, email, password, and the language of the admin panel.

New page form with title, slug, and page layout fields.

Create A Page

Add a new page to a site and save it as a draft.

Block picker showing the common block types including Header and Image.

Add A Heading And A Paragraph

Put your first words on a page using the Header and Plain Text blocks.

Media Library picker dialog with a list of images and a Select button on each.

Add An Image

Place a picture on a page from the Media Library, with alt text that describes it.

Public preview of a draft page with a preview mode notice at the top.

Publish A Page

Preview your work, then make the page visible to visitors.

Translation editor with routing fields, list excerpt, and SEO fields.

Change A Page Address

Rename the slug and path of a page, and set its SEO and social fields.

Rich Text block editor showing the formatting toolbar and a formatted paragraph with a list.

Rich Text: Formatting, Lists, And Links

Bold, italic, links, and nested lists in one editable block.

Hero block form showing eyebrow, title, intro, CTA fields, variant, and layout.

Hero: Build An Opening Section

The banner at the top of a page — title, intro, buttons, and a background image.

CTA block form showing eyebrow, heading, body copy, and two call-to-action pairs.

Buttons And CTA

A single button, or a full call-to-action panel with heading and actions.

Quote block form showing the quote text, author, source, and variant fields.

Quote And Alert

Pull out someone's words, or flag something the reader must not miss.

Public page showing a list of linked notes with dates and descriptions, above a data table.

Link Lists And Tables

A tidy list of links with descriptions, and real tabular data.

Code block form showing the title, filename label, code sample, and syntax language.

Code And HTML Blocks

Show a code sample properly — and know when the HTML block is the wrong answer.

Media Library showing uploaded files with search, kind, and usage filters.

Upload Files To The Media Library

Get images and documents into the library once, then reuse them anywhere.

Image Variants panel listing thumbnail, card, and content sizes with a regenerate action.

Alt Text, Captions, And Image Variants

The details that make an image usable — and the sizes the CMS makes for you.

Public page showing a three-column image gallery with captions under each image.

Build A Gallery

Several images as one grid, with captions and an optional lightbox.

Video block form showing video title, external video URL, and supporting copy.

Add A Video Or Audio Block

Embed a hosted clip or point at one that lives somewhere else.

Download block form showing the download label, helper text, and selected document.

Offer A Downloadable File

A clear download action for a PDF or document, instead of a bare link.

Media Library showing folder chips and a document assigned to the Studio documents folder.

Organise Media In Folders

Keep the library findable once it holds more than a screenful.

Public page showing a heading and paragraph constrained to a readable measure.

Section And Container: Control Page Width

The two wrappers that decide how wide your content sits and how much air it gets.

Public page showing a three-column set with intro copy above a grid of cards.

Columns And Grid

Put things side by side — with copy of its own, or as a bare arrangement.

Cluster block form showing name, width, justify, align, wrap, and gap.

Cluster And Spacing

Line a few things up in a row, and control the air between everything else.

Public page showing a grid of cards above a feature grid.

Card, Feature Grid, And Stat Card

Three ways to package a small unit of content — and when each one fits.

Layout Slots tab showing present, missing, and extra slots for the page.

Choose And Change A Page Layout

Pick the frame a page renders in, and change it later without losing content.

Public page showing an on-this-page list of anchored headings above a breadcrumb trail.

Table Of Contents And Breadcrumbs

Two small blocks that help readers find their place in a long page.

Navigation items screen showing the site and menu selectors above the list of links.

Build A Navigation Menu

Add, group, and reorder the links visitors click.

Shared slot block list showing a navbar with brand, navigation, and header actions nested inside.

Build A Header As A Shared Slot

Build the header once, then point every page at it.

Shared slot block list showing a section, container, header, text, and link list.

Build A Footer As A Shared Slot

Create a reusable area from scratch and fill it with real blocks.

Shared slot edit screen showing the usage panel listing the pages that use it.

Update A Shared Slot Safely

Editing a shared area changes every page at once. Here is how to do it without breaking things.

Page overview showing draft status with submit for review and publish actions.

Draft, Review, And Publish

The four states a page moves through, and who moves it.

Page revision history listing workflow and block changes with author and restore actions.

Revisions: See History And Restore

Find out what changed, who changed it, and put it back.

Add user form showing name, email, password, role, and per-site access checkboxes.

Roles: Who Can Do What

The three roles, what each one reaches, and how to add a colleague.

Duplicate page screen showing target site, new title and slug, and what carries over.

Duplicate, Move, And Archive Pages

Copy a page as a starting point, move it between sites, or take it down without deleting it.

Contact messages inbox listing submissions with their status.

Add A Contact Form And Read Messages

Put a form on a page, then find what visitors sent.

Comments moderation screen listing pending comments with approve, reject, and spam actions.

Comments And Ratings

Let readers respond, and review what they say before it appears.

Search form block showing accessible label, placeholder, button label, and variant.

Site Search

Put a search box on the site and keep the index honest.

Translation editor showing SEO title, description, keywords, and social image fields.

SEO Fields, Social Image, And Favicon

What search results and shared links show, and where to set it.

Site settings locales tab showing enabled languages for the site.

Add A Language To A Site

Two steps — register the locale, then enable it on the site that needs it.

Add translation form showing routing fields for the German version of a page.

Translate A Page

Give a page a second language, with its own address and its own SEO.

Sites screen listing the sites in the installation with their domains.

Manage More Than One Site

One installation, several sites — what is shared and what is not.

Site variables tab listing reusable public tokens with their keys and values.

Site Variables

Write a value once, use it across the site, change it in one place.

Coming Next

  • Text and structure — Rich Text · Hero · buttons and CTA · quote, callout, alert · lists and tables · code and HTML
  • Images and media — upload to the Media Library · alt text and captions · galleries · video and audio · downloads · media folders
  • Page layout — Section and Container · Columns and Grid · spacing · cards and feature grids · choosing a page layout
  • Structured content — FAQ and Accordion · Tabs · Slider · table of contents and breadcrumbs
  • Navigation and reusable areas — navigation menus · header as a Shared Slot · footer and CTA Shared Slots · updating a Shared Slot safely
  • Working as a team — draft, review, publish · revisions and restore · roles · duplicate, move, archive
  • Visitors — contact forms and messages · comments and ratings · site search · SEO and social images
  • More sites and languages — add a language · translate a page · multiple sites · site variables