The Content Designer for Pages provides an intuitive, accessible, and flexible workspace for creating visually engaging, mobile-responsive pages. Pages are built using a clear hierarchical structure. Each level has a clear purpose:
- Sections: Create large visual horizontal areas separating content on the page. You can add background color or images and set the section height.
- Containers: Reside in sections and define the horizontal layout. Each container starts as a single column. You can adjust the layout to multiple columns. You can also add background colors or images to containers.
- Columns: Appear when a container is changed from a single to a multi-column layout. Blocks and media are placed inside columns. You can add background color to columns.
- Blocks: Add the content, such as text, buttons, media, or dynamic elements.
- Media: Add media from My Files into your page.
When you open a page, it already includes one section and one container. This lets you start adding content right away. All content must be placed inside a container or its columns.
Working in the Editor
When you select any of the elements in the Editor, editing options appear:
-
Contextual toolbar: The contextual toolbar displays under a selected element. It provides actions relevant to that element.
-
Block header: The block header provides you with:
- A drag handle: Select the 6 dots icon and move the element to the desired spot.
- Select Parent: Select the 4 square icon on the block header to select the parent element.
Structure Your Content
Sections and containers define the structure of your page. Every page has at least one section and every section has at least one container.
In the Content Designer, when you select a section or container the contextual toolbar shows the following options:
The + Section or + Container options allow you to add the respective element below the current one. You can add as many sections and containers as needed to structure your content.
Move sections or containers using the up and down arrows. You can use these when more than one section or container exists. These provide you with the flexibility to better position the section or container throughout the creation process.
Use the pencil icon to update your section or container. You can find the following tabs:
-
Layout (Containers Only): Choose from the different column options.
-
Design: Set branded background colors or images for sections and containers, with optional color overlays to improve contrast and keep designs on brand.
For sections, you can also adjust the height using Small, Medium, or Large options. - Visibility: Choose which devices content is shown on and whether it is visible to or hidden from specific audiences.
Use the double-page icon to duplicate a section or container.
Use the trash icon to delete a section or container.
Apart from these options, you can also copy and paste or drag and drop containers and blocks while you structure your content.
Add Blocks to Columns and Containers
The Blocks option is available on the contextual toolbar of containers or their columns. Selecting the option opens the Blocks panel that gives you access to all available content blocks that you can add to your page layout.
Each column supports one block per row, but you can stack multiple blocks vertically. To place content side by side, you can nest an additional container with a multi-column layout. There are four different ways to add a block to your content:
Select the column or container where you want to add content, then select a block from the Blocks flyout to insert it directly into the selected location. The block displays in the selected container or column.
When you drag a block into the designer, blocks automatically snap into place above or below existing content without requiring precise placement. This makes adding and rearranging content faster and more forgiving.
The content designer supports auto-scrolling when you drag elements, and shows clear indicators where you can drop them.
Use the quick actions menu to add blocks using the keyboard. After selecting a column or container, open the menu to browse or search available blocks and insert them directly into your layout.
You can duplicate existing content by copying and pasting blocks within the designer, from other pages created with the Content Designer, or from external sources. To paste content, first select a section or container. For example, select a button in container/column 1, press Cmd/Ctrl + C, then select container/column 2 and press Cmd/Ctrl + V to paste the button there.
When you paste a URL over selected text, the content designer automatically converts it into a hyperlink.
You can add as many blocks as needed to structure your content. Once a block is added, you see the block-specific contextual toolbar.
Enhance Your Content with Media
You can insert files into containers or columns using multiple interaction methods, including:
- Selection
- Drag and drop
- Quick actions menu
- Copy and paste
My Files in the side panel of the Content Designer allows you to add and manage media within the page layouts.
Media elements are placed directly within the layout, which reduces manual positioning and speeds up page creation.
Finalize and Publish Your Page
The Content Designer supports a flexible workflow that lets you save changes, publish new pages, and update existing pages without immediately affecting what employees see. When you are ready with the updates to your page, use one of the following options:
When making updates to your pages, use the Save button at the top of the page to store your changes. Not saving your page and moving out of it displays a Leave Page? alert to remind you to save your page, because if you don’t, you lose the unsaved changes.
Ensure quality of content for your audiences by reviewing the page before publishing it. The Preview option from the top menu allows you to select the device you want to preview the page on.
You will see this option only the first time you publish the page. Once you have confirmed the content and the look and feel of the page, use the Publish button from the top menu to publish your page.
You see this option if the page has already been published before. Once you have confirmed the updates to the page, use the Update button from the top menu to update your page.
Comments
0 comments
Please sign in to leave a comment.