Design your own layout

Sections stack on phones. Minimum height on phones controls their height separately from the desktop setting; 0 lets text fit its content. Photo and video backgrounds still get room to show the picture.

When nothing is selected, open the page settings to edit Site header. Turn on Show the header on custom designs to add a name and links to your rows. Rename, hide or reorder those links.

In a preview, Live layout shows your draft content in the layout visitors currently see. Draft design shows your draft design. Press Publish this design in the Designer to make that design live.

1. 1

   Open the Designer

   In the editor, find Design your page and press Open the Designer. Or press Pro designer in your dashboard’s sidebar.

2. 2

   Start with a row

   Pick a row shape, like one section or two halves, or a ready-made starter layout.

3. 3

   Drag your content in

   From the Content list, drag your name, photo or a section onto a section of the page.

4. 4

   Change how it looks

   Click any row, section or block and change it in Properties on the other side. A row sets Space between sections, Space above and below and Space on the sides.

5. 5

   Press Save

   Or ⌘/Ctrl + S. Your live site doesn’t change when you save.

The menu button (three lines) at the top-left opens your dashboard’s sidebar over the page, to jump anywhere. On wide screens, next to it you see Dashboard › your site’s name › Pro designer. Press Dashboard or your site’s name to go to your dashboard, or Simple editor in the sidebar to go to the editor. On smaller screens, Back to content takes you back to the editor. See Your dashboard.

On a screen narrower than 1024 pixels, the Designer fits itself to the screen. Your page fills it, and the page shows at your device’s size.

1. 1

   Open the content list

   Tap the arrow on the edge of the screen. Content and Layers slide out over the page.

2. 2

   Tap an item

   The list closes and the sections on your page start to wiggle. Tap Cancel at the top if you change your mind.

3. 3

   Tap a section

   The item appears in that section.

4. 4

   Tap anything to change it

   Properties opens by itself. Or tap the arrow on the other edge of the screen.

• There is no dragging on small screens. To move a section or block, select it and use the arrows in its small toolbar.
• When the top bar runs out of room, buttons move into More (⋯): first the language, then Templates, Version history, Preview and Save, then Undo and Redo.
• The publish button says just Publish. On the smallest phones, it and Back to content move into More too.
• A dot on More means you have changes to save.

Each piece of content can be placed once. Empty space and divider lines can be used as often as you like.

A block has three tabs (Empty space and Divider line have no Content). Content changes what it says, everywhere. Style and Animation change only how it looks and moves in this design.

Rows, sections and blocks can come in as visitors scroll to them, keep moving, react when a visitor points at them, and move while the page scrolls. Each one has its own animation, saved with your design.

1. 1

   Select a row, section or block

   Open its Animation tab.

2. 2

   Pick what it does

   Each tile plays its effect on a loop, so you can see the difference. Your page plays it too.

3. 3

   Adjust it

   Each change plays it again on your page. Press Play to watch everything it does: it comes in, keeps moving, shows its hover look, then moves as if the page scrolled past.

4. 4

   Press Save

   Then press Preview (the eye) to try it on the whole page. Visitors see it once you publish.

With nothing selected, Animations in the page settings works on the whole page:

• Undo brings back what you had after Animate the whole page or Remove all animations.
• Rows only come in. A row set to One by one brings in its sections one after another; a section with its own animation keeps it.
• A section set to One by one brings in its items one after another, and its background stays put. An item with its own animation keeps it.
• Letter by letter is for short text. About you, long text and text with links come in word by word, and so does Arabic, whose letters join up.
• On hover shows only for visitors with a mouse or trackpad. Touch screens skip it.
• A piece that is already on the screen when the page opens starts where you placed it, then moves as the page scrolls.
• In Layers, a sparkle marks everything that has an animation.

Click the Contact form block. On Content, change its Title, Intro line and Button text. Leave a box empty to keep the default wording in your site’s language.

Every time you publish, your whole site is kept as a version: your content, your design and which layout showed. Press the clock button (Version history) at the top to see them. The same list is under Version history in your dashboard’s sidebar. The newest 10 are kept, plus your first version and the one that’s live.

1. 1

   Press Publish this design

   It publishes your whole site in this design and keeps it in your version history.

2. 2

   Confirm

   You see Your design is live!

To go back to the simple layout, open Version history and press Use the simple layout.

A Flex Block is a section you add in the editor. Inside it, you place text, images, buttons and lines anywhere on a grid.

• Use Add: to add Text, Image, Button or Line.
• Drag to move, and pull the handles to resize. Hold Shift while resizing to keep the shape.
• Double-click text to type on the page. Arrow keys nudge the selected item. Delete removes it.
• Use Layers to choose what sits in front.

The first time you use the Designer, gold handwritten notes point out what things do. Close one and it won’t come back on that device.