Free delivery when you spend over £100

Next day delivery available

Free Click & Collect from 30 minutes

Available from our network of over 40 branches

Our customers love us

CMS Template Guide

This page contains examples of all of the prebuilt CMS widgets which you can use to quickly and easily build pages without the need for a dev.

I've saved this page as a Magento Template called "CMS Template". You can click "Apply Template" in the top right of the pagebuilder editor when building a new page and select the template - you can then delete (bin icon on hover) the elements you don't need and change the content as required. You can move pagebuilder elements around by clicking and dragging.

The content below uses classes to achieve a consistent look and feel. Using this template as a starting point for your CMS pages ensures no classes are missed, it also means we're able to roll out styling improvements across your pages easily.

A full list of utility classes can be found here. You can use these for simple changes such as paddings, margins and showing/hiding elements at different screen sizes. You won't need to add these yourself unless you're creating content from scratch.

3 Panel (Left)

These 3 panel rows use the class "panel-widget", the side-by-side images have the class "width-50" which makes them 50% width at all screen sizes.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

3 Panel (Right)

The columns can be swapped by dragging the one column over the other in pagebuilder, it'll show a red box and they'll swap round.

3 Panel (Flipped)

The content in the 3 image col (right col in the above example) can be flipped too. Same as reordering columns, just drag the image where you want it to go. In these panel widgets, the width-50 images need to be next to each other. E.g. don't put a 100% width image between them.

2 Panel

You can also use the "panel-widget" class to create non-stacked graphic content seen above and below.

3 Panel

4 Panel

5 Panel

6 Panel

2 Panel with Text

Panel rows with text use a different class to the above examples. For these, the "grid-widget" class is used. The grid-widget class allows for graphics and text to be combined.

3 Panel with Text

4 Panel with Text

For this example, we've used a handy class called "remove-whitespace" on the row along with "grid-widget". This class removes white space from around the above images and blends it with the backgrounds without the need to edit the images manually.

5 Panel with Text

6 Panel with Text

This example also uses "grid-widget" and "remove-whitespace".

Product Grid

Similar to product carousels but better suited for less products. This row uses the "productlist-widget" class.

Text example with image on right

This is an example of a commonly used widget, with text on the left and an image on the right.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

You can use buttons in your content too, as seen below. These don't need classes adding and will work out of the box based on the button type.

As well as being able to use utility classes such as padding-sm, you can add custom padding/margin to elements. These are used on the buttons container and the row above. Keep in mind these custom padding/margins aren't responsive, so they'll always be the same.

You could also have text underneath the image, e.g. captions.

Text example with image on left

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Image Slider

Slide Title Here

Pagebuilder sliders can display images, text, buttons and videos.

They require a fixed height if you use them with only an image/video.

I would suggest limiting their use above-the-fold as they have a moderate impact on performance.

You can change the alignment, background size
and many other options in the slider configuration.

Video Example (Left)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Video Example (Right)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Video Example (Full)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

4 Panel Slider

To convert a regular pagebuilder row into a slider, add the class "custom-slider" and either "slides-4" or "slides-6". Also make sure to include the HTML snippet below, once on a page where sliders are used.