Try it Free for 30-Days
Download this help site
(PDF 51MB)
Download

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.

Icon

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.

Icon

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

Layout settings

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).

Icon

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.

Setting

Description

Margins

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

Background color

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.

Background image

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.

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.

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

Icon

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

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

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.

Icon

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.
  • No labels
Membership Software - Wild Apricot For sales and support questions, call us!
1-877-493-6090 or schedule a callback
Not a big talker?
email support@wildapricot.com
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7