Using the Mobile view editor in Website Builder

You can adjust your website for mobile devices with the Mobile view editor. Changes you make in the Mobile view editor don't affect your site's desktop version.

You can adjust the following:

We are constantly improving Website Builder. However, some optimisations are only noticeable after you have republished your website. For this reason, we recommend republishing your site before using the Mobile view editor.

Don't have a website yet? With our user-friendly Website Builder, you can create a professional website yourself without coding.

Hide elements in the Mobile view

You can hide parts of your site that seem out of place in mobile view, such as a large header.

  • Select the component you want to hide and click the eye icon on the right to hide it.
  • The component will now be listed under the Hidden elements section to the left.
  • Click the + icon under hidden elements to undo your action and put it back.

Tip: The following shortcuts may come in handy when editing your site for mobile: switch between the mobile and desktop editor with Ctrl/Cmd+J, and see a preview of your site with Ctrl/Cmd+P.

GIF showing how you can hide elements in the Mobile view.

Change the font size

You can make the font size smaller or bigger and change the alignment (left, right, centre, justified), for example, if a title doesn't fit.

Click on the text you want to adjust. You will see the following options:

  • Make your text smaller or bigger by clicking the A- and A+ icons.
  • Change the alignment of the text to the left, centre, right or justified.
  • Clear all formatting and reset it to the default state by clicking the Tx button.

GIF showing how to change the font size for a piece of text in a text box.

Adjust the alignment of buttons

You can change the alignment of buttons in mobile view.

  • Click on the button you want to adjust and select whether the button should be aligned left, centre, right or justified.
  • When a button is justified, it stretches over the whole width of the page.

GIF showing how to adjust the alignment of buttons.

Edit the header and menu

You can edit the header's look at the top of the screen to make it fit your site. By default, the page name is visible in the top-left corner, the menu icon is located to the right, and the styling of the header is based on your template.

Click the menu icon in the top-right corner to open the settings pane. You can change the following settings:

  • Show logo - Check this box to show your logo in the top-left corner of your site header. You can select any image you want, but we recommend using an image with a transparent background.
  • Show title - By default, the page title is shown, but you can also choose to show the Website title instead.
  • Fixed header - Check this box if you want the header to stay on the page when your visitors scroll down. 
  • Use custom styling - Check this box if you want to edit the styling of the title, menu and background. You can change the font, colour and background colour. Under menu style, you can edit the style of the closed menu, the open menu and the look of a selected page in the open menu.
    By default, this option is unchecked, and the styling of your template is used.

GIF showing how to edit the header and the menu.

Change the order of components

You can change the order of components on your page by moving them up and down.

  • Click on the component you want to move and hold your mouse while dragging it up or down.
  • Alternatively, you can use the arrows on the right of your screen to move it.
  • Some components are grouped inside a box and cannot be moved outside it. You can still move the box with all the components.

Screenshot showing how to change the order of components. A text box selected and a red arrow points to the arrows for moving the component up or down.

Lock components to the bottom

Components that are part of the template (in the footer) can be locked to the bottom of your pages.

  • Right-click on the component you want to move down and click "Lock to bottom" in the menu.
  • Components locked to the bottom are marked with a blue outline if you hover over them. It is not possible to change the order of components that are locked to the bottom.
  • To unlock a component, select it and click on the unlock icon to the right.

Tip: You can lock the entire footer or just elements of it to the bottom.

GIF showing how lock items to the bottom of the screen.

Don't have access to Website Builder? You can try it out for free for 14 days and create a website in no time. Start your free trial now

Related articles:

Was this article helpful?

Can’t find what you are looking for?

Start a chat

It's the quickest way to get in touch, every day of the year.

Start chat

Give us a call

Available on weekdays from 10am to 2pm (UTC).

Call +44 20 8106 0910