On this page
A page in FolioPage is a stack of sections: a hero at the top, an about block, a gallery, a contact form and so on. You pick sections from a library, drop them on the page in any order, then replace the placeholder text and images with your own. There is no free-form drag-and-drop canvas, which is what keeps every page looking designed on any screen size.
Open the editor
Click any page in the Pages group of the sidebar. The page opens in a simulated browser window in the middle of the screen. The pill at the top switches between Edit, Desktop and Mobile: Edit shows the editing tools on the page, while Desktop and Mobile hide them and show the page exactly as visitors see it at that screen size.
In Desktop or Mobile mode the preview works like a real browser. Click any link on the page - a menu item, your logo, a button, a portfolio project - and the preview follows it; the back, forward and reload buttons and the address bar at the top of the frame work too. Browsing never changes the page you are editing: click Edit and you are right back on it. Links that lead away from your site show a small note instead of navigating; to see the real site in a new tab, click View Live Page in the top-right corner.
Add a section
- In Edit mode, hover the page. A + Add Section pill appears on the top and bottom edge of each section. Click the one where you want the new section to go. On an empty page, click + Add your first section instead.
- The Add section dialog opens. Browse All sections or pick a category on the left, such as hero, about, gallery, services or contact.
- Hover a section card and click Add to page. Not sure yet? Click Preview to see the section rendered with your site's own colours and fonts, and use Previous section and Next section to flip through the rest of the category.
The section lands on the page with sample content. Every section also comes with its own settings for spacing, colours and background; see Section settings.
The section toolbar
Hover a section in Edit mode and two small toolbars appear in its top corners:
| Button | What it does |
|---|---|
| Move up / Move down (top-left) | Swaps the section with its neighbour. The page animates the change in place. |
| Show section heading / Hide section heading | Adds or removes a title block at the top of the section. Not every section type offers one. |
| Duplicate section | Inserts an exact copy right below. |
| Section options | Opens the section's settings and content panel on the right. |
| Delete section | Removes the section immediately. |
The name of the section type, for example "Hero", is shown next to the move buttons so you always know what you are working on.
Reorder many sections at once
For bigger rearrangements, click the Page options gear in the top-right corner of the browser frame and open the Sections tab. Every section on the page is listed in order; hovering a row highlights it on the page. Drag rows by their handle to reorder, or use the row's Duplicate section and Delete section buttons.
Removing a section
Deleting a section does not ask for confirmation. The section fades out and is gone from the page. If that was a mistake, open Page history and restore the previous version with one click; see Undo changes and restore an earlier version.
Tip: Want to keep a section but take it off the live site for now? Open Section options and switch on Hide section under Visibility. It stays in the editor, dimmed, until you bring it back.
Everything saves as you go
There is no Save button. Every section you add, move, edit or delete is stored the moment you do it. Your live site, however, only picks up the changes when you click Update live site; see Why your changes do not show on the live site yet.
Section limits
| Plan | Sections per page |
|---|---|
| Free | 10 |
| Pro | Unlimited |
| Max | Unlimited |
Duplicating a section counts towards the limit. Keep in mind that a long page with many heavy galleries also loads more slowly for visitors, so splitting content across pages is often the better choice anyway.