Topics Map > GBIT Service Desk Services

Kentico - Create a Layout with Sections and Widgets

This document details how to create a layout using sections and widgets in the Kentico application. Sections and widgets are the basic building blocks of your page layout. Each page will have two section types to begin with — an intro section and a default section. You can add as many additional default sections as you like. The sections themselves have properties where you can set spacing (called “padding”) and assign background color. Each of these sections has a selection of widgets that can be placed within the section that offer a variety of layout and styling options.

Work with Sections
Add a New Section
Modify a Section
Work with Widgets
Add Widgets
Modify a Widget
Copy Sections and Widgets
Move Sections and Widgets


Work with Sections

Sections are containers for widgets. Their background and padding properties allow you to adjust spacing and background color to visually separate areas of content on your page.

Screenshot of Work with Sections


Add a New Section

  • Starting from the Pages application, with the Page tab of the page you wish to edit open.
  • Select the gray plus sign button located on the bottom left side of an editable zone.
  • Select the Default from the Sections menu.
  • The new section will be inserted below the plus sign.

Modify a Section

With your mouse, hover over the section you want to edit, a vertical menu bar will appear on the right of the screen with icons that will allow you to do the following.

Action Instructions
Move Section Click the 8-dots icon to drag the entire section to another spot on the page.
Change Section Type Click the columns icon to open the Section Type menu and select a different section type. Any widgets that are restricted from the new section type will disappear.
Section Properties Click the gear icon to open the section properties. Edit the configuration options and select "apply."
Copy Section

Click the copy icon in the upper right corner of the section to copy a section with all widgets in the section.

  • You can paste the copied sections onto any page using the Add section button.
  • The copy feature allows you to store up to 10 sections for 12 hours.
Delete Section Click the trash can icon in the upper right corner of the section.

Work with Widgets

Screenshot of Work with Widgets


Add Widgets

  • Click the bluish-gray plus sign button located in the center of the section where you want to insert a widget.
  • A menu listing the available widgets will appear.
  • Click one of the widgets and it will be inserted into the section.

Modify a Widget

With your mouse, hover over the widget you want to edit, a horizontal menu bar will appear on the top border of the widget with icons that will allow you to do the following.

Action Instructions
Move a Widget Click the 8-dots icon on the top left of the widget to drag the widget to another spot on the page.
Widget Properties Click the gear icon to open the widget properties. Edit the configuration options and select "apply."
Copy Widget

Click the copy icon in the upper right menu bar of the widget to copy a section with all widgets in the section.

  • You can then paste the copied widgets on any page through the Add Widget button.
  • The copy feature allows you to store up to 10 widgets for 12 hours.
Delete Widget Click the trash can icon in the upper right corner of the widget.

Copy Sections and Widgets

A powerful feature in Kentico Xperience 13 is copying sections and widgets. This will copy all the contents and settings inside the copied widget or sections.

  • Click a widget or mouse-over a section that you want to copy.
  • Click the copy icon in the upper right corner of the navy blue widget bar or the gray section bar.
  • You can then paste the copied widgets or sections onto any page that uses the page builder through the Add widget or Add Section functionality.

This feature allows you to store up to 10 widgets for 12 hours. To remove a copied sections or widgets, open the add widget or add section menu mouse-over the copied widget or section and click the X that appears to the right of the element.


Move Sections and Widgets

You can also drag and drop widgets from one section to another or reorder the widgets within the section. To move a section or widget, all you need to do is click on a widget and drag it by its handle in the menu bar to a different position. This drag and drop functionality gets a little tricky when there is a lot of content in your section and widgets, so it’s a good idea to break content up between sections and widgets. If you do, you'll find your pages are easier to use.



Keywords:
kentico, widgets, application, layout
Doc ID:
133253
Owned by:
Josephine H. in UW Green Bay
Created:
2023-12-07
Updated:
2023-12-22
Sites:
UW Green Bay