Custom layout widgets
Sitefinity comes with 10 built-in layout widgets that you can use to create more complex layout for your pages or layout templates. You can also create your own layout widgets and use them from the toolbox of the page editor.
Create an .ascx file that describes the HTML
To create a layout widget you need to create a simple .ascx with standard HTML markup. The file can be placed anywhere in your project. We recommend to place the file in your website templates folder. Following is a sample code for the file:
File:~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/CustomLayouts/Custom1.ascx
<%@ Control Language="C#" %>
<div runat="server" class="sf_cols">
<div runat="server" class="sf_colsOut sf_1col_1_100">
<div runat="server" class="sf_colsIn sf_1col_1in_100 myCustomCSSClass">
</div>
</div>
</div>
Register the custom layout widget in the toolbox
To register a custom layout widget (.ascx), perform the following:
-
In the main menu, click Administration » Settings.
The Basic settings page appears. -
Click Advanced.
-
Expand Toolboxes » Toolboxes » PageLayouts » Sections » TwoColumns » Tools.
-
Click Create new.
-
Fill the form in the following way:
- In ControlType enter Telerik.Sitefinity.Web.UI.LayoutControl
- In the Name and Title fields enter the programmatic name and the display title.
- In LayoutTemplate filed enter the path to your custom template.
For example ~/CustomLayouts/treecolumns.ascx.
-
Click Save changes.