Visual Builder - Creating Mobile-first Experiences

13 Oct 2021

For many charity organisations, well over half of their supporters use mobile devices to view and engage with their digital touch points. With this in mind, we are big believers that every digital touch point should be centred around mobile experiences - and optimised for all screen sizes.

All Visual Builder elements have been pre-built to be responsive.

How do I create great mobile experiences?

As part of the Visual Builder, we have created quick and easy ways for you to toggle between Desktop, Tablet and Mobile - enabling you to target and optimise your layout to each device. Each Section, Column and Block has device specific settings such as width, padding, margins and much more.

You may also decide that some content should be exclusive to a specific device, this is entirely possible and easy to achieve within Visual Builder - and can be achieved via the device visibility options within each element.

How do I toggle between Mobile and larger screens?

In the Visual Builder: Top Bar you will see the Device Selector. This has been created so that you can very quickly preview the page on a standard/typical mobile screen size - whilst still being able to edit and update your content via the Sidebar and other various controls.

Regardless of this feature, we still always recommend that you and your team test all pages on actual devices to ensure that each page appears and functions as intended.

Are you ready to learn more?

We hope that this article has helped you to understand the the importance of creating great mobile experiences.

When you're ready, we encourage you to continue your journey learning more about the many features within Visual Builder. Here are few links to keep you moving and kicking goals:

Getting Started

Visual Builder vs. Classic Builder, what is the difference?

Sections, Columns and Blocks

Templates

If you have any questions and are unable to find the answers through our Visual Builder Support Articles, then please reach out to our amazing Support Team who will be happy to help you out!