A phone layout for each section
Most of your visitors see the site on a phone. Each section has its own phone settings: items in a row, picture first, text size, space, place on the page, or hidden. The computer view does not change.
PLANSEvery plan
The problem it solves
- The site looks good on the laptop where it was made and cramped on the phones where it is read.
- On a phone the picture comes after a long block of text, so nobody scrolls to it.
- A wide table of logos turns into a list a mile long on a phone.
- Fixing the phone view on other tools changes the computer view too.
How it works
- In the editor, switch the screen size in the top bar to phone (or tablet). The page is drawn as a phone would show it.
- Click a section and open On phones in the right panel.
- Choose two items side by side or one under the other, picture first, how text lines up, text size and space around.
- Move the section right under the header or to the end of the page, on phones only, or hide it on phones.
- Switch back to computer: it looks as it did. Each screen keeps its own settings.
Everything it does
On phones, per section
- Items in a row: one under the other, or two side by side (for cards, tiles, logos, team, prices and other lists)
- Picture first: when text and picture sit side by side on computers
- Line up: as on computers, left or centre
- Text size: as the design, smaller or bigger
- Space around: as on computers, none, small or large
- Place on the page: same as computers, right under the header, or at the end before the footer
- Hide on phones; and under More, Hide on computers
Other phone settings
- Any single text or button can be hidden on phones from its own style button
- Free layout sections keep their own places on a 6-column phone grid
- Header: the menu on phones drops down, slides in from the side, or fills the screen
- Rows that scroll sideways show arrows on computers and swipe on phones
- Page frames show a simpler version on phones
Checking
- Computer, tablet and phone widths in the editor's top bar
- Pick a design on the new-site screen and preview it on a phone before you start
- The test link opens the draft on your own phone before it goes live
Who uses it
Website EditorSets each section's phone layout and checks the page at phone width.
VisitorGets the phone layout by itself on a phone; nothing to install.
Where you use it
- Web: the editor, a section's On phones panel and the screen size buttons
- The published site: on every phone browser, no app needed
- Not a separate phone site: it is the same page with phone settings
What you control
Settings
- Every phone setting starts as As on computers or As the design
- Items in a row on phones: one under the other to start with
Questions
Do I have to set up the phone view for every section?
No. Every design already works on phones. The phone settings are there for the sections you want to look different on a small screen.Will changing the phone layout change the computer layout?
No. The On phones settings apply only to phones. Hide on computers is the one setting for the other way round.Can I show a different section on phones?
Yes. Make two sections, hide one on phones and the other on computers.How do I check it on a real phone before publishing?
Press Test link in the editor and open the link on your phone. It shows the saved draft, not the live site.Related features
BUILDING THE SITEDrag-and-drop editor: type on the page itselfYou change your website on the page as visitors will see it. Click a heading and type, drag sections into order, and pick layouts from live pictures with your own words. Everything saves by itself, and nothing goes live until a manager publishes.BUILDING THE SITEFree layout sections: place blocks anywhere on a gridWhen no ready layout fits, a Free layout section lets you drag titles, text, pictures, buttons and shapes anywhere on a grid. Columns and blocks gives you up to four columns filled with ready blocks such as a countdown, a chart or opening hours.BUILDING THE SITEHeader and footer looks, mega menus includedThe header and footer are the same on every page and are changed in one place. Pick a header layout, make it glass or see-through over your first picture, and build dropdowns and mega menus. Footers come with link columns, a call to action, contact details or a newsletter box.BUILDING THE SITEStyle any heading or button on its ownThe design sets how every heading and button looks, so the site stays consistent. When one needs to stand out, such as a bigger price or an outline button, style just that one from the text toolbar. One click takes it back.BUILDING THE SITEPage check for speed and accessibilityOne button in the editor checks the open page for what makes it hard to use or slow. It scores the page out of 100 and says how to fix each point.
See your business on a real design.
Tell us what you do and what the site needs to do: bring enquiries, take bookings, show your work or sell. We will start your site from the closest design with you.