Laying out content in ProSite

A fundamental part of creating a site in ProSite involves understanding how to use Layouts.

In this tutorial we’ll explore what layouts are, and the different layout options.

What is a layout?

A layout is a block which can contain multiple elements, such as text, images or other elements that are available to create your website. A layout can also contain other layouts, allowing you to create a nested structure to your page.

We’ll delve into why this is useful later on in this tutorial.

Layout Types

There are three layout types.

• Horizontal layouts - which aligns child elements horizontally.
• Vertical layouts - which aligns child elements vertically.
• Floating block layouts - which allows you to position elements anywhere within the layout using drag and drop.

The layout type can be set by selecting the layout, and then choosing either Horizontal, Vertical or Floating Block from the right side menu.

The content will re-arrange either vertically or horizontally.

With Floating Block selected, you’ll be able to drag child elements anywhere within the layout canvas.

Layout Alignment

Each layout type supports different alignment options.

Horizontal Layouts

In a horizontal layout, content can be aligned:

• To the left
• To the centre
• To the right
• Space between - this pushes elements out to the edges of the canvas, similar to justification in Word
• Space around - this places space all around elements, evenly distributing them

The latter two are usually only useful where you have multiple items inside your layout.

In addition, horizontal layouts also allow you to set the vertical alignment of the elements contained within.

Content can be aligned:

• To the top
• To the middle
• To the bottom
• Stretched - content stretches up and down to fill the boundaries of the containing layer, extending as far as the padding of the layout. This only applies to elements that do not have a specified width, such as text or button elements.

Vertical Layouts

In Vertical Layouts, content can be aligned:

• To the left
• To the middle
• To the right
• Stretched - content stretches left and right to fill the boundaries of the containing layer, extending as far as the padding of the layout. This only applies to elements that do not have a specified width, such as text or button elements.

A vertical layout cannot be aligned vertically. If you need to align elements to the top, middle or bottom of an element, you should use a horizontal layout, or, nest a vertical layout within a horizontal layout.

The above image shows exactly that - the About Us section is a vertical layout (it’s contents align vertically) but it is contained within a horizontal layout, which is middle aligned. This means that the vertical layout is middle aligned to the image in the right hand column.

Wrapping Layout Contents

A Horizontal Layout’s elements can wrap by selecting “Allow items to wrap”.

With this turned off, elements will not wrap and may exceed the size of the layout. They will appear off canvas. Turn this on, and the elements contained within the layout will wrap to a new line, once there is no longer enough space for them to all fit in a single horizontal row.

Using wrapping can be an effective way to design content that flows properly across different devices. On wider screens, more content can be visible in a single row.

On narrower screens, such as a tablet, fewer items may fit and you will end up with more rows.

Switch to Vertical on Smaller Devices

On very narrow devices such as a mobile phone, you may want content that was displayed horizontally to instead display vertically. You can specify that a Horizontal layout switches to become a vertical layout on those smaller devices. You can specify the device where this starts to happen.