Help Centre

Support > Designing and Building Your Website > Adding Your Content

How to build responsive content using Pagebuilder

In order for your website to be mobile friendly, you'll need your content to be responsive. We've made it as easy as possible to create a responsive page using our Pagebuilder editor.

Using the drag and drop interface, Pagebuilder allows you to quickly build responsive content that will provide a consistent user experience across all devices and platforms.

This guide will introduce Pagebuilder and help you build your page content using this new feature.

The Pagebuilder Screen

Once the page is created you can begin building and editing content. This can be done on the Content Screen by clicking the edit (pencil) icon beside the page, or in situ on the Design Studio by turning Edit Mode on.

The content edit screen looks like this:

Regardless of whether you decide to edit your content using the Design or Content screens, the interface will contain the same elements and functions in the exact same way.

You can see how the page would look at any time by clicking the "Preview this page" button at the top of the screen.

Below this, on the left-hand side, are list of the different types of content you can add to your screen. Currently these include: 

  • Heading
  • Text
  • Image
  • Image & Text
  • Banner
  • Product Grid
  • Form
  • Divider
  • Twitter Feed
  • Facebook Comments
  • YouTube Video
  • Instagram Feed
  • Pinterest Board
  • SoundCloud
  • Map
  • Social Sharing
  • RSS Feed
  • Widget
  • HTML Fragment
  • Gallery
  • Slideshow

The right-hand side of the screen is the preview area where you will be able to structure your content.

Building your content

To start building your content, drag your chosen content selection from the left-hand panel into the right-hand preview area:

When you drop the content into the preview, a placeholder will be shown and the left-hand panel will update to show the settings that are specific to each individual content block:

Around the placeholder in the preview area there will also be a box which indicates the row that it is in. This is known as a 'container' and also has its own individual settings which are available by clicking the 'Settings' icon in the top right-hand corner of the container.

Within any single container you are able to add up to 4 different content blocks with their own content.

To add another block to a container, drag it from the left-hand panel into the container you wish to add it to and align it based on the current container content. If you wish to move it once you have dropped it in, just drag + drop to reorder it within the container.

You can also drag entire containers of content into a new position on the page. Just hover the bar indicating a container and then vertically drag it in to position.

Once you have started adding your content in the settings panels, the placeholders will disappear to provide you with a preview of how your content will display:

You should now be well on your way to building your content! For some ideas on how to create great looking reponsive layout read our guide.

More Questions?

If you have any further questions, please get in touch and we will be happy to help.

Get in Touch