# Design your own layout

> Use the Launchfolio Designer to arrange your page in rows and sections, drag your content in, add animations and publish a design.

https://www.launchfolio.live/docs/en/designer · 2026-10-17

**Designer tour** (73 s video): https://www.launchfolio.live/videos/docs/designer-tour-en-1080.mp4

The simple layout puts your sections in a fixed order. The Designer lets you arrange the page yourself, piece by piece.

## Check phones and the site header

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.

## Simple layout or your own design

|  | Simple layout | Your own design |
| --- | --- | --- |
| Where | The editor | The Designer, at `/your-name/design` |
| Order | Fixed: profile, experience, education, your sections, videos | Anything you like, in rows of up to 4 sections side by side |
| Saving | Saves on its own | Press **Save**. Your live site changes only when you publish |
| Content | Written here | Comes from the editor, so words and photos stay in one place |

> **Good to know:** The Designer works on phones and tablets too. See [On a phone or tablet](https://www.launchfolio.live/docs/en/designer#phone-or-tablet).

## Make your first design

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. **Start with a row** — Pick a row shape, like one section or two halves, or a ready-made starter layout.
3. **Drag your content in** — From the **Content** list, drag your name, photo or a section onto a section of the page.
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. **Press **Save**** — Or ⌘/Ctrl + S. Your live site doesn’t change when you save.

> **Design changes don’t save on their own:** Press **Save** before you leave. If you try to leave with unsaved changes, we ask first.

> **Want a head start?:** Press **Templates** in the top bar to use a template’s layout with your own content, then change it here. See [Use a template on your site](https://www.launchfolio.live/docs/en/use-a-template).

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](https://www.launchfolio.live/docs/en/your-sites#getting-around).

## On a phone or tablet

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. **Open the content list** — Tap the arrow on the edge of the screen. **Content** and **Layers** slide out over the page.
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. **Tap a section** — The item appears in that section.
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.

## What you can place

| Group | Blocks |
| --- | --- |
| About you | Name, Headline, Photo, About you, Location, Email & phone, Social links, Résumé button |
| Sections | Experience, Education, Videos & Media, and each section you added |
| Extras | Contact form, Empty space, Divider line |

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.

## Animate your page

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.

> **Visitors see them with the Animations add-on:** Try every animation in the Designer and on **Preview**. Visitors see them on your live site once your site has the **Animations** add-on, $10 a year, from the **Add-ons** page. Until then, your live site shows the same page standing still, the **Animation** tab has a crown, and **Save** reminds you. See [Billing and renewals](https://www.launchfolio.live/docs/en/billing-and-renewals#what-you-pay).

1. **Select a row, section or block** — Open its **Animation** tab.
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. **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. **Press **Save**** — Then press **Preview** (the eye) to try it on the whole page. Visitors see it once you publish.

| Group | What it does |
| --- | --- |
| **Come in** | How it appears as visitors scroll to it. Its settings are in the next table. |
| **Keep moving** | A gentle loop once it’s on the page: **Float**, **Pulse**, **Sway**, **Spin**, **Breathe** or **Bounce**, with a **Speed** and an **Amount** |
| **On hover** | When a visitor points at it with a mouse: **Lift**, **Grow**, **Tilt**, **Glow** or **Brighten** |
| **While scrolling** | It moves with the page as visitors scroll past: **Drift**, **Fade out**, **Grow**, **Turn** or **Slide**, with an **Amount**. A section with a photo or video background can use **Photo drift**: only its background moves, slower than the page. |

| In Come in | What it does |
| --- | --- |
| **Effect** | **None**, **Fade**, **Rise**, **Drop**, **From left**, **From right**, **Zoom in**, **Zoom out**, **Blur**, **Flip**, **Reveal** or **Tilt** |
| **Strength** | How far it moves, grows or turns: **Soft**, **Medium** or **Strong** |
| **Start blurred** | It starts out of focus and sharpens as it plays. Lovely on text. |
| **Duration** | How long it plays, up to 3 seconds |
| **Wait before it starts** | A pause once it is on screen, up to 3 seconds |
| **Sections** | Rows: **All together**, or **One by one**: the row’s sections come in one after another, with **Time between sections** |
| **Items** | Sections and lists: **All together**, or **One by one**: a section’s items, or a list’s jobs, photos, cards or links, come in one after another, with **Time between items** |
| **Text** | Name, headline and about you: **All together**, **Word by word** or **Letter by letter**, with the time between them |
| **Feel** | **Smooth**, **Gentle**, **Bouncy** or **Steady** |
| **Play every time** | Plays again whenever it scrolls back into view. When it’s off, it plays once. |

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

| Setting | What it does |
| --- | --- |
| **Animate the whole page** | **Gentle**, **Elegant**, **Playful**, **Bold** or **Cinematic** gives every row, section and block a matching animation, in place of the ones you had. Then change any piece. |
| **Remove all animations** | Turns every animation on the page off. |
| **Play on phones** | When it’s off, phones show your page standing still. |
| **Play the page** | Plays every animation on the page here at once. |

- **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.

> **Good to know:** Visitors who turned on reduce motion on their phone or computer see everything straight away, without animation. If your own device is set that way, animations don’t play in the Designer either.

**Why don’t my animations move on my live site?**
Your site needs the **Animations** add-on, $10 a year. Add-ons come with a paid site. Until it’s on, animations play only in the Designer and on **Preview**. If you paid by bank transfer, visitors see them as soon as it arrives.

**Do my other sites get animations too?**
No. An add-on is for one site: the one picked at the top of your dashboard when you add it. Each site that should animate needs its own.

## Style the contact form

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.

| On Style | What you can change |
| --- | --- |
| **Layout** | **Alignment** (Section, Left, Centre or Right), **Width** (Narrow, Medium or Full) and **Corner radius** |
| **Title** | **Show the title** and **Title size** (Small, Normal, Large or Huge) |
| **Intro line** | **Show the intro line** and **Intro size** |
| **Fields** | **Name and email** side by side or stacked, and **Message box height** (3 to 10 lines) |
| **Button** | **Style** (Filled or Outline) and **Width** (Fit text or Full width) |

> **Tip:** The words are shared by every design and the simple layout. The style belongs to this design only.

## Version history

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.

| Action | What it does |
| --- | --- |
| Preview | See that version exactly as it went live. |
| Put this version live | Your site goes back to that version: its content, design and layout. |
| Edit from here | Make it your draft, content and design, and load it into the Designer. Your live site doesn’t change. |
| Rename | Give it a name you’ll remember. |
| Delete | Remove it for good. The live version can’t be deleted. |

## Publish a design

1. **Press **Publish this design**** — It publishes your whole site in this design and keeps it in your version history.
2. **Confirm** — You see **Your design is live!**

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

> **Good to know:** Until your site is paid for and approved, you can save your design but not publish it. **Publish** shows a crown (not paid yet: it opens checkout) or a lock (being reviewed). See [Pay to publish](https://www.launchfolio.live/docs/en/pay-and-review).

## Flex Block: a free-form section

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 gold notes

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.