Help Centre

Support > Designing and Building Your Website > Designing Your Website

How To Create Great Looking Responsive Pages

In this guide, we have given you some tips and ideas on how to build a great looking responsive pages. We have provided two layout ideas, along with steps on how to set up a holding page whilst you build your site.

You are able to use existing widgets and images - but can also add new ones from the responsive page you are working on. Quickly create and arrange beautiful, responsive and most importantly functional pages that will really make an impact on your website and business. 

Holding Page

To see the example of the Holding page we are building below, have a look at our example page.

A holding page is a fantastic way to let your customers know your website is being built and will be live soon! Make your holding page as informative as you can. To create our example holding page we used a variety of content blocks.

In the first Container, we added a Heading content block. Here we added text to the ‘Heading Text’, with further details in the ‘Sub-Heading Text’.

To make this Heading block more visually interesting we added a background image. You can add both an image or change the background colour. To add an image to your content block take the steps below -

  1. Navigate to the Container you wish to add the background image to

  2. Click on the cog in the top right of the Container

  3. We have added an image here. You can leave this if you wish and simply add coloured background.

  4. Once your image has been uploaded you are able to add a colour and change the transparency of the image too.

  5. We have chosen the colour white, and then set the Opacity to ‘Low’

  6. When you are happy, make sure to save changes.

The next Container is using one Image content block, we have added a high resolution image. Read how to edit your images, you should use an image that best represents your brand and what you are going to be selling. 

Not sure what size your images should be? Have a read of our guide on Image Dimension to ensure you are adding the correct sized images, we also have a great blog on Stock Images if you are in need of some high quality images you can use on your site, for free! 

As your not online yet, a great way to encourage your customers to get in touch is by linking to your Facebook business page. We have linked to ours from a standard Text content block.

The final Container has a Form content block added, along with another Image content block. Find out how to create your own custom form here

Here you can see how the holding page will look once you remove the template. Removing the template will hide all other menu tabs so your customers cannot access those pages until you have launched fully.

Don't Forget! - This will remove all the styling from your page, so have a think about the placement of your content blocks - you can see our two blocks, the Contact Form and Image content blocks are now sitting on top of each other rather than next to.

Layout Idea One

To see the example of the layout we are building below, have a look at our example page.

One of the best things about using the responsive pagebuilder is being able to very quickly create a fantastic looking homepage with a few drags and drops. We have created this example homepage using four different content blocks.

The first Container has a single content block in it, our Banner Slider Widget. This can be created from new from your page, or you can create one in the Content tab of your account.

We have then added a Divider content block, followed by a Text content block, as we did on the Holding page.

This followed by another Divider content block nicely places the text for your customers to read.

Next we have three Image content blocks, as per the image above. Each one has been linked to a product page. This is a fantastic way to promote certain products. To link your image follow the steps below:

  1. Drag and Drop an Image content block and add your image to it

  2. Click on the 'Image Link' field, here you will see a drop down of all your pages

  3. Select the page you wish to link and Save.
  4. You can also copy across every after the '/' at the end of your domain name, e.g /ourshop/prod_3884344-Featured-Product.html

We have then added another Divider content block, followed by a Text content block with an image added to the Container, as we did on the Holding page.

This followed by another Divider content block nicely places the text for your customers to read.

Finally, we have our Product Feature Grid.

Layout Idea Two

To see the example of the layout we are building below have a look at our example page.

In this example, we have put some of the more interesting (no offence Image content block!) to use here, including the Instagram content block and the Google map content block.

This homepage example shows how easily you can show your customers further details and insights about you and your business.

As with our previous layouts we have chosen a variety of different content blocks.

The first Container has 2 content blocks in, we have simply Text content block, alongside an Image content block.

Underneath this, in our next Container, we have added a banner widget.

Next, as before, we have four linked Image & Text content blocks, each linking off to separate product pages.

The next Container is where we have made use of the great Instagram widget, and the Google map widget. Read the guides below for steps on how to set these up. They are being used here in a row of three, with an Image content block between them.

How To Connect Your Instagram Account

How To Set Up A Google Map

To finish this page, we have added a Text content block, and used to display a customer testimonial.

Testimonials are a fantastic way to promote your business, there is nothing more trustworthy than a fellow customer so if you can get a testimonial on your site go for it!

If you have any questions about any of these ideas, get in touch with your Account Manager who will be happy to help. Don't forget to checkout out our Pagebuider Tips Blog for further ideas, too!