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:
- Hide elements in the 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
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.
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.
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.
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.
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.
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.
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: