Build a responsive website automatically

Creating a responsive website, that is to say that adapts to mobile phones and tablets, is today indispensable. As always, we are committed to offering you both maximum freedom and maximum fun and comfort. 

As shown in the following tutorial: 👉 Optimize your website for mobile devices, it is possible to manually create a custom mobile view. In this guide, you will discover how automatic mobile optimization allows you to build a responsive website in no time.

Automatic mobile mode activated in 3-2-1 🛩

Enable automatic mobile view

Switch to mobile view

To manage your mobile website, you have to select this view in the editor toolbar:

1. Select automatic optimization

2. Information about using mobile view

3. Mobile view of current page

4. Panel for management of block visibility

Automatic optimization applies to the whole website and starts immediately.

Customize automatic mobile view

When the automatic mobile view is activated, a powerful algorithm analyses your website pages and generates a mobile version, without any action needed on your part. All the blocks are resized and replaced, in order to create optimized mobile pages. In most cases, the result is perfect, and you have nothing to do!

Nevertheless, you can modify each page individually, in order to customize the automatically generated version. You can customize your mobile pages by performing these two simple actions:

👉 Change blocks order

👉 Change block visibility

Let’s look a bit closer...

Change blocks order

Vertical and horizontal links

As shown in the video thumbnail below, you can move the blocks in the mobile view, for them to be placed differently relative to the other blocks.

You can move them up, down, right or left. Moreover, we have two more good news (yippee! ✌): 

👉 Your actions don’t impact the desktop view of your website: your pages remain unchanged for the computer version

👉 Your actions are saved. So, if later on you change the order of these blocks in the desktop view, the mobile version of the page will not be impacted.

When you move your blocks, it creates a manual link between them, which allows you to save your actions.

💡 To delete a manual link and go back to the default mobile view, you only have to click on the marker of the link.

Internal links

In some specific cases, you may want to place a block within a block. Don’t worry: it is possible! 🚀

For a block to be able to be placed within another one, using an internal link, it will first have to be declared as a container.

Here, the Image block has been checked as a container. Then, it becomes possible to create internal links, just like in the video below:

Change block visibility

You can, if you want, take some blocks off from the desktop view. To do so, you have to change the blocks’ visibility. In fact, it is very simple (we promise): either the block is visible, or it is not visible!

1. In the mobile view, you just have to click on the crossed-out eye icon, to make the block invisible. It then disappears from the mobile view, and appears in the invisible block list.

2. In the invisible block list, you can click on the eye icon to make the block visible again in the mobile view.

And here is the result:

Automatic mobile website: to conclude...

The automatic mobile view is the best way to build a responsive website, with no action needed from you! As you have just read in this guide, it is very easy to customize your mobile view, in order to create perfect responsive pages.