What's it all about?

A 'three column' page template, the 'Holy Grail' layout.


1. The theme uses 'flexbox' css throughout and has been written to centralise the inner page content in the browser window both vertically and horizontally. A good example of this is the privacy policy page. Centralising will become less apparent as page content grows, this is normal.

2. A ‘Lazyload’ script is included and interacts with all images, galleries and the feature block when used. This makes the aforementioned only show when in the browser viewport. This keeps bandwidth usage down and page speed up.

3. The five preset colours schemes and fonts for headings can be changed at the click of single button.

4. All images will automatically show a white border and subtle box shadow, browser allowing.

5. Anything can be edited and/or deleted.

6. The four custom blocks included should help you create a stunning website.

7. The ‘Foto Background Image’ block allows a large image to stretch full width and height responsively to the browser window.

8. The ‘Foto Lightbox’ block allows a single image to pop up.

9. The ‘Foto Feature’ block can be used in several ways to emphasise/promote pages or products with an option to link to an internal page.

10. The ‘Foto Gallery’ block is for image galleries using ‘Filesets’ and includes a few templates.

Blockquote example for 5.7. Add a content block and text, then click the 'Wand' for 'Custom Styles', click 'Blockquote' and 'Save'.

For 5.8 add text and select all text, then click 'Blockquote' in the 'Styles' dropdown and 'Save'.

To add a CTA Button, shown below, repeat precedure for 'blockquote', except choose either the 'Square Button' or 'Rounded Button' option.

NOTE: For any issues, feedback (good or bad), suggestions for improvements/additional features you would like to see, please post on the support page.


For help with setup read the 'docs/setup page.

How to?

The 'Holy Grail' layout refers to a web page which has multiple, equal height columns that are defined with style sheets. More info about the ‘Holy Grail’ layout at wikipedia. The columns here have a border around them to highlight the equal heights. The borders can be changed or removed.

Sidebar one

Although this sidebar shows first on the page it is in fact second in the source code.

We're using the css 'flexbox - order' rule to change position because we want the main content (middle section) to be seen first by search engines.

However, when seen by mobile devices this sidebar will become second in the viewport.

Adjust your browser to see content swap in action.

Sidebar two

An area to place ads, offers, news, widgets, etc.Image block template examples below.

Image block using the 'foto-left' template

Placeholder image

Image block using the 'foto-center' template

Placeholder image

Image block below using the 'foto-right' template

Placeholder image