Topics

All topics

Site components

Guidelines for layout widgets
WebForms

For guidelines of how to create your custom layout widget, you can use the standard Sitefinity CMS layout widgets:

  • 1 column layout widget 1x100%
    <div runat="server" class="sf_cols customClass">
    <div runat="server" class="sf_colsOut sf_1col_1_100 CustomClass">
    <div runat="server" class="sf_colsIn sf_1col_1in_100">
    </div>
    </div>
    </div>
    view raw 1ColumnLayoutWidget1_100.html hosted with ❤ by GitHub
  • 2 columns layout widget 25% + 75%
    <div runat="server" class="sf_cols customClass">
    <div runat="server" class="sf_colsOut sf_2cols_1_25 CustomClass">
    <div runat="server" class="sf_colsIn sf_2col_1in_25">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_2cols_2_75 CustomClass">
    <div runat="server" class="sf_colsIn sf_2col_2in_75">
    </div>
    </div>
    </div>
    view raw 2ColumnsLayoutWidget25_75.html hosted with ❤ by GitHub
  • 2 columns layout widget 33% + 67%
    <div runat="server" class="sf_cols customClass">
    <div runat="server" class="sf_colsOut sf_2cols_1_33 CustomClass">
    <div runat="server" class="sf_colsIn sf_2col_1in_33">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_2cols_2_67 CustomClass">
    <div runat="server" class="sf_colsIn sf_2col_2in_67">
    </div>
    </div>
    </div>
    view raw 2ColumnsLayoutWidget33_67.html hosted with ❤ by GitHub
  • 2 columns layout widget 2 x 50%
    <div runat="server" class="sf_cols customClass">
    <div runat="server" class="sf_colsOut sf_2cols_1_50 CustomClass">
    <div runat="server" class="sf_colsIn sf_2col_1in_50">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_2cols_2_50 CustomClass">
    <div runat="server" class="sf_colsIn sf_2col_2in_50">
    </div>
    </div>
    </div>
    view raw 2ColumnsLayoutWidget50_50.html hosted with ❤ by GitHub
  • 2 columns layout widget 67% + 33%
    <div runat="server" class="sf_cols customClass">
    <div runat="server" class="sf_colsOut sf_2cols_1_67 CustomClass">
    <div runat="server" class="sf_colsIn sf_2col_1in_67">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_2cols_2_33 CustomClass">
    <div runat="server" class="sf_colsIn sf_2col_2in_33">
    </div>
    </div>
    </div>
    view raw 2ColumnsLayoutWidget67_33.html hosted with ❤ by GitHub
  • 2 columns layout widget 75% + 25%
    <div runat="server" class="sf_cols customClass">
    <div runat="server" class="sf_colsOut sf_2cols_1_75 CustomClass">
    <div runat="server" class="sf_colsIn sf_2col_1in_75">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_2cols_2_25 CustomClass">
    <div runat="server" class="sf_colsIn sf_2col_2in_25">
    </div>
    </div>
    </div>
    view raw 2ColumnsLayoutWidget75_25.html hosted with ❤ by GitHub
  • 3 columns layout widget 33% + 34% + 33%
    <div runat="server" class="sf_cols customClass">
    <div runat="server" class="sf_colsOut sf_3cols_1_33 CustomClass">
    <div runat="server" class="sf_colsIn sf_3col_1in_33">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_3cols_2_34 CustomClass">
    <div runat="server" class="sf_colsIn sf_3col_2in_34">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_3cols_3_33 CustomClass">
    <div runat="server" class="sf_colsIn sf_3col_3in_33">
    </div>
    </div>
    </div>
    view raw 3ColumnsLayoutWidget33_34_33.html hosted with ❤ by GitHub
  • 3 columns layout widget 25% + 50% + 25%
    <div runat="server" class="sf_cols customClass">
    <div runat="server" class="sf_colsOut sf_3cols_1_25 CustomClass">
    <div runat="server" class="sf_colsIn sf_3col_1in_25">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_3cols_2_50 CustomClass">
    <div runat="server" class="sf_colsIn sf_3col_2in_50">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_3cols_3_25 CustomClass">
    <div runat="server" class="sf_colsIn sf_3col_3in_25">
    </div>
    </div>
    </div>
    view raw 3ColumnsLayoutWidget25_50_25.html hosted with ❤ by GitHub
  • 4 columns layout widget 4 x 25%
    <div runat="server" class="sf_cols customClass">
    <div runat="server" class="sf_colsOut sf_4cols_1_25 CustomClass">
    <div runat="server" class="sf_colsIn sf_4col_1in_25">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_4cols_2_25 CustomClass">
    <div runat="server" class="sf_colsIn sf_4col_2in_25">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_4cols_3_25 CustomClass">
    <div runat="server" class="sf_colsIn sf_4col_3in_25">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_4cols_4_25 CustomClass">
    <div runat="server" class="sf_colsIn sf_4col_4in_25">
    </div>
    </div>
    </div>
    view raw 4ColumnsLayoutWidget4_25.html hosted with ❤ by GitHub
  • 5 columns layout widget 5 x 20%
    <div runat="server" class="sf_cols customClass">
    <div runat="server" class="sf_colsOut sf_5cols_1_20 CustomClass">
    <div runat="server" class="sf_colsIn sf_5col_1in_20">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_5cols_2_20 CustomClass">
    <div runat="server" class="sf_colsIn sf_5col_2in_20">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_5cols_3_20 CustomClass">
    <div runat="server" class="sf_colsIn sf_5col_3in_20">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_5cols_4_20 CustomClass">
    <div runat="server" class="sf_colsIn sf_5col_4in_20">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_5cols_5_20 CustomClass">
    <div runat="server" class="sf_colsIn sf_5col_5in_20">
    </div>
    </div>
    </div>
    view raw 5ColumnsLayoutWidget5_20.html hosted with ❤ by GitHub
  • 2 rows layout widget 2 x 100%
    <div runat="server" class="sf_cols customClass">
    <div runat="server" class="sf_colsOut sf_1cols_1_100 CustomClass">
    <div runat="server" class="sf_colsIn sf_1col_1in_100">
    </div>
    </div>
    <div runat="server" class="sf_colsOut sf_1cols_1_100 CustomClass">
    <div runat="server" class="sf_colsIn sf_1col_1in_100">
    </div>
    </div>
    </div>
    view raw 2RowLayoutWidget2_100.html hosted with ❤ by GitHub

Meaning of class names

Want to learn more?

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?