Website pages are comprised of one or more sections that display across the width of a page. Each section can be split into one or more columns.
To change the amount of columns displayed in a section, click the Settings Cog icon in the top left hand corner of a section.
Under the Layout tab, select the display you would like for your section.
Save your section settings. Now you can add content widgets to each column.
By stacking sections and using different column layouts, you can design your page however you like - for example, a full-width image at the top, then a row of buttons below.
One issue is that content in side-by-side columns may not line up evenly at the bottom, especially on different screen sizes or if items (like images) are different shapes. For example, if there are four images of slightly different aspect ratios then the bottom of each column won't align, as shown below:
Enabling fluid widget sizing solves this, by altering the size of the content widgets in each column so that both columns align across the bottom, as shown below:
The fluid widget sizing setting works by resizing images, therefore it only works with sections that have widgets that use images, such as the:
- Image widget
- News Carousel widget
- Photo Slideshow widget
To turn on fluid widgets, navigate into the settings of your chosen section by clicking the Settings Cog icon in the top left hand corner of a section.
Next, tick the Fluid widgets checkbox.
You can also set fluid widgets to be turned on for all of your existing sections, or for any new sections you create on your site.
To do this, navigate to Site Settings > Section/widget behaviour.
Tick the checkbox to Automatically resize widgets to align with section height.
Now decide whether to update the settings for all of your existing sections to use fluid resizing, or just make fluid resizing applied by default to any new sections that you create. You can still overwrite this command later for each of your sections individually if you wish.
Note: If you turn on fluid resizing for a section, then the system will zoom (expand) and crop the images in the shorter column(s) until they align with the taller column(s). Therefore, if you have one column that is tall and another column in the same section that is short, the zooming and cropping can result in pixelated or non-sensible images in the shorter section. Fluid resizing is best used when the total height of your columns within a section are already quite similar to one another and you wish to make them perfectly aligned.