Edit layout elements in hybrid and Web Forms templates

To edit a predefined layout element, click Edit at the upper-right corner of the element.
The Edit layout element box opens so that you can do the following layout edits:

Modify column width

In a layout element of a page, you can change the width of the element's columns either by direct action or entering preferred widths

  • To resize the width of a column by dragging its border, grab the line dividing the columns and drag it to the preferred width.
  • To enter preferred column widths:
    1. Click Sizes tab.
      In the Widths section, one or more input fields are available, corresponding to the number of columns in the layout (one to five.)
    2. In Show sizes in, choose the unit of measurement you want, percentages or pixels.
    3. In Column 1 input field, enter the preferred column width for that column. Enter all widths. The last one is calculated for you.

      You can change the auto-sized column by performing the following:

      1. Click Change auto-sized column.
      2. Click Make this auto-sized link of the column you want to be automatically calculated.
      3. Click Cancel changing auto-sized column.

    Modify spacing between columns

    1. To modify spaces between columns, click Spaces and choose the unit of measurement between percentages and pixels in Show spaces in radio button.
    2. You can specify the following types of spaces:
      • Space between columns
      • Space above and below columns
    3. Enter the spaces in the chosen unit of measurement
      The system applies equal spaces to all columns. You can adjust spaces between columns individually by clicking Individual spaces per column link.

      For each column you can specify individual spacing on the Top, Right, Bottom, and Left.

    Assigning classes to columns

    You can choose a new or change the class name for each column, if later you want to set a CSS style for this particular column.

    When you finish with editing sizes, spaces, and classes, click Done button.

    After you have created the layout, you can add content widgets to each box.
    For more information, see Widgets: Add content and functionality to pages.

You can apply custom labels to your layout elements. This way you can create a more explicit layout that is easier to understand. For example, you can label your header and footer or you can label an element to state which widget must be applied to it.

To add labels to a layout element:

  1. Click the Edit button of the element.
  2. In the right pane, click Classes & Labels.
  3. In the Labels section, enter descriptive text for each column in the layout element.
  4. Click Done.

Label a custom layout widget 

To apply a label to a custom layout widget, in the template, add a new attribute data-placeholder-label to the sf_ColsOut <div>.

EXAMPLE:

Set a label when using a master page

When using a master page with multiple asp:contentplaceholder, you can add a label in one of the following ways:

  • As an ID of the placeholder, using the following example:

    <asp:ContentPlaceHolder ID="header" runat="server"/>

    In this case, the label cannot contain spaces.

  • As an child literal of the content placeholder, using the following example:

    In this case, the label can have spaces.

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?