How to Use the CMS Editor: Block Library

📒 NOTE

Layouts and elements of dynamically generated content, such as the categories page, cannot be edited.

Dynamic Content Note

Page Headers & Hero Sections

Create the main header area of a page, displaying a title, optional description and background image, with multiple layout styles available.

Page Headers & Hero Sections

#	Setting	Description	Dashboard Settings
1.	Title	Main text (optional).	Web Checkout > Meta Data
2.	Description	Supplementary text displayed in smaller font. If left empty, the title expands to fill the space.	Web Checkout > Meta Data
3.	Background Image	Enter URL or upload an image.	Web Checkout > Branding
4.	Show Search Bar	Enable to display a search bar.
5.	Layout Style	Split Screen
		Full Width
		Centered
6.	Claims	Enable to show claims	Web Checkout > Claims
	Spacing	Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Options include presets S, M, L, XL or custom settings

Hero Section Settings

Products & Destinations

Display products, product categories, and destinations using flexible layouts, with content sourced directly from your dashboard configuration.

Product Categories

Product Categories

#	Setting	Sub-setting	Description	Dashboard Settings
1.	Title		Main text (optional).
2.	Subtitle		Supplementary text displayed in smaller font. If left empty, the title expands to fill the space.
3.	Category Selection	Automatic	Content is populated automatically based on dashboard configuration.	Products > Categories
		Featured Categories Only	Display only categories flagged as Featured.	Products > Categories
		Destination	Select the destination whose categories will be displayed.	Products > Destinations
		Number of Categories	Select how many categories to display from the dropdown.
		Show Load More Button	Display a Show More button to reveal additional categories beyond the initial selection.
		Manual selection	Manually select which categories will be displayed
	Spacing		Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Options include presets S, M, L, XL or custom settings

Product Categories Settings

Destination

📒 NOTE

This block uses destinations created in the dashboard.

Destinations

#	Setting	Description	Dashboard Settings
1.	Title	Main text (optional).	Web Checkout > associated Brand name
2.	Description	Supplementary text displayed in smaller font. If left empty, the title expands to fill the space.
3.	Enable Contents Switcher	Enable to allow customers to switch between continents when destinations span multiple continents .
4.	Layout	Choose how destinations are displayed.	Images are pulled from Products > Destinations > Branding
		Large
		Small
		Strip
	Spacing	Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Options include presets S, M, L, XL or custom settings

Destinations Settings

Product Highlight

📒 NOTE

This block uses products created in the dashboard.

#	Setting	Description	Dashboard Settings
1.	Title	Main text (optional)
	Product	Select a product from the list of your existing products	Products
	Switch Layout	Default setting: Left - Product Description Right - Image Toggle to switch element positions
2.	Product Title	Content is populated automatically based on dashboard configuration.	Products
3.	Product Description	Content is populated automatically based on dashboard configuration.	Products
4.	Product Image	Enter URL or upload an image.	Products > Branding
5.	Primary CTA Text	Launch the checkout widget
6.	Secondary CTA Text	Redirect to the product page	Products
	Background Color	Select a background color of the product higlight
	Disable Hover Effect	Disable default behaviour - product highlight expands on hover
	Spacing	Choose top and bottom spacing between the product highlight and surrounding elements on mobile or desktop. Options include presets S, M, L, XL or custom settings

Product Highlight Settings

Product Grid

Product Grid

#	Setting	Sub-setting	Description	Dashboard Settings
1.	Title		Main text (optional).
2.	Description		Supplementary text displayed in smaller font. If left empty, the title expands to fill the space.
3.	Product Selection	Automatic	Content is populated automatically based on dashboard configuration.	Products
		Featured Products Only	Display only products flagged as Featured.	Products
		Destination	Select the destination whose products will be displayed.	Products
		Category	Select the category whose products will be displayed.	Products > Categories
		Number of Products	Select how many products to display from the dropdown.
		Show Load More Button	Display a Show More button to reveal additional products beyond the initial selection.
		Manual	Manually select which categories will be displayed.
	Spacing		Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Options include presets S, M, L, XL or custom settings

Product Grid Settings

Search Bar

Search Bar

📒 NOTE

The search bar is universal and can be used to search products, articles and pages.

Setting	Description
Title	Main text (optional).
Spacing	Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Options include presets S, M, L, XL or custom settings

Search Bar Settings

Content & Media

Enrich your pages with structured content and media elements, including text, images, callouts, and other informational components.

Announcement / Callout

Use this block to highlight important or interesting information.

📗 TIP

The text in Announcement / Callout blocks can be edited directly within the block.

Drag the Announcement / Callout block into the desired position.
Enter an URL or upload an image.
Background Image
Alternatively, select a flat background color using the color picker or enter the color code.
Background Color
Enter the text that will be displayed on the button.
📗 TIP
If the text field is left empty, button will not be displayed.
Enter the URL the button links to.
Button Text & URL
Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing

Divider

Use this block to visually separate sections of your page.

Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing

FAQ

Drag the FAQ block into the desired position.
In the Settings Panel, press the + Add FAQ button to add new questions.
Add FAQ
In the FAQ window, enter the 'Question' and the 'Answer'.
Press the + Add FAQ button.
Repeat for additional entries.
Add FAQ
Remove items using the Remove button.
Remove
Press the Done button when finished.
Done
📗 TIP
You can edit or remove, or reorder Q&A entries from the Settings Panel.

Edit FAQs
Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing

Feature List

Drag the Feature List block into the desired position.
In the Settings Panel, add a title.
Title
📗 TIP
Optionally, you can hide the title by checking the 'Hide Title' box.
Press the + Add Features button.
Feature List
In the Features window, enter an URL or upload an image.
Feature Image
Enter a feature title and description.
Feature Title & Description
📗 TIP
Optionally, you can enter alt text for accessibility.
Press the + Add Feature button.
Repeat for each new feature.
Remove items using the Remove button.
Remove Feature
Press the Close button when finished.
Close
📗 TIP
You can edit or remove a specific feature, or reorder the list from the Settings Panel.

Edit Feature List
Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing

Image Gallery

Drag the Image Gallery into the desired position.
In the Settings Panel, add a title.
Gallery Title
📗 TIP
Optionally, you can hide the title by checking the 'Hide Title' box.
Press the + Add Images button.
Feature List
In the Images window, enter an URL or upload an image.
Add Images
📗 TIP
Optionally, you can enter alt text for accessibility.
Press the + Add Image button.
Add Image
Repeat for each new image.
Remove items using the Remove button.
Remove Feature
Press the Close button when finished.
Close
📗 TIP
You can remove a specific image from the Settings Panel, or reorder images in the list.
Edit Gallery
Select the number of image rows (1, 2 or 3), where each row contains three images.
Number of Rows
Select the layout style:
Layout Style
- Gallery
- Featured
Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing

Image with Text

Drag the Image with Text block into the desired position.
In the Settings Panel, add a title and description.
Title & Description
Enter an URL or upload an image.
Image
Enable the Reverse direction to swap the positions of the image and text.
Reverse direction
Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing

Legacy Content Disclaimer

Add this block to pages that were created before the new editor's blocked-based editing was introduced.

Edit the disclaimer text as needed.
Edit Body
Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing

Rich Text

Use this block to add text-only content, such as paragraphs or formatted text, without images.

Enter a title in the Settings Panel, then edit and format the text directly within the block.
Title
Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing

Single Image

Use this block to add a full-width image to your page.

Enter an image URL or upload an image in the Settings Panel.
Single Image
Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing

Reviews & Highlights

Build trust by showcasing customer feedback, partner logos, and key highlights that reinforce credibility and value.

Trust Badges / Claims

Use this block to display informative tags about your attraction's offerings, such as Wi-Fi availability, ticket redemption, and more.

In the Settings Panel, choose whether to add claims automatically or manually.

Automatic

Pull claims as added in the dashboard in Web Checkouts > Claims.
Trust Badges / Claims - Automatic
Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing

Manual

Press the + Add Claim button in the Settings Panel.
Add Claim
Add a Title and select an icon.
Add Claim
Press the +Add Claim button to add the claim to the list.
Add Claim
Repeat for each claim.
📗 TIP
You can also edit or remove a individual claims, or reorder the list from the Settings Panel.
Edit Claims
Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing

Partner Logos

Use this block to showcase trusted partners on relevant web checkout pages.

Drag the Partner Logos block into the desired position on the page.
In the Settings Panel, add a title and description.
Partners Title & Description
Press the + Add Partner button in the Settings Panel.
Add Partner
In the Partner window, enter a logo URL or upload an image.
Add Partner Logo
📗 TIP
Optionally, add an image description for accessibility.
Press the + Add Partner button.
Add Partner
Repeat for each additional logo.
Remove items using the Remove button.
Remove Logo
Press the Close button when finished.
Close
📗 TIP
You can also edit, remove, or reorder logos from the Settings Panel.
Edit Partners
Select how partner logos are displayed:
- Banner
- Grid
- Carousel
When using the Banner type, select a scroll speed: Slow, Medium, Fast.
Banner Scroll Speed
When using the Carousel type, customise the block:
Carousel Settings
- Loop - navigation is continuous. Clicking the arrow at the end returns to the beginning and vice versa.
- Show Adjacent Content - partially displays logos at the edge of the screen to indicate more content. When disabled, logos are grouped so that none are cut off.
Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing

Reviews

Use this block to add customer reviews to your web checkout pages. Reviews are intended for visitor feedback about your attraction.

Drag the Reviews block into the desired position on the page.
In the Settings Panel, add a title and description.
Reviews Title & Description
Select the type of reviews to display:
- Reviews - rating based customer reviews
- Testimonials - descriptive, text-only feedback
Type
📗 TIP
You can also select the preconfigured Testimonials block directly from the Block Library. This guide focuses on creating a Reviews block. Refer to the Testimonials guide to detailed steps on testimonial blocks.
Press the + Add Review button in the Settings Panel.
Add Review
In the Add Review window, select a date.
Pick a Date
Enter the reviewer's name and review text.
Reviewer
Set a rating between 0 - 5 stars.
Stars
📗 TIP
Ratings can be set in 0,5 increments.
Choose the reviewer's country of origin.
Country
Enter an avatar image URL or upload an image.
Avatar
📗 TIP
The avatar can be a generic image or the reviewer's photo, if available.
Press the + Add Review button to save the review.
Add Review
Repeat for each additional review.
Remove items using the Remove button.
Remove Review
Press the Close button when finished.
Close
📗 TIP
You can also edit, remove, or reorder reviews from the Settings Panel.
Edit Reviews
Select how reviews are displayed:
- Rows
- Carousel
When using the Rows layout, select the number of rows displayed on the page (1-6).
Enable the Show more reviews button to allow visitors to reveal additional reviews.
Rows Settings
Show More Reviews
When using the Carousel layout, customise the block:
Carousel Settings
- Loop - navigation is continuous. Clicking past the last review returns to the first, and vice versa.
- Show Adjacent Content - partially displays reviews at the edge of the screen to indicate more content. When disabled, reviews are grouped so that none are cut off.
Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing

Testimonials

Use this block to add customer testimonials to your web checkout pages. Testimonials are intended for B2B feedback from partners you have worked with in a professional context.

Drag the Testimonials block into the desired position on the page.
In the Settings Panel, add a title and description.
Testimonials Title & Description
Select the type of content to display:
- Reviews - rating-based feedback
- Testimonials - descriptive, text-based testimonials
Type
📗 TIP
You can also select the preconfigured Reviews block from the Block Library. This guide focuses on creating a Testimonials block. Refer to the Reviews guide for detailed steps on review blocks.
Press the + Add Testmonial button in the Settings Panel.
Add Testimonial
In the Testimonial window, select a date.
Pick a Date
Enter the reviewer's name, their testimonial, and the company name.
Reviewer
Enter a company logo URL or upload an image.
Company Logo
Press the + Add Testimonial button to save the testimonial.
Add Testimonial
Repeat for each additional testimonial.
Remove items using the Remove button.
Remove Testimonial
Press the Close button when finished.
Close
📗 TIP
You can also edit, remove, or reorder testimonials from the Settings Panel.
Edit Testimonials
Select how testimonials are displayed:
- Rows
- Carousel
When using the Rows layout, select the number of rows displayed on the page (1-6).
Enable the Show more reviews button to allow visitors to reveal additional testimonials.
Rows Settings
Show More Reviews
When using the Carousel layout, customise the block:
Carousel Settings
- Loop - navigation is continuous. Clicking past the last testimonial returns to the fist, and vice versa.
- Show Adjacent Content - partially displays testimonials at the edge of the screen to indicate more content. When disabled, testimonials are grouped so that none are cut off.
Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing

Communication & News

Use this block to add a contact form that allows visitors to get in touch with you.

Drag the Contact Us block into the desired position on the page.
In the Settings Panel, add a title and description.
Contact Us
Enter the email address that should receive form submissions.
Send to Email
To customise the contact form, press the + Add Fields button in the Settings Panel.
Form Fields
In the Configure Form Fields window, you can add preconfigured fields using the Quick Add fields.
Quick Add
Create custom form fields by specifying:
- Field Type - Text, Email, Phone, Text Area or Number
- Field Label - the field name, such as Name or Phone Number
- Placeholder - helper text that indicates the expected input
- Required field - enable to make the field mandatory
Add Custom Field
Press the + Add Field button to add the field to the form.
Add Field
Repeat for each additional field.
Remove items using the Remove button.
Remove
Press the Close button when finished.
Close
📗 TIP
You can also edit, remove, or reorder fields from the Settings Panel.
Edit Form Fields
Select how the contact block is displayed:
- Simple
- With Address
- Dark
When using the Simple or Dark layout, enter an image URL or upload an image.
Image
When using the With Address layout, enter:
- Contact Email
- Phone Number
- Opening Hours
- Street Address
- Shareable directions link (for example, a Google Maps link)
Address
Enter a title and message that are displayed after the contact form is successfully submitted.
Success Title & Message
Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.
Spacing