Website Builder how-tos
How do I make my Website Builder site look right on phones?
Templates in the Website Builder are built to adjust to phones and tablets already. To check or fix the phone version, click the phone icon in the top menu bar of the editor and edit while you are in that view. Changes you make in phone view apply only to phones, so your desktop layout stays the same.
Why the phone view matters
Many of your visitors, especially people looking for a contractor or a local shop, will find you on a phone. On a small screen they want three things fast: what you do, where you work, and a way to call. If those are hard to find on a phone, the rest of the site does not matter much.
How to switch views
- Open your site: Client Area > your service > cPanel > the Website Builder button, then edit your domain.
- In the middle of the top menu bar, find the three device icons: desktop, tablet and phone.
- Click the phone icon. The page redraws at phone width.
- Hover over the icon to pick a specific device size, or use the zoom menu if the preview is too small to work with.
How changes flow between views
This is the part that surprises people:
- Changes made in desktop view flow down to tablet and phone, unless you have changed that setting in a smaller view.
- Changes made in tablet view flow down to phone, but not up to desktop.
- Changes made in phone view affect phones only.
When you change a setting in tablet or phone view, its label in the settings panel changes color. That tells you the setting is different from desktop.
Some things are shared by every view no matter where you edit them: the actual words, the heading level (H1, H2), and site-wide fonts and colors from the Design menu. So if you change a headline's wording in phone view, it changes on desktop too.
Common phone fixes
- Text too big or too small: select the text, switch to phone view, and adjust the font size in the style settings.
- Too much empty space: select the section and reduce the padding (spacing) in phone view.
- Columns squashed side by side: select the section and reduce the number of columns for phone, so items stack.
- Something you do not need on phones: select it, switch to phone view, and turn off visibility for that view. It stays on desktop.
- Banner photo cropped badly: change the background position, or use a different photo that works in a tall shape.
Make it easy to call you from a phone
Put a click-to-call phone number or a "Call now" button near the top of the home page. In the button's Link settings, choose Phone number and enter your number. On a phone, tapping it starts the call. See our article on contact forms and click-to-call for the full steps.
Check all three views at once
The builder has a Presentation mode that shows desktop, tablet and phone side by side in a new browser tab. Everything in it is clickable. Use it before every publish.
Also check on your real phone after you publish. Open your website in the phone's browser and:
- Tap the menu and every link in it
- Tap the phone number
- Fill in and send the contact form
Things to avoid
- Fixed heights and widths on boxes. They often look fine on desktop and break on phones.
- Very long headlines. Aim for something that fits in two lines on a phone.
- Tiny buttons placed close together. Leave room for a thumb.
Need a hand?
If a layout will not behave on phones, send us the page address and a screenshot at support@parsonshosting.com, or call 530-710-8726. We reply the same day, often within an hour, during business hours (8:00 AM to 5:00 PM Pacific, 7 days a week). You can also read the FAQ or see the Website Builder plans.