Pages & Sections
Overview
Flowmo organizes your project into pages, and each page contains sections -- the top-level frames that make up your page content. Think of pages as the individual screens of your website (Home, About, Contact) and sections as the visual blocks within each page (Hero, Features, Testimonials, Footer).
The Pages tab in the left sidebar is your navigation hub. From here you can create new pages, switch between them, search your page list, and duplicate pages when you need variations.
Prerequisites
- A Flowmo project open in the editor.
- Familiarity with the editor layout (left sidebar, canvas area).
Navigating to the Pages Tab
- Look at the left sidebar of the editor.
- At the top, you will see two tabs: Pages and Canvas. Click Pages if it is not already selected.
- Below the tabs, you will see a page selector dropdown showing the name of your currently active page.
Step-by-Step: Creating a New Page
- Click the page selector dropdown to open the pages popover. You will see a list of all your existing pages, a search field, and a Create New Page button.
- Click Create New Page. A secondary popover appears with a text input.
- Type a name for your page (for example, "About" or "Contact"). If you leave it blank, a default name like "page 2" is assigned automatically.
- Press Enter or click Apply to create the page.
- The editor automatically navigates to your new page, which starts as a blank 1440 x 1440 frame ready for design.
Step-by-Step: Switching Between Pages
- Click the page selector dropdown in the Pages tab. The popover opens, showing all your pages.
- If you have many pages, use the Search pages... field at the top to filter by name.
- Click any page name to switch to it. The canvas immediately updates to show that page's content.
Your current work is saved automatically -- you never need to worry about losing changes when navigating between pages.
When you switch pages, Flowmo activates focus mode for that page, which means the canvas only shows the selected page's content and its associated breakpoints. This keeps your view clean and focused.
Step-by-Step: Duplicating a Page
- Open the page selector dropdown.
- Hover over the page you want to duplicate. A three-dot menu icon appears on the right side of the row.
- Click the menu icon and select Duplicate.
- A complete copy of the page is created, including all its content, styles, and breakpoints. The editor switches to the duplicated page automatically.
Duplicating is useful for building page variations, creating A/B test versions, or using an existing page as a starting point for a new one.
Step-by-Step: Renaming a Page
Page names come from the page-group layer in the Layers panel:
- Open the Layers panel (always visible at the bottom of the left sidebar).
- Find the page-group layer for the page you want to rename. It displays a monitor/phone icon.
- Double-click the layer name and type a new name.
- Press Enter to confirm.
The page selector dropdown updates immediately to reflect the new name.
Understanding the Home Page
Flowmo designates one page as the home page. When you first open the Pages tab, the home page is automatically selected and displayed. You can identify it because it is the page that loads by default when entering the editor.
Working with Sections
Sections are the top-level frames within a page. Each section represents a distinct block of content -- a hero area, a features grid, a testimonials row, or a footer.
Adding sections
- On the canvas: Create a new frame element directly on the canvas while a page is active. It becomes a section of that page.
- From the AI assistant: Ask the AI to generate a layout or section, and it will be added to your current page.
Reordering sections
Sections are reordered through the Layers panel, not the Pages tab:
- Open the Layers panel.
- Find the section frames listed under your current page.
- Drag and drop them to rearrange their order.
The order of sections in the Layers panel determines their visual stacking and flow order on the published page.
Section properties
Each section can have its own:
- Background color or image
- Layout mode (flex, grid, or free positioning)
- Responsive behavior across breakpoints
The Canvas Tab
Next to the Pages tab, you will see a Canvas tab. This switches the left sidebar's upper area to show your design system resources:
- Components -- reusable component masters
- Styles -- saved style presets
- Templates -- section and page templates
- Media -- project media assets
- Variables -- design tokens and variables
The Layers panel remains visible below regardless of which tab is active.
Tips
- Plan your page structure first. It is much easier to build when you have a clear sitemap in mind before you start designing.
- Use descriptive page names that match your final URL structure. "About Us" is clearer than "Page 2" and will make your published site easier to manage.
- Keep sections as full-width containers with their own internal layout. This gives you the most flexibility for responsive design across breakpoints.
- Use Duplicate liberally. If you have a page that is 80% similar to what you need, duplicate it and modify the copy rather than starting from scratch.
- Search your pages. When your project grows to many pages, the search field in the page selector saves you from scrolling through a long list.
Common Issues
"My new page is blank"
That is expected behavior. New pages start as empty 1440 x 1440 frames. Add content by creating elements on the canvas, using templates, or asking the AI assistant to generate a layout for you.
"I cannot see all my pages"
Make sure you are clicking the page selector dropdown to open the full pages list. If you have many pages, use the search field to filter. The dropdown only shows the currently selected page name when closed.
"I accidentally duplicated the wrong page"
Press Cmd/Ctrl + Z to undo. The duplicated page and all its content will be removed.
"My page name did not update in the dropdown"
Rename pages by double-clicking the page-group layer in the Layers panel (the one with the monitor/phone icon). Changes propagate to the page selector automatically. If the name still appears stale, click away from the layer and click back to trigger a refresh.
"I see elements from other pages on my canvas"
You may have exited focus mode. Click a page in the page selector dropdown to re-enter focus mode for that page, which hides content from other pages.