With the Mobile view editor, you can adjust your website for mobile devices. Changes you make in the Mobile view editor don't affect your site's desktop version.
You can adjust the following:
- Hide elements in mobile view
- Change the font size
- Adjust the alignment of buttons
- Edit the header and menu
- Change the order of components
- Lock components to the bottom
Tip: We are constantly working on improving Website Builder, however, some optimizations are only noticeable after you have republished your website. For this reason, we recommend that you republish your site before you start using the Mobile view editor.
Hide elements in Mobile view
You can hide parts of your site that seem out of place in mobile view, for example, a large header.
- Select the component you want to hide and click on the eye icon on the right, to hide the component.
- 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 you are 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.
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 really 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 left, center, right or justified.
- Clear all formatting and reset it to the default state by clicking the "Tx" button.
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, center, right or justified.
- When a button is justified, it stretches over the whole width of the page.
Edit the header and menu
You can edit the look of the header at the top of the screen to make it fit with 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.
- Use custom styling - Check this box if you want to edit the styling of the title, menu and background. You can change the font, color and background. By default this option is unchecked, and the styling of your template is used.
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 that 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.
Lock components to the bottom
Components that are part of the template can be locked to the bottom of your pages.
- Right-click on the component that you want to move down, and click "Lock to bottom" in the menu that appears.
- Components that are 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.
Note: Only components that are part of the template can be locked to the bottom.