Search
Search
Search

Recipe Collection Page

Table of Contents:

  1. Page Builder Overview
  2. Page Builder Widgets
    1. Widgets Overview
    2. How to Add a Widget to a Section
    3. How to Configure the Hero Widget
    4. How to Configure the Recipe Popular Categories Widget
    5. How to Configure the Recipe Trending Carousel Widget
    6. How to Configure the Recipe Video Vertical Carousel Widget
    7. How to Configure the Recipe Squared Card Carousel Widget
    8. How to Configure the Image Recipe Collections Carousel Widget
    9. How to Configure the Recipe See More 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 Page Types have the Page Builder tool enabled:

  • DMI General Content Page
  • Content Detail
  • People Listing
  • Contact Us

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 new 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 on about Page Builder from Kentico, visit the official Kentico documentation. 

Return to TOP

Page Builder Widgets

After you add a section to your page, you need to add the widget(s) you want to use to the section. A widget is a component that has specific functionalities. 

Recipe Collection Widgets Overview

Widgets are different components that have specific functionalities. 

This section of the manual will explain Recipe Collection widgets

Recipe Collection Dedicated Widgets are:

  • Recipe Hero
  • Recipe Popular Categories
  • Recipe Treding Carousel
  • Recipe Video Vertical Carousel 
  • Recipe Squared Card Carousel 
  • Recipe Collection Carousel
  • Recipe See More

Return to TOP

How to Add a Widget to a Section

  1. Navigate to the Page Tab
  2. Find and select any page from the tree where the Page Builder tool is enabled (e.g DMI General Content Page)
  3. Click on 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. Standard 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 Recipe Hero)
  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 the hero Widget

  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

The hero widget has the following properties:

  • Title: use this field to set the title of the widget
  • Description: use this field to set the description text of the widget.
  • Image 1: use this field to set a custom image on the top right of the Hero (this one is able only on desktop view)
  • Image 2: use this field to set a custom image on the bottom left of the Hero (this one is able only on both devices view)
  • It's crucial to use PNG images with a transparent background or the desing will look broken

Return to TOP

This Widget will set a list of CTA buttons

  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

The Recipe Popular Categories widget has the following properties:

  • Headline: use this field to set the title of the widget
  • Description: use this field to set the description text of the widget.
  • Category Name #: use this field to set the CTA title
  • Category URL #: use this field to set the CTA url
  • Category Icon #: use this field to set an icon to the left of the CTA title
  • You're able to set up to 8 CTA's and the horizontal scroll bar will appears depeding of the CTA length

Return to TOP

This Widget will set a list of three Recipe Cards

  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

The Recipe Popular Categories widget has the following properties:

  • Headline: use this field to set the title of the widget
  • Headline URL Link: use this field to set a url to make the Headline a hyperlink
  • Description: use this field to set the description text of the widget.
  • Trending Recipe # (Override): use this field to set a selected recipe from the page
  • The widget by itslef will populate the 3 cards with the most recent published updates. The (Override) selection it's to make this process manual and force the desired recipes to appear

Return to TOP

How to Configure the Recipe Video Vertical Carousel Widget

This Widget will set a list of youtube vertical Video Cards 

  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

The Recipe Video Vertical Carousel widget has the following properties:

  • Headline: use this field to set the title of the widget
  • Headline URL Link: use this field to set a url to make the Headline a hyperlink
  • Description: use this field to set the description text of the widget.
  • Video # URL: use this field to set the CTA title
  • You're able to set up to 8 Videos and the horizontal scroll bar will appears on the fifth card or depeding of the device screen size
  • This isn't an auto-populate widget so it's neccesary to fill the video URL to displays the cards

Return to TOP

How to Configure the Recipe Squared Card Carousel Widget

This Widget will set a list of Big squared recipe Cards

  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

The Recipe Popular Categories widget has the following properties:

  • Headline: use this field to set the title of the widget
  • Description: use this field to set the description text of the widget.
  • Recipe #: use this field to set a recipe
  • You're able to set up to 5 Cards and the horizontal scroll bar will appears after the third card

Return to TOP

How to Configure the Recipe Collections Carousel Widget

This Widget will set a list of Recipe Cards

  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

The Recipe Popular Categories widget has the following properties:

  • Headline: use this field to set the title of the widget
  • Headline URL Link: use this field to set a url to make the Headline a hyperlink
  • Description: use this field to set the description text of the widget.
  • Recipe #: use this field to set a recipe
  • You're able to set up to 8 CTA's and the horizontal scroll bar will appears after the fifth card or depeding of the device screen size

Return to TOP

How to Configure the Recipe See More Widget

This widget added by default will have all the fields filled

  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

The Recipe Popular Categories widget has the following properties:

  • Headline: use this field to set the title of the widget
  • CTA Label: use this field to set the CTA title
  • CTA Url: use this field to set the CTA url

Return to TOP