Skip to content

Building website pages

This is where you create and edit the content pages of the website: brand stories, information pages, terms, and so on. You build each page by stacking simple "blocks" (a slideshow, a section, a block of text), and you fill each block in with your own words and pictures. No code needed.

Swedish is always the starting point. You write a page in Swedish first, and the other languages are added afterwards (see Translating content).

How to open it

  1. Sign in to the CMS admin.
  2. In the menu, click Pages.
  3. You'll see a list of every page, with its Title, its Slug (the web-address ending), and its Type.
  4. Click any page title to edit it, or click New page (top right) to start a fresh one.

What you can do here

Create a new page

  1. Click New page.
  2. Fill in the top section:
    • Title - the name of the page (required).
    • Slug - the ending of the web address, for example about-us or rejuran-brand. Use lowercase letters and dashes, no spaces. It stays the same in every language.
    • Subtitle - an optional line under the title.
    • Page type - choose Generic (info pages, terms), Brand (a storytelling page for a product line), or Device (a page for a medical device).
    • Linked brand - optionally connect the page to a brand from the dropdown.
    • Cover image - upload a main picture for the page.
    • SEO title and SEO description - the title and summary that show up in Google search results.
  3. Build the page body with blocks (see below).
  4. Set the Status at the bottom to Draft, Published, or Archived.
  5. Click Create page.

Start with a ready-made layout

On a brand-new empty page you'll see an Insert brand template button. Click it to drop in a slideshow plus two ready-made sections that you can then edit. It's the fastest way to begin.

Build the page with blocks (the visual editor)

The page body is made of blocks. Each block is shown as a tab in a strip. Click a tab to edit that block below it.

  1. Click Add block and pick one:
    • Slideshow - a set of pictures that rotate automatically.
    • Section - a heading, a body of text, and a picture side by side.
    • Text - a free-form block of formatted text.
  2. Edit the block in the panel that appears.
  3. Use the left/right arrows on a block to change its order on the page.
  4. Use the trash icon to delete a block (it asks you to confirm).

Inside a Slideshow block you can:

  • Set how often the pictures change, in milliseconds (5000 means 5 seconds).
  • Add as many images as you like, each with its own Alt text (a short description of the picture for search engines and screen readers).

Inside a Section block you can set:

  • A Heading.
  • A Body of text, using the formatting toolbar (bold, lists, etc.).
  • An Image with its own alt text.
  • The Image side - whether the picture sits on the Right or the Left.
  • An optional Call to action - a button with a label (e.g. "Order now") and a link (e.g. /products).

Inside a Text block you get a single free-form editor for formatted text.

Advanced only

There is an Advanced: edit raw blocks JSON drawer at the bottom. Leave it closed. It's a fallback for developers and it's easy to break a page there.

Set search-engine text (SEO)

Fill in the SEO title and SEO description fields near the top. These are what people see when your page appears in a Google search. If you leave them empty, search engines fall back to the page's own title and text.

Publish the page

At the bottom, set Status:

  • Draft - saved, but not shown on the public website.
  • Published - live and visible to visitors.
  • Archived - taken down, but kept for your records.

Then click Save changes. A page only appears on the website when its status is Published.

Add other languages

At the very top of the editor is a row of language tabs (SV, NB, DA, FI, EN). SV (Swedish) is marked source - it's the original you write from.

  1. Save the Swedish page first.
  2. Click another language tab.
  3. Type the translated Title, Subtitle, SEO title, and SEO description. The faded grey text shows you the Swedish original as a reminder.
  4. You can also override the headings and body text inside each block for that language.
  5. Click Save (the button shows the language name).

A small sparkle icon on a tab means that language was filled in automatically by the nightly translator. A missing label means that language hasn't been translated yet. See Translating content for the full picture.

What's shared across languages

The Slug, Page type, Linked brand, Cover image, Status, the pictures, and the order of blocks all come from the Swedish version and can't be changed per language. On other-language tabs you only edit the words.

Every field explained

Field What it does
Title The page name. Required.
Slug The ending of the web address (e.g. about-us). Lowercase and dashes only. Same in every language.
Subtitle An optional line shown under the title.
Page type Generic (info/terms), Brand (product-line story), or Device (medical device page).
Linked brand Optionally ties the page to a brand from the dropdown.
Cover image The main picture for the page. Uploaded, not typed.
SEO title The title shown in Google search results.
SEO description The summary shown in Google search results.
Status Draft (hidden), Published (live), or Archived (taken down).
Slideshow - Auto-rotate every How long each picture shows, in milliseconds (5000 = 5 seconds).
Slideshow - Images / Alt text The pictures and a short description of each.
Section - Heading The section's title.
Section - Body The section's formatted text.
Section - Image / Alt text The section's picture and its description.
Section - Image side Whether the picture is on the Left or Right.
Section - Call to action An optional button: a label plus a link.
Text - body A free-form block of formatted text.

Common mistakes

Watch out for these

  • Changing the Slug after a page is live. The slug is the page's web address. If you change it, every existing link and bookmark to that page breaks. Set it once and leave it.
  • Forgetting to publish. A page left on Draft never appears on the website. Set Status to Published and save.
  • Trying to translate before saving Swedish. You must save the Swedish version first. If you switch to another language tab on a brand-new page, saving won't work until the Swedish page exists.
  • Expecting per-language pictures or block order. Images and the order of blocks always come from the Swedish version. On other languages you can only change the words.
  • Opening the raw JSON drawer. It's for developers. Editing it by hand can break the whole page.

Still stuck?

Email developers@kavelsoftware.se and we'll help you out.