Build your website with blocs

2 min read

The power to create responsive websites is at your finger tips with this app

Image credits: Apple Inc, Cazoobi Ltd

Blocs has been available on the Mac for a number of years, enabling web designers and developers to quickly create professional-looking websites and WordPress themes without needing to write any code. More recently, it’s been launched on the iPad, giving the choice of creating a website from scratch or using a template.

Given the extensive number of features beneath Blocs’ simple looking interface, it’s difficult to do this app justice. As well as using Bloc sections to structure websites and Bric elements to bring them to life, you can add gradients and shadows, apply CSS filters and add scroll-based parallax effects. Fonts can be imported and the Blocs store contains custom add-ons.

Pages can be saved to iCloud Drive, letting you pick up where you left off on a Mac. They can also be published directly to a server with a few taps. Just be aware there’s a small monthly or annual fee if you want to go beyond the free trial.

● David Crookes

Image credits: Apple Inc, Cazoobi Ltd

How to Create a site

1 Start a new project

Launch Blocs and choose where you want to store your project (iCloud Drive or On My iPad) then tap the ‘+’ icon or Create Document. Next, either begin a project from scratch by clicking Empty Page or use a template.

2 Input key information

Templates get you off to a flying start; use the wizard to input a name, choose a logo, customise colours and select a font. Starting a new project lends more control; enter the site name, web address and page type.

3 Begin building

When you begin a fresh project, you will see a blank screen. Tap the ‘+’ icon at the centre and choose a section for your site, scrolling down to see options such as navigation, hero, header, feature, forms and gallery.

Image credits: Apple Inc, Cazoobi Ltd

4 Change the elements

You can select any elements in a section (or on a template). Try tapping text to adjust the width and placement of the words, using the left-hand icons to adjust the font size or double tapping to write a replacement.

5 Add more sections

Tap the ‘+’ icons to add Bloc sections. We’ve added a feature column with space for an image. By tapping to highlight the image box, you can select the ‘+’ bric icon and choose a different type of element such as a video.

6 Include an asset

To insert content into these sections, you n