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.
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.
There are three layout types.
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.
Each layout type supports different alignment options.
In a horizontal layout, content can be aligned:
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:
In Vertical Layouts, content can be aligned:
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.
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.
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.
Powered by WHMCompleteSolution