• Sitefinity Tips

Use Sitefinity Layout Controls To Customize Pages


Did you know you can slice up your page layouts very easily using Layout Controls?

Your page content is not constrained to the content area defined by your page template.

With Sitefinity Layout Controls you can:
  • Add and customize columns in your content area
  • Assign your own css style names and modify the design
  • Adjust the flow of your content on mobile devices
To get started, edit a page and click the Layout button in the top right corner of the page.

Click the layout button to activate layout controls
You will then get a list of pink(ish) controls that can be dropped on a page just like your content widgets.

Customize Your Columns

Add more columns

By dragging a layout control onto your page you can split your content area in to multiple columns. Sitefinity layout control screenshot

Nested Controls

You can also nest your content controls by dropping one inside the other.

Layout controls can be nested

Customize the Style of Your Content

Click Edit to pull up the properties for your layout control.

The edit button on a layout control will allow the properties to be modified

Change Column Widths

The width of each column can be modified. Clicking "Spaces" will also give you options to adjust the padding between columns.

There is a field allowing you to change the width of each column

Add Custom CSS Styles

Clicking Classes & Labels allows you to add your own css class names that get inserted to the html that wraps each column. (Switch back to the list of content widgets and drag a style block onto your page to include your own css.)

css class names can be added to layout columns

Back to Top Arrow Up