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.
For each layout cell, you can control various settings, including margins and background color or image.
The following layouts are available:
- One column
- Two columns
- Three columns
- Four columns
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.
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.
For each layout cell, 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).
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.
Controls how much empty space – in pixels – appears outside the layout.
The background color of 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.
The background image that appears in the layout. 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. Once you have applied a background image, you can control whether and how the image is repeated within the layout (tiled, repeated horizontally, repeated vertically, not repeated), and the position of the image within the layout (left, right, or centered). Whether the background image shows through or not may depend on the style settings of the gadgets that appear in the layout.
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.
The name of a CSS class defined on the CSS customization screen.
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.
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.
Do not include any of the following commands within your custom code.
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.
Three columns with different widths
Two columns followed by one row
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...
...results in the layout appearing like this:
For more information on CSS properties, see the CSS properties guide.
Moving a layout
You can move the layout into another placeholder, or to a location above or below another layout.
Deleting a layout
If the layout contains one or more gadgets, you will asked to confirm your intention to delete the layout.
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.