When creating a page using the CMS, a variety of content sections are available to help structure and enhance the user experience. These sections dictate how content appears on the front end, offering flexibility in layout and design. Below is a breakdown of the different content sections available, their purpose, and how they translate to the website.
Page Header
The Page Header section allows you to create a visually engaging introduction to your page. It offers two distinct layout options:
- Side by Side – Divides the header into two sections, typically one for text and the other for visuals.
Example
- Full Width – Expands the header across the entire page width, making it ideal for impactful imagery or videos. If you are looking to use a looping video as the header hero, it is mandatory to select the full width heifer from the layouts.
Example
Additionally, you can customise the background colour and select different visual elements for the header:
-
Video – Adds dynamic content for a more interactive experience.Have the option to add a looping video
- For the video you will also have the option to select the video size that fits your needs.
- Image – Provides a static but high-quality visual to complement the page content.
Previews of both layout styles can be seen at the bottom of the section within the CMS.
Content Grid
The Content Grid section allows for structured content placement by layering different types of content in a grid format. This can be used to create an icon line up to show different benefits that you receive from the VIP program, which is what it is commonly used for. . You can create different grid items to line up the different icons and have text underneath each grid item via the content section as well.
If your product has a mobile app, this section gives you the option to select the items mobile layout as well.
Example :
Single Column Content
This section enables the placement of content in a single-column format, making it ideal for long-form text, announcements, or narratives that need a full-width display without distractions.
Example:
Divider Line
A simple yet effective tool, the Divider Line creates a horizontal line to separate sections of content. This enhances readability and improves content structure on the front end.
Example:
Image Beside Text
This section pairs text with an accompanying image. It is commonly used for call-to-actions (CTAs), promotional messages, or key information that needs a visual complement to attract user attention.
Example:
Logo Grid
The Logo Grid section allows the addition of logos to the page. It can be used in combination with text, making it useful for showcasing the lottery logo.
Two Column Grid
This section provides two text columns placed side by side. It is useful for presenting comparative information, such as product features, service benefits, or key highlights of an offering.
Example
Blog Posts
The Blog Posts section enables the integration of blog content into a page. It displays blog posts with a thumbnail and preview text, providing an engaging way to keep users informed and drive traffic to the blog.
Blog Banner
The Blog Banner section highlights an active lottery campaign. It includes the lottery prize details along with an image and a direct link to the "Buy Tickets" page, making it an effective promotional tool.
Blog Categories
With the Blog Categories section, clickable links to blog articles can be added to the page. This section displays the names of articles, making navigation easy for users seeking specific content.
Full Page Content
This section allows for adding a combination of text and images in a full-page format. It is commonly used for news stories, announcements, or any content-heavy page that requires structured text and visuals.
Featured Tickets
The Featured Tickets section highlights selected tickets available for purchase. It showcases specific details such as ticket bundle prices, encouraging users to explore different ticket options.
You can find information about how to add in the featured tickets section by visiting ‘how to add a featured tickets section’ article.
HTML Content
For advanced customisation, the HTML Content section provides the ability to insert custom HTML code into the page. This is ideal for embedding unique elements such as forms, widgets, or interactive components beyond standard CMS capabilities.