Responsive design is the process of arranging the layout in a way that all the important information is presented in a user-readable way in any kind of device or screen size. Our approach is by using a fluid grid layout that can adapt the layout to different screen sizes.

In fluid grids, we define a maximum layout size for the design. The grid is divided into a specific number of columns to keep the layout clean and easy to handle. Then we design each element with proportional widths and heights instead of pixel-based dimensions. So whenever the device or screen size is changed, elements will adjust their widths and heights by the specified proportions to its parent container. This optimises the layout and design of websites on smaller-screen devices such as mobiles and tablets.

How to create a responsive site using a responsive template as a new customer since (subscribed in June 2017)?

Simply select a one of the Responsive template from the wide selection. 

How to create a responsive site using a responsive template as an existing customer?

To use a responsive template for your site, select the responsive template from the templates page here. You can choose to preview the template, or select the template to immediately begin editing your responsive site.

How to add a responsive page to an existing site

To add a responsive page, simply select a 'responsive page (beta)' from the list of page types when adding a page to your site.

Responsive Editor Basics

Template

It is the layer that sits behind every page of your site, your main site design and the layout of your website. They are several options to choose from including a Blank template. 

Pages

To add a Page to your website click on Pages on the Top Toolbar - Add a new page - type the page title - set the page visibility on the Navbar (menu) - save.

A responsive page is made up of 4 different components that behave differently depending on how you edit them.

  • Navbar - This is your page menu. By default, this sits at the top of the page.
  • Section - These are the main blocks of content you can add. You can stack sections to build your page layout. We have some template sections to help you get started. 
  • Row - These are nested within the section, and are where the columns sit. 
  • Column - It's the individual block where you add and edit your content including text, images, or link buttons.

Header 

The header is the area across the top and throughout all your pages. It usually contains your site title, company logo and your site menu.

A Footer 

The footer is the area of your site that appears at the bottom and throughout all of your pages. 

Preview As you build your site, you might want to see what it looks like live. 

Save To save click on the Save button on the top toolbar.
When you make a change in the editor, a 'save' button appears. If you save a change but don't publish the page immediately afterward, the changes will remain saved as a draft within your editor but will not be live to your site visitors. This allows you to tweak a page’s design without having those changes appear on your live site until they have been perfected.

Publish a page or a website

Use the publish button when you are ready to go live by clicking the Publish button on the top toolbar. 

When you are ready to publish a page, you can click the blue 'Publish' button in the top right-hand corner of the editor. This page will then be publicly visible.

Each page on your site needs to be published individually, so you can navigate to the pages you want to publish via the page manager and do the same for each.

Checking your page status

You can check the status of each of your pages in the page manager. We have 3 different indicators:

  • Page is hidden from menu.
  • Page is unpublished (not visible to public).
  • Page has saved changes which aren't published.

Top toolbar

This is Web Builder editor main tool bar. From which you can navigate to the following:

  • Web Builder dashboard. 
  • Pages management (Add a new page, rename and existing page, reorder the pages and edit the settings of individual pages).
  • Your file management (access existing one, adding new ones, organise and delete).
  • Site (set up the site settings, site addresses, site integration).
  • Undo and redo button.
  • Publish button.
  • Preview button.
  • Save button.

Left side barThis toolbar is mainly for the site settings. Favicon, site address and Google integrations.Right side barThis toolbar enables editing of individual components of the page such as text, images settings and every other element of a page.
 

You can also suggest a new feature.

Did this answer your question?