Blocks

Choose a block for the piece of content you want to add. The main page editor offers larger blocks. Inside another block, the picker offers only the blocks that fit there. A Stack has its own item picker.

Add a blockLink to this section

1. Click a blank paragraph in the main Content editor.
2. Open the blocks menu at the left of the toolbar. Choose the block you need.
3. Fill in its required fields, marked with an asterisk. Expand the block if its fields are collapsed.
4. Choose Save Draft, then check Live Preview before publishing.

Enlarge screenshot

Blocks appear in the order you add them. Their header helps you expand or collapse them. The optional block name helps your team identify a block; it is separate from a visible heading in the content. Use a block's remove control only after checking that you have selected the right block.

Advanced settings opens a separate drawer where a block offers further layout or appearance choices. Start with the defaults. The settings available can change when you select media or place a block inside another block.

The following catalog covers the demo's page blocks, Stack items, and inline items. Your agency can make a different set available on your site.

SectionLink to this section

A full-width band of content, such as an introduction or a contact area.

Enlarge screenshot

Field	What it does	Tip
Color	Chooses Default or Dark for this section.	Keep text and imagery readable together.
Background Variant	Chooses Main or Alternative for the background.	Use a different background to separate neighboring sections when needed.
Padding	Sets the space around the section content.	Start with Default.
Content	Holds text and the blocks allowed inside a section.	Use headings and paragraphs to give the section a clear structure.

FeatureLink to this section

Text beside an image, video, YouTube video, or map. Use it to explain a service or tell a story with supporting media.

Enlarge screenshot

Field	What it does	Tip
Color and Background Variant	Choose the colors for the whole feature.	Preview the whole band.
Media Float	Chooses which side the media occupies.	Check the order on mobile too.
Media Type	Chooses Image, Video, YouTube video, or Google Maps.	Complete the media field that appears.
Select image	Chooses an image when Image is selected.	Use a library image with suitable alternative text.
Content	Holds the text and available nested blocks.	Keep the copy relevant to the media.
Aspect Ratio	Sets the media shape once media is selected.	Check that a crop does not hide the subject.

ColumnsLink to this section

A row of related content, such as services, benefits, or cards. Each item is one column.

Enlarge screenshot

Field	What it does	Tip
Number of columns in one row	Sets how many columns appear together.	Use fewer columns for longer text.
Items	Holds the column entries. Use Add Item for another one.	Review the order at smaller widths.
Layout	Sets an item to Column, Card, or Row.	Choose the layout before adding detailed content.
Content	Holds the content of one item.	Keep neighboring items similar in length where practical.
Advanced settings	Opens further layout choices.	Start with the defaults and use preview to check a change.

Columns layout field	What it does	Tip
Padding	Sets space around the group.	Start with Default.
Horizontal Gap and Vertical Gap	Set space between items.	Leave enough room for each item to read clearly.
Horizontal Alignment and Vertical Alignment	Position items across and down the group.	Review neighboring items together.
Horizontal Divider and Vertical Divider	Add dividing lines between items.	Use when a line helps separate the content.
Disable Wrapper Animations	Animates only the content instead of each whole item.	Check the effect in preview.
Disable Stagger Animation	Animates all items together without a delay between them.	Follow the animation style elsewhere on your site.

StackLink to this section

A group of small items, such as buttons, badges, icons, or text. Use it when the items should be arranged together.

Enlarge screenshot

Field	What it does	Tip
Items	Holds the items in their display order.	Use Add Item and choose the item type.
Add Item	Opens the item picker. It offers Rich Text, Button, Chip, Icon, Avatar, Image, and Stack.	A Stack item lets you group items inside this Stack.
Advanced settings	Opens the Stack layout controls.	Check the arrangement on a small screen.

Enlarge screenshot

Enlarge screenshot

Stack layout field	What it does	Tip
Horizontal Gap and Vertical Gap	Set the space between items.	Start with the defaults and check mobile.
Direction	Chooses how the items run across or down the group.	Check that the reading order still makes sense.
Jusitfy Content	Positions or distributes the items along that direction.	Preview the spacing between items.
Align Items	Aligns the items across the other direction.	Review text and images together.
Different settings for mobile	Offers a separate arrangement for smaller screens.	Use when a desktop row needs to become a simpler mobile group.
Define Width and Define Height	Give the group an explicit size.	Keep the defaults unless you have checked the result at several widths.

Rich Text inside a StackLink to this section

A text item inside a Stack. It gives a group of buttons or icons a short piece of supporting text.

Enlarge screenshot

Field	What it does	Tip
Content	Holds the item's text and the available formatting.	Use a short phrase or paragraph that fits the group.

Nested StackLink to this section

A Stack item inside another Stack. The picker calls this item Stack. Use it to group some items separately within a larger group.

Enlarge screenshot

Field	What it does	Tip
Items	Holds the items in this smaller group.	Keep the nesting easy for your team to follow.
Add Item	Adds an item to the nested group.	Choose the type that fits the content.
Advanced settings	Controls the nested group's layout.	Preview the outer and inner groups together.

ImageLink to this section

A still image in your content. The same library image can be used in several places.

Enlarge screenshot

Field	What it does	Tip
Select image	Chooses a file from Uploads or starts a new upload.	Check the thumbnail and filename.
Advanced settings	Opens width, shape, movement, and link choices.	Preview the crop before publishing.
Width alignment	Uses the default width or expands the image to the content area or screen where offered.	A direct image in a card may instead offer Card width.
Aspect Ratio	Sets the displayed image shape.	Keep the subject visible.
Link Type	Makes the image unlinked, a custom link, or an internal link.	Test linked images before publishing.

See Media for uploads and alternative text.

VideoLink to this section

An uploaded video in the page body. Choose this for a video file in your library, rather than a YouTube address.

Enlarge screenshot

Field	What it does	Tip
Select video	Chooses the uploaded video.	Use a file prepared for the website.
Advanced settings	Opens the available size and playback settings after media is selected.	Review autoplay, controls, and loading choices with your agency if needed.

YouTube videoLink to this section

A YouTube video shown in the page, without uploading the video file to your library.

Enlarge screenshot

Field	What it does	Tip
Paste Youtube URL	Holds the YouTube video address.	Use the address of the intended video.
Advanced settings	Offers presentation settings after the video address is entered.	Check the shape and width in preview.

CarouselLink to this section

A sequence of media items that visitors can move through. Use it when the items belong together.

Enlarge screenshot

Field	What it does	Tip
Carousel Items	Holds the selected library files.	Put them in the intended order.
Create New and Choose from existing	Upload a file or choose one already in the library.	Check the selected thumbnails.
Advanced settings	Opens the carousel presentation settings.	Make sure visitors can reach every item on mobile.

Carousel layout field	What it does	Tip
Width alignment and Aspect Ratio	Set the carousel width and image shape.	Check the image crops.
Object Fit	Chooses Cover or Fit for the media.	Cover fills the space; Fit keeps the whole image visible.
Horizontal Alignment and Vertical Alignment	Position the media in its space.	Keep the subject visible.
Pagination	Offers None, Bullets, or Numbers.	Give visitors a way to understand the sequence.
Navigation	Places navigation On the images or After the images, or uses None.	Check that visitors can move through the items.
Enable thumbnails	Adds small previews of the items.	Useful when visitors need to choose an image directly.
Loop the carousel	Continues from the last item to the first.	Check that the sequence still makes sense.

GalleryLink to this section

A gallery section with media and optional text before and after it. Use it for a portfolio or a collection of images.

Enlarge screenshot

Field	What it does	Tip
Color and Background Variant	Set the gallery section's colors.	Check them against the neighboring content.
Content Before	Holds text above the gallery.	Add a heading to explain the images.
Gallery Items	Holds the selected library files.	Choose related images and review their order.
Content After	Holds text below the gallery.	Use for a short explanation or action.
Advanced settings	Opens further gallery presentation choices.	Check the whole gallery in preview.

Gallery layout field	What it does	Tip
Content Before Padding	Sets space around the introduction.	Review the gap between the heading and images.
Gallery Padding	Sets space around the gallery itself.	Check the neighboring sections.
Content After Padding	Sets space around the closing content.	Give a closing action enough room.

CardLink to this section

A contained piece of content, such as a short service description, offer, or call to action.

Enlarge screenshot

Field	What it does	Tip
Color	Uses Auto, Default, or Dark.	Auto follows the surrounding content.
Variant	Chooses Default or Highlighted.	Reserve Highlighted for an item that needs emphasis.
Content	Holds the text and allowed nested blocks.	Keep a card focused on one subject.
Advanced settings	Opens additional card presentation choices.	Review any change alongside neighboring cards.

Card layout field	What it does	Tip
Width alignment	Uses the default width or expands to the surrounding content area.	Check the surrounding layout.
Link Type	Makes the card unlinked, a custom link, or an internal link.	Test the destination before publishing.

If you link the whole card, keep links and buttons out of its content. Leave Link Type at None when the card contains its own links or buttons.

AccordionLink to this section

A heading visitors can open to read more. Use several Accordion blocks for questions and answers or compact supporting details.

Enlarge screenshot

Field	What it does	Tip
Title	Sets the heading visitors click.	Write a clear question or description.
Content	Holds the text revealed when the item is opened.	Keep important information easy to find outside accordions too.

QuoteLink to this section

A quotation or testimonial, with an optional credit.

Enlarge screenshot

Field	What it does	Tip
Show Quote Symbol	Shows or hides the decorative quote symbol.	Leave it on if it suits the page.
Content	Holds the quoted words.	Keep the quotation accurate.
Add Citation	Adds fields for crediting the speaker or source.	Credit quotations where needed.

EmbedLink to this section

Content supplied by another service, such as a booking tool your agency has approved.

Enlarge screenshot

Field	What it does	Tip
Embed Code	Holds the information supplied by the service or your agency.	Ask your agency to check unfamiliar embeds before using them.

FormLink to this section

A form already set up for your site, placed in the page content.

Enlarge screenshot

Field	What it does	Tip
Select a form	Chooses the form visitors will see.	Check the selected form's name and fields.
Advanced settings	Opens available presentation settings.	A form inside a smaller content area follows that area's width.

See Forms for form content and submissions.

PostsLink to this section

A list of articles or news items. It can update automatically as you publish posts, or show a fixed selection.

Enlarge screenshot

Field	What it does	Tip
Prepend content	Holds content above the listing.	Use a short heading or introduction.
Color and Background Variant	Set the listing section's colors.	Keep it distinct enough to scan.
Source	Chooses Automatic (query) or Fixed (hand-picked).	Automatic keeps a growing listing up to date.
Filter by categories and Filter by tags	Narrow the automatic selection.	Use only the filters needed for this listing.
Order by and Direction	Choose the ordering and its direction.	Publish date with Descending shows recent posts first.
Posts per page	Sets the number in the main list.	A highlighted first post or lead group can add items to the first page.
Layout	Chooses the main list's presentation.	Check card readability on mobile.
Loading strategy	Chooses how further posts become available.	Check that visitors can reach the full list.
Advanced Settings	Opens additional listing choices.	Review the first page and later pages when changing these.

See Blog posts for writing and publishing individual posts.

ComponentLink to this section

A reusable piece of content stored in Components. Use it for content your agency has prepared to appear in several places.

Enlarge screenshot

Field	What it does	Tip
Select a component	Chooses the shared content to display.	Changing that component can affect every page that uses it.

Inline itemsLink to this section

The inline menu adds small items within text. Put the cursor where the item should appear, choose the item, complete its drawer, and choose Save changes. This updates the page editor. Save or publish the page separately.

The same item types can appear inside a Stack. Stack items are arranged as a group rather than inserted into a paragraph.

ButtonLink to this section

A linked call to action such as booking a visit or opening another page.

Enlarge screenshot

Field	What it does	Tip
Button title	Sets the visible action words.	Use a clear verb such as Book or View.
Link Type	Chooses Custom URL or Internal Link.	Complete the destination that appears.
Enter a URL	Sets the custom destination.	Use the full address for another website.
Open in new tab	Opens the destination separately.	Use only when helpful.
Appearance and Advanced settings	Hold the available button presentation choices.	Follow your site's existing button style.

ChipLink to this section

A short badge or label, with an optional link.

Enlarge screenshot

Field	What it does	Tip
Chip title	Sets the visible badge words.	Keep them short.
Link Type	Chooses None, Custom URL, or Internal Link.	Use None for a badge that is not clickable.
Appearance and Advanced settings	Hold the available chip presentation choices.	Keep similar badges consistent.

IconLink to this section

A small symbol chosen from the site's icon library.

Enlarge screenshot

Field	What it does	Tip
Select Icon	Opens the searchable icon picker.	Search for the meaning you want, then select a symbol.
Background	Adds a background to the icon.	Check the contrast in preview.
Link Settings	Adds a destination when the icon should be clickable.	Use nearby text to make the destination clear.
Stack Related Settings	Control its presentation in a Stack.	Review the whole group, not only the icon.

AvatarLink to this section

A small library image, often used alongside a name or short piece of text.

Enlarge screenshot

Field	What it does	Tip
Select image	Chooses the avatar image.	Use an image that remains recognizable at a small size.
Stack Related Settings	Control its presentation in a Stack.	Check its size beside the other items.

Heroes and mapsLink to this section

The opening hero has its own fields above the main content editor. Set the opening hero using Hero Type on the page. For a map in the body, choose Feature, then Google Maps under Media Type. See Page templates for the opening hero choices.

Check afterwardsLink to this section

Preview the complete page at desktop and phone widths. Check the block order, required content, links, image crops, and any interactive controls. Use Publish changes when the page is ready.

Related pagesLink to this section

Adding a page tour, Editing content, Page templates, Media, Live preview.