agsdix-smt3-view-compact

Managing the Page Layout

Note: our websites are based on a custom version of the industry-standard WordPress system. If you’re not familiar with WordPress but need to have the content of your pages or blog posts updated frequently, we offer a convenient website updating service. Let us know if you’re interested!

Page Building Blocks

All the pages of the websites we create are structured using three  main building blocks: Sections, Rows and Modules.

These building blocks allow for an unlimited number of page layouts. Sections are the largest building blocks, and contain one or more rows. Rows sit inside of sections and are used to house modules. Modules are placed inside of rows.

A Typical Page

Let’s take for instance the page shown here, from a website we created. We will be using it to show you how easy it can be to move, configure and duplicate sections, rows and modules.

Sections

Sections are the biggest building block of our pages. You can think of them as horizontal stacking blocks that can group your content into visually distinguishable areas.

In the example below, two sections – one with a light beige background and the other with a white background – are shown:

Rows

Rows sit inside of sections; you can place any number of rows inside a section. Rows can have multiple columns, with any number of modules e.g. Text, Blurbs, Galleries, etc. placed inside them.

In the example below, two rows are shown:

Modules

Modules are the content elements that make up your website. Several types of modules available – Text, Image, Blurb, Blog, Image, Gallery and many others. The type of content and options available to each module vary. For instance, a Blurb module contains a title, image and body copy, whereas an Image module is comprised of just an image.

In the example below, each of the 2-column rows contains a Blurb module:

Moving, Configuring and Duplicating Sections, Rows and Modules

Each section, row and module can be customized in many ways, using the element’s control panel. To do so, hover over element and it will be surrounded by a coloured line – blue for sections, green for rows, grey for modules.

Click the element, and its control panel will appear:

Moving a Section, Row or Module

You can move a section up/down within the page, a row up/down within a section (or to another section altogether) or a module up/down within a column of a row (or a different row, column or section.)

With the element’s control panel visible, click the Move Section/Row/Module icon – the one with the arrows pointing in all directions – and drag it to the desired position. The example below shows the icon for a row:

Modifying the Settings of a Section, Row or Module

You can change the content and appearance of any section, row or module. The options available will vary. For instance, if you’re setting up the content settings for a Blog module you will be able to specify how many posts should be shown, whereas for a Blog module you will be able to choose how many post should be displayed, and so on.

With the element’s control panel visible, click the gear icon to access the Section/Row/Module Settings. The example below shows the settings icon of a Blurb module:

After clicking, the settings available for the Section/Row/Module will appear in a popup, with tabs for Content, Design and Advanced. Use the Advanced tab only if you’re familiar with CSS or JavaScript.

Notice how the options for a different type of module – in this case a Blog – will be different:

Duplicating a Section, Row or Module

You can clone/duplicate any section, row or module. To do so, click the element to bring up its control panel, then click the Duplicate Section/Row/Module icon.

Duplicating a Section:

Duplicating a Row:

Duplicating a Module:

After the element is duplicated, you can then move it to a different position if you want.

Pin It on Pinterest