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:

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.

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

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.