Content Editing with Kentico - Page Builder

Using the page builder

The page builder is a customizable drag and drop interface that will let you design the content of pages with the use of sections and widgets. 

To access the page builder:

• Go to the "Pages" application
  • (Second Level Test!)
• Make sure you are in "Edit" mode (selected in blue above the content tree)
• Select a page type from the content tree that has a "page" tab (for this site it will primarily be "Content Page" page types)

Section Types:

The "Page Builder" consists of a series of containers and blue or grey boxes with "+" icons in them. The grey + boxes on the left hand side of the viewport allow you to add sections. These sections are pre determined based on the design of the site and contain styling options.

Single column full width: used for full width widgets and sections

Single column narrow width: this is used for job posts

Single column with max width: used most frequently on the site

Two columns full width: not used but good to have. It will have two columns and stretch to the edge of the browser

Two Columns with max Width: two columns with space on the side

Properties of Section Types:

Properties can be adjusted for section types by hovering over the section type and clicking on the gear icon in the dark grey box for the section:

Each section type has a set of properties associated with it. These properties allow you to change the background colour of the section as well as add a title for the section and adjust the spacing properties of the section. You do not need to use these properties in order for the section to work but they are there if you need them. 

If you need to change a section you can also do this without losing your work by clicking on the "template" icon above the properties "gear" icon. 

Once you have set the section type then you can populate the section with widgets by clicking on the blue "+" in the section to get the widget menu. 

Some widgets will work better with certain section types. For the most part widgets will work in all section types, but in the case you want to change the way things look you can adjust the section type by hovering over it and you will notice a dark grey menu at the right hand side of the section. 

Widgets

Widgets are used to add page content. Some widgets reference "page types" in the content tree. These widgets will pull in this content so you wont have to edit them on the individual page. Other widgets are editable within the widget properties. To view the widget properties click on the gear icon on the right hand side when hovering over the widget. 

Note: if you click the "copy" icon next to the gear icon on the widget it will make a copy of the widget. When you go to the widget menu you will see it copied on the list. This is helpful if you like the styling and content of a widget or what to reuse the widget. 

Widgets used on the site:

Accordion - widget used on "Page" tab to connect to "Accordion tab" page types on the content tree

Board and Staff - used to display "staff" page types on the content tree

CTA Footer Image Text - edited in widget properties 

Event Gallery - displays "Event" page types from the content tree

Form - connects to the "Forms" application and displays available forms

Full Screen Image with Text Box - edited in widget properties

General Cards - connects to "General Card" page type on content tree

General Cards Icon - connects to "General Card Icon" page type on content tree

General text with Icon - edited in the widget properties

Home Page Cards - edited within the widget properties

Home Page Image Slider - connects to the "Hero Slide" page type in the content tree

Image Text CTA with Alternating Left/Right Image - edited within the widget properties

Jobs Postings - connects to "job listings" page types in the content tree

Logo Carousel - connects to "Supporter" page type in the content tree

News Listing - connects to "News" page type in the content tree

Programs Gallery - displays programs list from custom table (Salesforce)

Quick Links - edited within widget properties

Related Jobs - connects to "job listings" page types in the content tree

Resources Gallery - connects to "Resource" page type in the content tree

Rich Text - a text / html editor with ability to add images, link etc

Spacer - used to visually space out widgets (not required)

Stories Gallery - connects to the "Story" page type in the content tree

Supporters Listing - connects to "Supporter" page type in the content tree

Testimonial - edited within the widget properties

Testimonial Slider - connects to "Testimonial Slide" page type in the content tree

Time line - connects to "Time Line Item" page type in the content tree

This is a "Rich Text Widget"

This is the rich text widget. It is used throughout the site to add text. You can also add images and links with this widget. The styles that you can use are based on the site design. You can view them here

Home Page Cards Widget:

Does not need to be only used on the homepage

Image text CTA with Alternating left/right image widget:

Full Screen Image with Text Box widget:

Accordion Widget:

This widget allows you to reference the accordion page type. The accordion page type lets you add HTML to make embedding possible on forms

Quick Links widget:

This widget lets you set the amount of links, name the links as well as add the URL for each

Testimonial Widget:

This widget works best with the single column max width and an image that is above 700px wide. The type and image are edited in the widget properties.

Spacer widget:

adding extra bottom spacing will add 80px

Testimonial Slider Widget:

This widget references the testimonial page type. Find the path to where these page types are for it to display. Sequence of testimonials can be determined by their order in the content tree