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:
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.
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?