Page layouts

You can use layouts to divide a page or page template into sections and subsections. Layouts allow you to create complex site pages consisting of multiple rows and columns.

Layouts divide content areas into cells where you drag and drop gadgets.

You can add layouts to a page template so that the layout is inherited by all pages that use that template. For example, you could add a 2-column layout to a template so that any pages based on it are automatically divided into 2 columns.

Though the overall layout of a page is inherited from its page template – along with any content appearing on the template – you can further refine the page layout by adding layouts before or after the layouts inherited from the page template.

You don't have to add layouts to a page or page template. You can simply insert gadgets into the placeholders inherited by the page from the page template, or by the page template from the master layout.

For each layout cell, you can control various settings, including margins and background color or image.

Available layouts

The following layouts are available:

• One column
• Two columns
• Three columns
• Four columns
• Custom

Using a custom layout, you can use HTML code to create complex page layouts. For more information, see Defining a custom layout (below).

Adding a layout

You can add any number of layouts to a page or page template.

To insert a layout while editing a site page or a page template, you drag and drop the layout from the layout list to the desired location.

Within a page template, you can insert one or more layouts into a placeholder, but not before or after one.

When a placeholder is empty, a Drop gadget or layout here prompt will be displayed. When you drag a layout over an empty placeholder, the placeholder turns green, indicating that you can drop the layout into the placeholder. Other possible destinations for the layout will appear in blue.

Within a page, you can insert layouts before or after layouts inherited from the page template...

...or directly into a placeholder if no layouts were added to the placeholder in the page template.

When you drag a layout above or below an existing layout, a prompt will appear indicating where you can drop the layout, either after or before the existing layout.

You cannot subdivide a layout by adding another layout to it.

Layout settings

For each layout column, you can control various settings, including margins and background color or image. Layout settings appear in a panel on the left side (which can be hidden to maximize the page design area).

Layouts can be further customized using theme overrides and CSS customization.

To display the settings panel, you position your pointer over the layout – while editing a site page or a page template – then click the settings icon.

If the layout already contains a gadget, make sure you click the settings icon for the layout rather than the gadget.

Hiding the settings panel

To hide the settings panel, click the left chevron at the top of the panel.

To show the hidden panel, click the right chevron.

Common layout settings

The layout settings that are available depend on the layout type, but a number of settings are available for all layouts. These settings are described below.

Margins
Controls how much empty space – in pixels – appears outside the layout.

Background color
The background color of the layout. You can set the background separately for each column in the layout. To set the background color, you can click a color or enter the hex code for the color. The colors used in the current website theme are displayed at the top of the color window. To make the background transparent, so that the page background shows through, click the Set to transparent button. Whether the background color shows through or not may depend on the style settings of the gadgets that appear in the layout. If you set both a background color and background image for a layout, only the background image will be displayed.

Background image
The background image that appears in the layout. Setting a background image for a layout allows the gadgets that are added to the layout to appear superimposed on the graphic image. To select a background image, click the Select button then select an images from the image library or click Own resources to select an image from File management. After you have selected the background image, click Apply background. Whether the background image shows through or not may depend on the style settings of the gadgets that appear in the layout. After you have applied a background image, you can control the horizontal and vertical alignment, and choose how your image appears within the available space. You can choose from the following Behavior options:

• Tile – the image will be repeated horizontally and vertically to completely fill the available space.
• No repeat or scaling – the image will displayed as is, and will be not be repeated or scaled.
• Repeat horizontally – the image will be repeated horizontally to fill the width of the available space.
• Repeat vertically – the image will be repeated vertically to fill the height of the available space.
• Fill – the image will be stretched to completely fill the available space, and may therefore appear distorted.
• Cover – the image will be proportionally resized to cover the available space, and may therefore be cropped.
• Scale by height – the image will be proportionally resized to fit the height of the available space. Depending on the dimensions of the space, the image may be cropped, or may not fill the entire width of the space.
• Scale by width – the image will be proportionally resized to fit the width of the available space. Depending on the dimensions of the space, the image may be cropped, or may not fill the entire height of the space.

To remove the existing background image, click the Remove link.

Height
The height of the layout. You can allow the height to be set automatically based on the content added to the layout – by clicking the Auto option – or set the height yourself by clicking Fixed then entering the height in pixels. To adjust the height of the layout to the background image – if one has been selected – click the Adjust height to background image link, and the height of the layout will be automatically set to the height of the image. The width of a layout is normally determined by the placeholder in which it is placed, though you can use the Inline style setting (below) to set the layout width.

HTML ID
A unique identifier by which the layout can be referenced within custom CSS or JavaScript code. The identifier is automatically generated but can be replaced with a more readable or memorable one.

CSS class
The name of a CSS class defined on the CSS customization screen.

Inline style
CSS code to control the behavior or appearance of the layout. For example, you could enter width: 250px; to control the layout width.

Settings for multi-column layouts

For layouts with multiple columns, you can also control column spacing – the blank space (in pixels) between columns – and set the padding, background color, and background image for individual columns.

Column spacing is the space between multiple columns.

Column padding is the amount of blank space between the content of a particular column and the outer limits of the column.

If you set both column spacing and column padding, the values will combine to increase the internal column margin.

Adjusting column widths

For layouts with multiple columns – other than custom layouts – you adjust the column widths by positioning your pointer over a column divider then dragging to the left or right.

As you drag, percentages appear in the columns to indicate their relative sizes.

Once the columns are the desired widths, release your mouse button.

Defining a custom layout

Using a custom layout, you can combine HTML code with placeholder code to create sophisticated layouts. Placeholders define the areas within the custom layout where gadgets can be dropped.

For example, you can use the following to create a layout consisting of 2 columns followed by a single row.

<div>
<div style="display: table; width: 100%">
<div style="display: table-row;">
<div style="width: 50%; display:table-cell">
##placeholder##
</div>
<div style="width: 50%; display:table-cell;">
##placeholder##
</div>
</div>
</div>
##placeholder##

Within your HTML code, each ##placeholder## element marks the spot where a gadget can be dropped onto the layout.

To enter the code that defines a custom layout, you click the Edit HTML button within the custom layout's settings.

In the window that appears, you enter your code then click the Save button.

Your code cannot be empty, and must include at least one ##placeholder## element. If you do not include a ##placeholder## element, one will be automatically inserted into your code.

Within your code, a unique identifier will be appended to each ##placeholder## element after saving. A ##placeholder## element might end up appearing as ##placeholder:TV1pmdG##. This allows the system to uniquely identify and reference each individual placeholder.

Code restrictions

Do not include any of the following commands within your custom code.

• document.write()
• document.writeln()
• document.open()
• object.write()
• object.writeln()
• object.open()

where object is the name of a target object.

Sample custom layout code

The following are code samples showing how to achieve different kinds of layouts using custom layouts.

Two columns

<div>
<div style="display: table; width: 100%">
<div style="display: table-row;">
<div style="width: 50%; display:table-cell">
##placeholder##
</div>
<div style="width: 50%; display:table-cell;">
##placeholder##
</div>
</div>
</div>

You can adjust the column widths by adjusting the width parameter value (e.g. change the two 50% values to 75% and 25%).

Three columns with different widths

<div>
<div style="display: table; width: 100%">
<div style="display: table-row;">
<div style="width: 50%; display:table-cell">
##placeholder##
</div>
<div style="width: 25%; display:table-cell;">
##placeholder##
</div>
<div style="width: 25%; display:table-cell;">
##placeholder##
</div>
</div>
</div>

Two columns followed by one row

<div>
<div style="display: table; width: 100%">
<div style="display: table-row;">
<div style="width: 50%; display:table-cell">
##placeholder##
</div>
<div style="width: 50%; display:table-cell;">
##placeholder##
</div>
</div>
</div>
##placeholder##

Other <div> style parameters

Within each <div> tag, you can include other CSS properties than just width. For example, you include a background to adjust the background color of the layout cell, or the border-radius parameter to give it a rounded border.

For example, the following custom layout code...

<div>
<div style="display: table; width: 100%">
<div style="display: table-row;">
<div style="width: 50%; display:table-cell;background: #444441; border-radius: 50px;">
##placeholder##
</div>
<div style="width: 50%; display:table-cell;">
##placeholder##
</div>
</div>
</div>

...results in the layout appearing like this:

For more information on CSS properties, see the CSS properties guide.

Moving a layout

To move a layout to a different location, position your pointer over the layout – while editing a site page or a page template – then drag the move icon to the new location.

You can move the layout into another placeholder, or to a location above or below another layout.

Deleting a layout

You can delete a layout even if it contains gadgets. To delete a layout – while editing a site page or a page template – position your pointer over the gadget then click the Trash icon.

If the layout contains one or more gadgets, you will asked to confirm your intention to delete the layout.

Deleted layouts are not sent to the Trash and cannot be restored from the Trash.

What can't you do with a layout?

• You cannot add a layout to another layout.
• You cannot add a layout above or below a placeholder in a page template.