TutorialLearn by doing

Build your first CMS page

In this tutorial, we’re going to build a landing page in the page editor, from a hero banner down to text, a button, an image, a video, and a card. CMS pages are how you give a portal its own content without any development work. By the end, you’ll have a published welcome page, styled by the portal’s theming.

This is part 3 of 4 in the portal creator tutorials. Previous: Add your first portal pages. Next: Create your first lens.

Prerequisites

To follow this tutorial, you need:

  • A user role with the Creator role for Content Portal, which lets you create and manage portals and pages. The Portal Creator role preset includes this. Each role’s permissions are listed in User role presets and permissions.

  • An empty CMS page to build on. This tutorial uses the Welcome page in Tutorial portal, from Add your first portal pages.

  • At least one image and one video in the DAM that you can select.

What you see here depends on your workspace’s configuration. The widgets and templates available depend on the portal type. This tutorial uses a brand portal; Widget reference lists the widgets each portal type supports.

What we’ll create

We’ll build the Welcome page from the top down: a hero banner from a section template, then a grid holding a heading, a button, an image, a video, and a card. Then we’ll group two widgets, save a draft, preview the page, and publish it.

The tutorial takes about 35 minutes, including the videos, in eight steps:

Step 1: Open the page editor

Every CMS page is edited in place, through the page editor.

Open the page editor (51 s)

We’re going to open the editor on our welcome page.

  1. Open Welcome in Tutorial portal.

  2. Select at the top right of the portal view.

  3. Select Page Editor.

You’ll notice that an + Add Section button appears in the middle of the empty page.

A page is built from sections, and each section holds widgets: text, buttons, images, and so on. For further information, refer to Understanding CMS pages, grids, and widgets.

Step 2: Add a hero section

A section template is a ready-made section, laid out and styled, that you fill with your own content. A hero is the large banner at the top of a page.

Use a section template (1 min 25 s)

We’re going to start the page with a hero template.

  1. Select + Add Section.

  2. Select Section Templates.

    The Template Library opens on the Sections tab.

  3. Select a centre-aligned hero template.

  4. Select Confirm.

  5. If an asset picker opens, choose an image for the hero’s background, then select Select.

You’ll notice that:

  • The hero arrives complete, with placeholder text and a button.

  • The button already uses the rounded primary style from the first tutorial.

Select the hero’s heading and replace the placeholder with Welcome to the tutorial portal.

Step 3: Add a grid

For our own content, we need an empty section to place widgets in.

Add sections to a page (1 min 48 s)

We’re going to add a grid below the hero.

  1. Below the hero, select + Add Section.

  2. Select Grid.

A grid appears below the hero, outlined in the editor.

You’ll notice that:

  • The grid has a toolbar of its own, with to add a widget, for its settings, and to delete it.

  • Dragging the grid’s handle changes its height.

Grids are one of three ways to add a section. The others are a carousel, for rotating slides, and copying a section that already exists.

Step 4: Add text

We’re going to add a heading and a short paragraph inside the grid.

Add text (2 min 15 s)

  1. In the grid’s toolbar, select , then select Text.

  2. Open the text editor on the widget.

  3. Enter Start here, and set its style to Heading 1.

  4. On a new line, enter Everything you need for the tutorial campaign., and set its style to Text.

You’ll notice that:

  • Start here appears in uppercase, because we set Heading 1 to uppercase in the first tutorial.

  • The paragraph uses the font we chose there.

That’s the portal’s theming at work: you choose a style, and the theming decides what it looks like.

Step 5: Add a button

A button sends users to another page. We’ll point ours at the asset page from the previous tutorial.

Add a button (1 min 38 s)

  1. In the grid’s toolbar, select , then select Button.

  2. Drag the button to sit below the text.

  3. Open the button widget’s settings with .

  4. Enter View assets as the button label.

  5. Select the Primary button style.

  6. Turn on the link, and choose an Internal link.

  7. Choose Tutorial portal, then the Asset library page.

You’ll notice that the button has the same rounded corners and colours as the one in the hero, because both use the primary style.

Step 6: Add an image and a video

Images and videos come straight from the DAM, so the page always displays approved assets.

Add an image (2 min 1 s)

We’re going to add one image and one video to the grid.

  1. In the grid’s toolbar, select , then select Image.

  2. Open the image widget’s settings with .

  3. Select Choose Asset, pick an image, and select Select.

  4. Select Contain, so the whole image stays visible.

  5. In the image label, describe what the image contains.

    The label is read out by screen readers.

Add a video (1 min 52 s)

  1. In the grid’s toolbar, select , then select Video.

  2. Open the video widget’s settings with .

  3. Select Choose Asset, pick a video, and confirm.

  4. Turn on Show Controls and Mute.

  5. Close the settings.

You’ll notice that the video displays playback controls in the editor, as it will for your users.

If you turn on Autoplay for a video, turn on Mute too, so the page doesn’t play sound unexpectedly.

Step 7: Add a card and group widgets

Widget templates are ready-made groups of widgets, such as a card with an image, text, and a button.

Use a widget template (1 min 23 s)

We’re going to add a card to the grid.

  1. In the grid’s toolbar, select , then select Widget Templates.

  2. On the Widgets tab, select the Card template.

  3. Choose the 1/3 width.

  4. Select Confirm, then choose an image for the card.

  5. Replace the card’s placeholder text with Our latest campaign.

You’ll notice that the card arrives as several widgets that move together.

You can group your own widgets in the same way.

Group widgets (1 min)

We’re going to group the heading and the button from steps 4 and 5, so they stay together.

  1. Select the text widget.

  2. Hold Ctrl (Windows) or Command (Mac) and select the button.

  3. Select Group.

  4. Drag the group to a new position in the grid.

You’ll notice that the heading and button move as one. To separate them again, select the group, then select Ungroup.

Step 8: Save, preview, and publish

Nothing we’ve done is live yet. We’re going to save our work, check it from a user’s point of view, and publish it.

Save, preview, and publish (1 min 53 s)

  1. Select Publish, then select Save as Draft.

    A draft stores your work without changing the live page.

  2. Select the preview icon.

    The editing panels disappear, and the page displays as it will for users.

  3. Select the View assets button.

    Asset library opens.

  4. Return to Welcome, close the preview, and open the version history.

    Your draft is listed, with a timestamp and your name.

  5. Select Publish, then confirm.

Open Welcome in a new browser tab.

You’ll notice that the page displays without the editor’s outlines and toolbars, exactly as it will for your users.

Version history keeps every saved version, so you can preview an earlier one and publish it again if you need to roll back.

The finished page

Here’s what we’ve built on Welcome:

  • Hero: a centre-aligned section template, headed Welcome to the tutorial portal.

  • Grid: the Start here heading and View assets button, grouped, plus an image, a muted video with controls, and an Our latest campaign card.

  • State: published, with a saved draft in its version history.

Tutorial portal is still inactive, so only administrators can open the page. When you want users to reach it, activate the portal, as in step 7 of Create and brand your first portal.

Conclusion

In this tutorial, you’ve learned how to:

  • Open the page editor on a CMS page.

  • Add sections from a section template and as an empty grid.

  • Add text, button, image, and video widgets.

  • Add a widget template and group widgets.

  • Save a draft, preview a page, and publish it.

Across the three portal creator tutorials, you’ve created a portal, styled it, given it pages, and built its landing page. To control which assets appear on a page like Asset library, continue with Create your first lens.

Add CMS grids and carousels and Add widgets to a CMS page cover every section and widget option.