Mobile design mode

Overview

The BEE builder includes a lot of ways that you can optimize your designs for mobile devices. You can hide content from certain devices, or control how they stack on smaller screens. Needless to say, there are quite a few features that you can use to customize the responsive behavior for your design.

However, we know that it can be cumbersome to repeatedly switch back and forth between the builder stage and the preview mode. With that in mind, we are happy to announce the new mobile design mode! This option allows you to decide whether the builder stage replicates the desktop or mobile design.

Mobile design mode is now available for all BEE Pro plans. 

How it works

When working inside of the builder, you'll see a couple of icons in the upper left-hand corner.

These icons function as a toggle that allows you to switch between a desktop and mobile view. The desktop view will allow you to work with the same builder you're already familiar with. If you switch to the mobile view, the builder content area will reduce to 320px. 

When you have the mobile view enabled, you can continue to design using all the same features and options. Keep in mind that the mobile design mode uses a grey backdrop that is not part of your design.

Back to top

Visibility Options

If you're using "hide on mobile/desktop" on any content blocks within your design, you'll see another icon show up to the right of the design mode toggle. This icon determines whether or not you want content blocks that are hidden from your selected design mode to populate on the builder stage.

In the screenshot below, we see someone working in mobile design mode with the toggle turned on. 

With visibility turned on, the designer can still see content that is hidden from mobile devices on the builder stage. If the designer wants the design mode to function as a preview, then this option can be turned off.

Hidden Content

With these updates, we've made a small adjustment to how hidden content populates on the builder stage. Have you noticed that a certain content block appears translucent or out of focus? You're probably looking at a content block that is hidden from the type of device that your chosen design mode is reflecting.

Say, for example, you've inserted two versions of your company logo into a design. One logo has been optimized for mobile, while the other has been optimized for desktop. As a result, you have hidden these content blocks from the respective devices.

When working with the builder in desktop design mode, any content that is hidden from that view will appear translucent.

In the example above, the logo on top is the one that is hidden from mobile. It appears as expected in this design mode as a result. However, the logo below is hidden from desktop - so the opacity of the content block has been removed so that you can easily identify which one is which, without needing to check the content settings.

Similarly, you'll see the opposite behavior in the same example in mobile design mode.

Now the opacity has been reduced on the desktop-optimized content.

Keep in mind that, when hidden content is selected in the design mode that it is hidden from, you can only make changes to it in the sidebar. If the hidden content is text-based, for example, you'll need to switch to the design mode where it is always visible to update the content. However, you can alter the settings for the content block from any view. 

Note that this behavior only occurs when visibility mode is enabled. If you'd prefer to see only the version of the content that is appropriate for your design mode, you can turn off visibility mode.

Back to top