Select a site

Label layout elements

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.

The following screenshot displays a layout where each layout element has a custom label applied to it:

To label a layout element, perform the following:

  1. Click the Edit button of the element.
  2. In the right pane, click Classes & Labels.
  3. In the Labels section, you can label each column from 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:

<div runat="server" class="sf_cols">
    <div runat="server" class="sf_colsOut sf_2cols_1_25" data-placeholder-label="Left Sidebar">
        <div runat="server" class="sf_colsIn sf_2cols_1in_25">
             
        </div>
    </div>
    <div runat="server" class="sf_colsOut sf_2cols_2_75" data-placeholder-label="Content">
        <div runat="server" class="sf_colsIn sf_2cols_2in_75">
         
        </div>
    </div>
</div>

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:

    <asp:ContentPlaceHolder ID="header" runat="server">
          <asp:Literal ID="childLiteral" runat="server" Text="can contain spaces" />
    </asp:ContentPlaceHolder>

    In this case, the label can have spaces.

Back To Top