FlowPage Builder Documentation
Everything you need to know about building beautiful WordPress pages with FlowPage Builder. From installation to advanced features.
Getting Started
FlowPage Builder is a WordPress page builder plugin that lets you create stunning, responsive pages through a guided wizard flow and visual editor. No coding knowledge required.
System Requirements
| Requirement | Minimum | Recommended |
|---|---|---|
| WordPress | 6.0 | 6.4+ |
| PHP | 7.4 | 8.1+ |
| MySQL | 5.7 | 8.0+ |
| Memory Limit | 128MB | 256MB |
Installation
Download the Plugin
After purchasing from CodeCanyon, download the flowpage-builder.zip file from your Envato downloads page.
Upload to WordPress
Go to Plugins → Add New → Upload Plugin. Select the ZIP file and click Install Now.
Activate the Plugin
Click Activate Plugin. A new FlowPage menu item will appear in your WordPress admin sidebar.
Enter Your License Key
Navigate to FlowPage → Settings and enter your Envato purchase code to activate your license and enable updates.
Creating Your First Page
Once activated, navigate to FlowPage → New Page in your WordPress admin. The setup wizard will guide you through choosing a site type, colors, typography, and sections. Within minutes, you will have a beautifully designed page ready to publish.
You can also start from a pre-built template by selecting one in the wizard. Templates include all sections pre-configured with professional content and styling.
Setup Wizard
The FlowPage setup wizard walks you through 5 steps to create a page. Each step auto-advances after you make a selection, so you can build a complete page in under 2 minutes.
Step 1: Site Type
Choose the type of website you are building. This determines which sections and default content are suggested. Available site types include:
- SaaS / Software — Perfect for software products, apps, and digital services
- Corporate / Business — Professional business websites and agencies
- Portfolio / Creative — Showcasing creative work and personal projects
- Restaurant / Food — Menus, reservations, and food businesses
- Blog / Content — Content-focused websites and publications
- E-Commerce — Online stores with WooCommerce integration
Step 2: Colors
Select a color palette for your page. Each palette includes a primary, secondary, accent, text, muted text, and background color. You can choose from pre-designed palettes or customize colors later in the editor sidebar.
Step 3: Typography
Choose a font combination for your page. FlowPage includes several curated typography pairings (heading + body font) that work well together. All fonts are loaded locally — no external CDN dependencies.
Step 4: Style
Set the visual style for your page, including border radius (rounded vs. sharp corners) and spacing preferences. These values are applied as CSS variables across all sections for a consistent look.
Step 5: Sections
Pick which sections to include on your page. You can add or remove sections later from the editor. The wizard pre-selects sections based on your chosen site type.
You can click on any completed step in the step navigation to go back and change your selection. The "Continue" button in the footer advances to the next step.
Visual Editor
The visual editor is where you fine-tune your page. It features a three-panel layout: sidebar, preview panel, and toolbar.
Editor Layout
Sidebar Panel
Lists all sections on your page. Drag to reorder, click to select and edit. Shows global sections with a purple "GLOBAL" badge.
Preview Panel
Live preview of your page as visitors will see it. Supports desktop, tablet, and mobile viewport modes. Click elements directly to edit them inline.
Edit Panel
When a section is selected, shows all editable fields: text, images, toggles, repeater items, and more. Changes update the preview in real time.
Toolbar
Top bar with page title, save button, preview button, device toggle (desktop/tablet/mobile), and publish status indicator.
Section Management
- Add Section — Click the "+" button at the bottom of the sidebar to open the section picker
- Reorder Sections — Drag and drop sections in the sidebar to rearrange them
- Duplicate Section — Click the duplicate icon on any section card to create a copy
- Delete Section — Click the trash icon on any section card to remove it
- Collapse/Expand — Click a section in the sidebar to expand its edit fields
Saving Your Work
Click the Save button in the toolbar to save your page. FlowPage saves the page as a WordPress page (post type page) with section data stored as post meta. Global sections (navbar and footer) are saved separately.
Always save your work before leaving the editor. Unsaved changes will be lost if you navigate away from the page.
Inline Editing
FlowPage Builder features a powerful inline editing system that lets you edit text directly in the preview. Simply click on any text element to start editing.
How It Works
Hover to See Editable Areas
Move your cursor over the preview. Editable text elements will show a subtle highlight border, indicating they can be edited.
Click to Edit
Click on any highlighted text to activate inline editing mode. The text becomes editable with a focused cursor.
Type Your Changes
Edit the text directly. Changes sync in real time with the sidebar edit panel. Click outside or press Escape to finish editing.
Editable Elements
The following elements support inline editing:
- Headings (H1, H2, H3)
- Paragraphs and descriptions
- Button text
- List items and feature titles
- Pricing plan names and prices
- Testimonial quotes and author names
- FAQ questions and answers
Inline editing is the fastest way to update text content. For other field types like images, URLs, and toggles, use the sidebar edit panel.
Section Types
FlowPage Builder includes 14+ section types, each with customizable fields and professional default content. Add any combination of sections to build your perfect page.
Hero
Full-width hero section with heading, description, CTA buttons, and optional background image.
Features
Grid of feature cards with icons, titles, and descriptions. Supports 3, 4, or 6 column layouts.
Pricing
Pricing table with plan cards, feature lists, highlighted/recommended plan, and CTA buttons.
Testimonials
Customer reviews with avatar, quote, name, and title. Supports grid and carousel layouts.
FAQ
Accordion-style frequently asked questions. Click to expand/collapse answers.
CTA (Call to Action)
Prominent call-to-action banner with heading, description, and action buttons.
Image + Text
Two-column layout with image on one side and text content on the other. Supports left/right image alignment.
Stats / Counters
Animated number counters to display key metrics. Great for showcasing achievements and milestones.
Team
Team member cards with photo, name, role, and social media links. Grid layout.
Video
Embedded video section with optional heading and description. Supports YouTube and self-hosted videos.
Contact
Contact information display with address, email, phone, and optional contact form.
Blog Grid
Display your latest blog posts in a grid layout with featured images, titles, and excerpts.
Timeline
Vertical timeline layout for displaying company history, project milestones, or process steps.
WooCommerce
Product showcase and category grid sections. Requires WooCommerce plugin to be active.
Field Types
Each section contains various field types you can edit in the sidebar:
| Field Type | Description | Example |
|---|---|---|
| Text | Single line text input | Heading, button label |
| Textarea | Multi-line text input | Descriptions, paragraphs |
| URL | Link/URL input | Button link, social links |
| Image | WordPress Media Library picker | Background image, avatar |
| Toggle | On/off switch | Show/hide elements |
| Select | Dropdown selection | Layout style, alignment |
| Icon | Icon picker from built-in library | Feature icons |
| Repeater | Add/remove repeating items | Feature list, pricing plans |
Global Navbar & Footer
FlowPage Builder includes a global navbar and footer system. These sections are shared across all your FlowPage pages, so you only need to set them up once.
How Global Sections Work
- Global sections are stored separately from page sections using a WordPress option (
flowpage_globals) - The navbar is automatically prepended to the top of every page
- The footer is automatically appended to the bottom of every page
- In the editor sidebar, global sections are marked with a purple "GLOBAL" badge
- Changes to a global section apply to all pages that use FlowPage
Setting Up the Navbar
Open the Editor
Create or edit any FlowPage page. The global navbar section appears at the top of the sidebar.
Configure Navbar Fields
Edit the site name/logo, navigation links (repeater field), and optional CTA button. Toggle sticky navigation on or off.
Save
When you save the page, global sections are saved separately and automatically applied to all FlowPage pages.
Setting Up the Footer
The footer works identically to the navbar. Configure it from the bottom of the editor sidebar. Common footer fields include copyright text, social media links, and footer navigation columns.
Global sections (Navbar and Footer) are hidden from the section picker since they are always present on every page. You cannot add a second navbar or footer.
Templates
FlowPage Builder includes 6 professionally designed templates to help you get started quickly. Each template comes with pre-configured sections, colors, typography, and content tailored to a specific use case.
SaaS / Software
Hero, features, pricing, testimonials, FAQ, and CTA. Perfect for software products and digital services.
Corporate / Business
Professional layout with stats, team, services, and contact sections. Ideal for agencies and businesses.
Portfolio / Creative
Showcase-focused layout with image galleries, timeline, and video sections. Great for creatives and freelancers.
Restaurant / Food
Menu showcase, reservation CTA, image gallery, and testimonials. Designed for restaurants and food businesses.
Blog / Content
Content-first layout with blog grid, CTA, and newsletter sections. Perfect for writers and publishers.
E-Commerce
Product showcase, category grid, pricing, and CTA. Designed for WooCommerce-powered online stores.
Using a Template
During the setup wizard, after selecting your site type, you will see a template selection step. Choose a template to pre-populate your page with professionally designed sections. You can then customize every aspect of the template in the visual editor.
Templates are starting points, not rigid structures. After applying a template, you can add, remove, reorder, and customize any section. You can also change colors, fonts, and styling at any time.
Import / Export
FlowPage Builder supports exporting and importing pages as JSON files. This allows you to transfer page designs between WordPress installations or share them with clients.
Exporting a Page
Open My Pages
Navigate to FlowPage → My Pages to see your list of FlowPage pages.
Click Export
Click the Export button on the page card you want to export. A JSON file will be downloaded to your computer.
Importing a Page
Open My Pages
Navigate to FlowPage → My Pages.
Click Import
Click the Import Page button at the top. Select a previously exported JSON file. The page will be created with all sections, content, and styling intact.
What Gets Exported
The JSON export includes:
- All page sections with their content and settings
- Color palette and typography configuration
- Style settings (border radius, spacing)
- Page title and metadata
Images are exported as URLs. If you import a page on a different site, images pointing to the original domain may not load. Re-upload images via the WordPress Media Library after importing.
WooCommerce Integration
FlowPage Builder includes optional WooCommerce support for e-commerce websites. When WooCommerce is active, you gain access to additional section types designed for showcasing products and categories.
Available WooCommerce Sections
Product Showcase
Display featured products in an attractive grid with prices, ratings, and add-to-cart buttons.
Category Grid
Show product categories in a visual grid with category images and product counts.
Requirements
- WooCommerce plugin must be installed and activated
- At least one product or category must exist for sections to display content
- WooCommerce sections appear automatically in the section picker when WooCommerce is detected
WooCommerce integration is optional. If WooCommerce is not installed, FlowPage Builder will function normally without the WooCommerce section types. No errors will occur.
Responsive Preview
FlowPage Builder includes responsive preview modes so you can see exactly how your page will look on different devices before publishing.
Device Modes
| Mode | Viewport Width | Description |
|---|---|---|
| Desktop | Full width | Default view, matches typical desktop/laptop screens |
| Tablet | 768px | Simulates tablet devices in portrait orientation |
| Mobile | 375px | Simulates smartphone screens |
How to Use
In the editor toolbar, click the device icons to switch between viewport modes. The preview panel resizes to match the selected device. All FlowPage sections are fully responsive and adapt automatically to different screen sizes.
Always preview your page in all three modes before publishing. While FlowPage sections are responsive by design, your custom content (long text, large images) may need adjustment for optimal mobile display.
Settings
Access FlowPage settings from FlowPage → Settings in your WordPress admin menu.
General Settings
- License Key — Enter your Envato purchase code for updates and support
- Default Colors — Set default color palette for new pages
- Default Typography — Set default font pairing for new pages
- Custom CSS — Add global custom CSS that applies to all FlowPage pages
Performance
- Lazy Load Images — Enable native lazy loading for images in FlowPage sections
- Minify Output — Minify the HTML output of rendered pages for faster load times
Advanced
- Uninstall Data — Choose whether to remove all FlowPage data when the plugin is uninstalled
- Debug Mode — Enable debug logging for troubleshooting (not recommended for production)
License Activation
Activating your license ensures you receive automatic updates and access to premium support.
Finding Your Purchase Code
Log in to CodeCanyon
Visit codecanyon.net and sign in to your Envato account.
Go to Downloads
Click on your profile icon and select Downloads. Find FlowPage Builder in your downloads list.
Get License Certificate
Click Download → License certificate & purchase code. The purchase code is a unique string like xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.
Activating the License
Navigate to FlowPage → Settings → License. Paste your purchase code and click Activate. A green checkmark will confirm successful activation.
Each purchase code is valid for one WordPress installation. If you need to move your site to a new domain, deactivate the license on the old domain first, then activate it on the new one.
FAQ / Troubleshooting
Frequently Asked Questions
Does FlowPage Builder work with any WordPress theme?
Yes. FlowPage pages use their own full-page template that renders independently of your active theme. The pages will look consistent regardless of which theme you use.
Can I use FlowPage Builder alongside Elementor or Gutenberg?
Yes. FlowPage Builder operates independently and does not interfere with other page builders. You can use FlowPage for specific pages while using other builders for the rest of your site.
How many pages can I create?
There is no limit. You can create as many FlowPage pages as you need.
Does it affect my site's performance?
No. FlowPage Builder only loads its assets on FlowPage admin pages and the specific pages it renders. It does not add scripts or styles to your site globally.
Can I use custom fonts?
The current version includes a curated set of font pairings loaded locally. Custom font upload support is planned for a future update.
Does it support RTL languages?
RTL support is planned for a future release. Currently, FlowPage renders content in left-to-right direction.
Troubleshooting
The editor is not loading (blank screen)
- Check for JavaScript errors in the browser console (F12 → Console tab)
- Ensure no other plugins are causing JavaScript conflicts
- Try deactivating other plugins temporarily to identify conflicts
- Verify your PHP version is 7.4 or higher
REST API errors when saving
- Ensure your WordPress REST API is accessible (some security plugins block it)
- Check that your server allows PUT and DELETE HTTP methods
- If using .htaccess, ensure WordPress rewrite rules are present
- Navigate to Settings → Permalinks and click "Save Changes" to refresh rewrite rules
Page displays a 404 error
- Go to Settings → Permalinks and click "Save Changes" to flush rewrite rules
- Ensure the page is published (not draft)
- Clear any caching plugins or CDN cache
Images are not showing in the preview
- Ensure images are uploaded to the WordPress Media Library (not external URLs)
- Check file permissions on the
wp-content/uploadsdirectory - Clear your browser cache and try again
WooCommerce sections are not appearing
- Verify WooCommerce is installed and activated
- Create at least one product and one category
- Refresh the FlowPage editor page
Support
We are here to help you get the most out of FlowPage Builder. Here is how to reach us and get support.
Email Support
Send us an email at support@webkoding.com. We typically respond within 24 hours on business days.
CodeCanyon Comments
Post your question in the item comments section on CodeCanyon. This is great for general questions visible to all users.
Before Contacting Support
To help us resolve your issue quickly, please include the following information:
- Your WordPress version and PHP version
- The FlowPage Builder version (shown in the plugin header)
- A description of the issue and steps to reproduce it
- Any browser console errors (press F12 to open developer tools)
- Your site URL (if applicable)
- Screenshots or a short screen recording of the issue
What Is Covered by Support
| Included | Not Included |
|---|---|
| Bug fixes and issues | Custom development |
| Installation help | Third-party plugin conflicts |
| Feature questions | Server configuration |
| License activation | Theme customization |
| Update assistance | SEO and marketing |
Our support team is available Monday through Friday, 09:00 to 18:00 (UTC+3). We aim to respond to all inquiries within 24 business hours.