Page Builder

Table of Contents:

1. Page Builder Overview
2. Page Builder Sections
   1. Sections Overview
   2. How to Add a Section
   3. How to Move a Section
   4. How to Change a Section Type
   5. How to Configure Section Properties
   6. How to Delete a Section
3. Widgets Overview
   1. How to Add a Widget to a Section
   2. How to Configure Rich Text Component Widget
   3. How to Configure Feature Info With Icon Widget
   4. How to Configure Sticky Note Cards Component Widget
   5. How to Configure Menu Info Component Widget
   6. How to Configure Info Component with CTA Widget
   7. How to Configure Menu Split Card Widget
   8. How to Configure Menu List Component Widget
   9. How to Configure Menu Card Component Widget
   10. How to Configure Spotlight Testimonials Widget
   11. How to Configure Testimonial Component Widget
   12. How to Configure Category Card Component Widget

Return to CMS Manual Main Navigation

Page Builder Overview

Page Builder is a feature of Kentico that allows you to create and manage content directly on the UI of the page in the CMS.

Pages that have Page Builder enabled will have the Page tab available on the upper-left side, next to the Content tab. On your website, the following Pages have the Page Builder tool enabled:

• About
• Menus
• Breakfast Menus
• Lunch Menus
• Resources
• Privacy Policy
• Terms of Use

Key Features of Page Builder:

• Easy to use
• Gives you more control of the content and layout than with structured content while maintaining design consistency
• Empowers you to create new pages with different content and layouts quickly without having to rely on developer intervention
• Provides a better WYSIWYG (what you see is what you get) experience than structured content fields
• You can build pages or adjust the content and layout using configurable sections and widgets.
  • Add "sections" to a page to determine the group of widgets to use.
  • Add as many widgets as you want to a page. (Rise already created a pre-built library of widgets for you to use.)
  • Drag and drop widgets to re-order how they're displayed on the page.
  • Copy and paste entire widgets to reuse content and save time.

It is recommended to use Page Builder on high-traffic pages, landing pages, or WYSIWYG-heavy pages that require you to tailor both content and design.

To learn more about Page Builder from Kentico, visit the official Kentico documentation.

Return to Top

Page Builder Sections

When using Page Builder, you can localize the widgets by adding "Sections", which are components that define the widget zones within editable areas. You should always add a "Section" first before adding a widget.

Rise created a library of Sections for you to use:

• Default Component Section
• Menu Page Component Section
• Menu Page Menu Cards Section
• Spotlight Component Section
• Testimonial Component Section
• Category Cards Component Section

NOTES:

Some sections are available only on specific pages. The sections displayed in the Section Library depend on the page you are editing.

Return to Top

Sections Overview

• Sections define the layout and widget zones within a page. Use the Add Section (+) option to insert the appropriate section from the Section Library before adding widgets to the page.
• You can have multiple sections on a page.
• After adding a section, you can then add the widget(s) to the section. To learn more about this, visit the Page Builder Widgets section.

Return to Top

How to Add a Section

1. Navigate to the Pages Application.
2. Find and select any page from the tree where the Page Builder tool is enabled (e.g., About, Menus or Privacy Policy).
3. Click on the Page tab or make sure it is selected.
4. Click on the translucent gray + icon on the left side of the page.
5. In the Section Library window that pops up, click on the section of your preference to add it to the page (e.g., Default Component Section).
6. Click the Save button.
7. Once you are ready for the changes to be visible on the website, click Publish.

NOTES:

Some sections are available only on specific pages. The sections displayed in the Section Library depend on the page you are editing.

Return to Top

How to Move a Section

1. Navigate to the Pages Application.
2. Find and select any page from the tree where the Page Builder tool is enabled (e.g., About, Menus or Privacy Policy).
3. Click on the Page tab or make sure it is selected.
4. Scroll and find the section to be moved.
5. Hover over the section, click on the Move (⣿) icon and drag and drop the section in the place of your preference.
6. Click the Save button.
7. Once you are ready for the changes to be visible on the website, click Publish.

Return to Top

How to Change a Section Type

1. Navigate to the Pages Application.
2. Find and select any page from the tree where the Page Builder tool is enabled (e.g., About, Menus or Privacy Policy).
3. Click on the Page tab or make sure it is selected.
4. Scroll and find the section to be changed.
5. Hover over the section, and click on Change Section Type (the square icon) that displays in the gray toolbar on the right side of the section.
6. In the Change Section Type window that pops up, click on the section of your preference (e.g., Default Component Section) and the section will change.
7. Click the Save button.
8. Once you are ready for the changes to be visible on the website, click Publish.

Return to Top

How to Configure Section Properties

1. Navigate to the Pages Application.
2. Find and select any page from the tree where the Page Builder tool is enabled (e.g., About, Menus or Privacy Policy).
3. Click on the Page tab or make sure it is selected.
4. Scroll and find the section to be configured.
5. Hover over the section and click on Configure Section (the gear icon) that displays in the gray toolbar on the right side of the section.
6. Update the desired fields.
7. Click the Apply button.
8. Click the Save button.
9. Once you are ready for the changes to be visible on the website, click Publish.

Return to Top

How to Delete a Section

1. Navigate to the Pages Application.
2. Find and select any page from the tree where the Page Builder tool is enabled (e.g., About, Menus or Privacy Policy).
3. Click on the Page tab or make sure it is selected.
4. Scroll and find the section to be deleted.
5. Hover over the section and click the trash bin icon that displays in the gray toolbar on the right side of the section.
6. Click OK to confirm deletion.
7. Click the Save button.
8. Once you are ready for the changes to be visible on the website, click Publish.

Return to Top

Widgets Overview

After adding one or more sections to your page, you can add widgets to those sections. For more information about sections, refer to the Page Builder Sections section.

Widgets are reusable components that provide specific functionality and content for your pages.

This section of the manual explains each widget and how it can be configured and used to build the desired page layout and functionality.

Rise created a library of widgets for you to use:

• Rich Text Component Widget
• Feature Info With Icon Widget
• Sticky Note Cards Component Widget
• Menu Info Component Widget
• Info Component With CTA Widget
• Menu Split Card Widget
• Menu List Component Widget
• Menu Card Component Widget
• Spotlight Testimonials Widget
• Testimonial Component Widget
• Category Card Component Widget

NOTES:

Some Widgets are available only in specific Sections. The Widgets displayed in the Widget Library depend on the page and Section you are editing.

Return to Top

How to Add a Widget to a Section

1. Navigate to the Pages Application.
2. Find and select any page from the tree where the Page Builder tool is enabled (e.g., About, Menus, Breakfast Menus, Lunch Menus, Resources, Privacy Policy, or Terms of Use).
3. Click on the Page tab or make sure it is selected.
4. Click on the translucent gray + icon on the left side of the page.
5. In the Section Library window that pops up, click on the section of your preference to add it to the page (e.g., Default Component Section).
6. Click on the + icon at the center of the section.
7. In the Widget Library window that pops up, click on the widget of your preference (e.g., Rich Text Component Widget).
8. Click the Save button.
9. Once you are ready for the changes to be visible on the website, click Publish.

Return to Top

How to Configure Rich Text Component Widget

Available In: Default Component Section

1. Add the widget to the page.
2. Click on Configure Widget (the gear icon) to configure the widget properties.
3. Configure the widget fields. A description of each field is listed below.
4. Click Apply.
5. Click the Save button.
6. To Preview your changes before submitting, click the triangle in Preview and select Open in New Tab (optional).
7. Once you are ready for the changes to be visible on the website, click Publish.

Rich Text Component Widget has the following properties:

• Id/Anchor: Use this field to create a section ID. This can be used to create anchor links across the website.
• Content: Use this field to add and format content such as text, headings, lists, images, tables, hyperlinks, and other supported rich text elements.
• Override Padding Top (Desktop): Use this field to choose the top padding for the widget.
• Override Padding Bottom (Desktop): Use this field to choose the bottom padding for the widget.

NOTE:

The Rich Text Component Widget is typically used for text-heavy content such as articles, detailed descriptions, legal pages, or structured information. It is best suited when you need the flexibility to include formatted text, headings, lists, hyperlinks, images, and tables in one place.

Return to Top

How to Configure Feature Info With Icon Widget

Available In: Default Component Section

1. Add the widget to the page.
2. Click on Configure Widget (the gear icon) to configure the widget properties.
3. Configure the widget fields. A description of each field is listed below.
4. Click Apply.
5. Click the Save button.
6. To Preview your changes before submitting, click the triangle in Preview and select Open in New Tab (optional).
7. Once you are ready for the changes to be visible on the website, click Publish.

Feature Info With Icon Widget has the following properties:

• Id/Anchor: Use this field to create a section ID. This could be used to set anchor links across the website.
• Headline: Use this field to set the main heading displayed in the widget.
• Content: Use this field to set the descriptive content displayed below the headline.
• Guideline Link Text: Use this field to set the display text for the Guidelines link.
• Guideline Link: Use this field to set the URL for the Guidelines link.
• Nutrition Standards Link Text: Use this field to set the display text for the Nutrition Standards link.
• Nutrition Standards Link: Use this field to set the URL for the Nutrition Standards link.
• IconOne: Use this field to select the first icon displayed in the widget.
• IconTwo: Use this field to select the second icon displayed in the widget.
• IconThree: Use this field to select the third icon displayed in the widget.
• IconFour: Use this field to select the fourth icon displayed in the widget.
• IconFive: Use this field to select the fifth icon displayed in the widget.
• Override Padding Top (Desktop): Use this field to choose the top padding for the widget.
• Override Padding Bottom (Desktop): Use this field to choose the bottom padding for the widget.

NOTE:

The Feature Info With Icon Widget is used to display a group of feature icons with a headline, supporting content, and optional resource links. This widget is ideal for highlighting key information or directing users to important resources.

Return to Top

How to Configure Sticky Note Cards Component Widget

Available In: Default Component Section

1. Add the widget to the page.
2. Click on Configure Widget (the gear icon) to configure the widget properties.
3. Configure the widget fields. A description of each field is listed below.
4. Click Apply.
5. Click the Save button.
6. To Preview your changes before submitting, click the triangle in Preview and select Open in New Tab (optional).
7. Once you are ready for the changes to be visible on the website, click Publish.

Sticky Note Cards Component Widget has the following properties:

• Id/Anchor: Use this field to create a section ID. This can be used to create anchor links across the website.
• Headline: Use this field to set the headline displayed above the cards.
• CardOneContent: Use this field to set the text displayed on the first card.
• CardOneImage: Use this field to select the image displayed on the first card.
• CardTwoContent: Use this field to set the text displayed on the second card.
• CardTwoImage: Use this field to select the image displayed on the second card.
• CardThreeContent: Use this field to set the text displayed on the third card.
• CardThreeImage: Use this field to select the image displayed on the third card.
• Content: Use this field to set the supporting content displayed below the cards.
• Override Padding Top (Desktop): Use this field to choose the top padding for the widget.
• Override Padding Bottom (Desktop): Use this field to choose the bottom padding for the widget.

NOTE:

The Sticky Note Cards Component Widget is used to display three image-based cards with short supporting messages and additional content beneath the cards.

Return to Top

How to Configure Info Component with CTA Widget

Available In: Menu Page Component Section

1. Add the widget to the page.
2. Click on Configure Widget (the gear icon) to configure the widget properties.
3. Configure the widget fields. A description of each field is listed below.
4. Click Apply.
5. Click the Save button.
6. To Preview your changes before submitting, click the triangle in Preview and select Open in New Tab (optional).
7. Once you are ready for the changes to be visible on the website, click Publish.

Info Component with CTA Widget has the following properties:

• Id/Anchor: Use this field to create a section ID. This can be used to create anchor links across the website.
• Headline: Use this field to set the main heading displayed in the widget.
• Description: Use this field to set the supporting description displayed below the headline.
• Button Text: Use this field to set the text displayed on the call-to-action button.
• Button Link: Use this field to select the page that the call-to-action button links to.
• Override Padding Top (Desktop): Use this field to choose the top padding for the widget.
• Override Padding Bottom (Desktop): Use this field to choose the bottom padding for the widget.

NOTE:

The Info Component with CTA Widget is used to display a headline, supporting description, and a call-to-action button that directs users to another page or resource.

Return to Top

How to Configure Menu Split Card Widget

Available In: Menu Page Component Section

1. Add the widget to the page.
2. Click on Configure Widget (the gear icon) to configure the widget properties.
3. Configure the widget fields. A description of each field is listed below.
4. Click Apply.
5. Click the Save button.
6. To Preview your changes before submitting, click the triangle in Preview and select Open in New Tab (optional).
7. Once you are ready for the changes to be visible on the website, click Publish.

Menu Split Card Widget has the following properties:

• Id/Anchor: Use this field to create a section ID. This can be used to create anchor links across the website.
• Headline: Use this field to set the main heading displayed on the widget.
• Description: Use this field to set the supporting description displayed below the headline.
• Image: Use this field to select the image displayed on the widget.
• Link (Page Selector): Use this field to select the page the widget links to.
• Image Position: Use this field to choose whether the image is displayed on the left or right side of the widget.
• Override Padding Top (Desktop): Use this field to choose the top padding for the widget.
• Override Padding Bottom (Desktop): Use this field to choose the bottom padding for the widget.

NOTE:

The Menu Split Card Widget is used to display a featured menu with an image, headline, supporting description, and a link to another page. The Image Position field controls whether the image appears on the left or right side of the widget.

Return to Top

How to Configure Menu List Component Widget

Available In: Menu Page Component Section

1. Add the widget to the page.
2. Click on Configure Widget (the gear icon) to configure the widget properties.
3. Configure the widget fields. A description of each field is listed below.
4. Click Apply.
5. Click the Save button.
6. To Preview your changes before submitting, click the triangle in Preview and select Open in New Tab (optional).
7. Once you are ready for the changes to be visible on the website, click Publish.

Menu List Component Widget has the following properties:

• Id/Anchor: Use this field to create a section ID. This can be used to create anchor links across the website.
• Headline: Use this field to set the heading displayed above the list.
• Content: Use this field to add and format the list content displayed in the widget.
• Override Padding Top (Desktop): Use this field to choose the top padding for the widget.
• Override Padding Bottom (Desktop): Use this field to choose the bottom padding for the widget.

NOTE:

The Menu List Component Widget is used to display a formatted list of tips, recommendations, or other supporting information. The content can be formatted using the Rich Text Editor to include numbered lists, bullet lists, hyperlinks, and other supported rich text elements.

Return to Top

How to Configure Menu Card Component Widget

Available In: Menu Page Menu Cards Section

1. Add the widget to the page.
2. Click on Configure Widget (the gear icon) to configure the widget properties.
3. Configure the widget fields. A description of each field is listed below.
4. Click Apply.
5. Click the Save button.
6. To Preview your changes before submitting, click the triangle in Preview and select Open in New Tab (optional).
7. Once you are ready for the changes to be visible on the website, click Publish.

Menu Card Component Widget has the following properties:

• Id/Anchor: Use this field to create a section ID. This could be used to set anchor links across the website.
• Headline: Use this field to set the title displayed on the menu card.
• Description: Use this field to set the supporting description displayed on the menu card.
• Icon: Use this field to select the icon displayed on the menu card.
• Downloadable Content: Use this field to select the downloadable file associated with the menu card.
• Menu Type: Use this field to select the menu type associated with the card.
• Override Padding Top (Desktop): Use this field to choose the top padding for the widget.
• Override Padding Bottom (Desktop): Use this field to choose the bottom padding for the widget.

NOTE:

The Menu Card Component Widget is used to display a menu card with an icon, headline, description, and downloadable menu resource. The Menu Type field determines the menu category associated with the card.

Return to Top

How to Configure Spotlight Testimonials Widget

Available In: Spotlight Component Section

1. Add the widget to the page.
2. Click on Configure Widget (the gear icon) to configure the widget properties.
3. Configure the widget fields. A description of each field is listed below.
4. Click Apply.
5. Click the Save button.
6. To Preview your changes before submitting, click the triangle in Preview and select Open in New Tab (optional).
7. Once you are ready for the changes to be visible on the website, click Publish.

Spotlight Component Section has the following properties:

• Id/Anchor: Use this field to create a section ID. This could be used to set anchor links across the website.
• Headline: Use this field to set the headline displayed above the testimonials.
• Description: Use this field to set the supporting description displayed below the headline.
• Override Padding Top (Desktop): Use this field to choose the padding top for the section.
• Override Padding Bottom (Desktop): Use this field to choose the padding bottom for the section.

Spotlight Testimonials Widget has the following properties:

• Id/Anchor: Use this field to create a section ID. This could be used to set anchor links across the website.
• Name: Use this field to set the name displayed for the testimonial.
• Role: Use this field to set the role or title displayed for the testimonial.
• Location: Use this field to set the location displayed for the testimonial.
• DescriptionText: Use this field to set the testimonial content.
• Image: Use this field to select the image displayed with the testimonial.
• Override Padding Top (Desktop): Use this field to choose the padding top for the widget.
• Override Padding Bottom (Desktop): Use this field to choose the padding bottom for the widget.

NOTE:

The Spotlight Component Section controls the headline, description, and spacing for the spotlight area. Each Spotlight Testimonials Widget displays an individual testimonial with a name, role, location, testimonial content, and image. Multiple Spotlight Testimonials Widgets can be added within the same Spotlight Component Section.

Return to Top

How to Configure Testimonial Component Widget

Available In: Testimonial Component Section

1. Add the widget to the page.
2. Click on Configure Widget (the gear icon) to configure the widget properties.
3. Configure the widget fields. A description of each field is listed below.
4. Click Apply.
5. Click the Save button.
6. To Preview your changes before submitting, click the triangle in Preview and select Open in New Tab (optional).
7. Once you are ready for the changes to be visible on the website, click Publish.

Testimonial Component Section has the following properties:

• Id/Anchor: Use this field to create a section ID. This can be used to create anchor links across the website.
• Headline: Use this field to set the headline displayed above the testimonials.
• Override Padding Top (Desktop): Use this field to choose the top padding for the section.
• Override Padding Bottom (Desktop): Use this field to choose the bottom padding for the section.

Testimonial Component Widget has the following properties:

• Id/Anchor: Use this field to create a section ID. This can be used to create anchor links across the website.
• Quote: Use this field to set the testimonial quote displayed in the widget.
• Attribution: Use this field to set the attribution displayed below the quote.
• Override Padding Top (Desktop): Use this field to choose the top padding for the widget.
• Override Padding Bottom (Desktop): Use this field to choose the bottom padding for the widget.

NOTE:

The Testimonial Component Section controls the heading and spacing for the testimonial area. Each Testimonial Component Widget displays an individual testimonial consisting of a quote and attribution. Multiple Testimonial Component Widgets can be added within the same Testimonial Component Section.

Return to Top