Visual Page Builder
The Flavor Starter Theme includes a built-in page builder for designing custom layouts without writing any code. You add ready-made blocks to a page, arrange them into columns and sections, and style each one from a settings panel.
The builder works on Pages. Everything below is included with the theme — there is nothing extra to install.
Choosing your builder
The theme comes with two separate page builders. You pick which one to use under Appearance → Flavor Options → Design System → Builder Mode:
- Classic Builder (the default) — a panel-based editor, similar in style to WPBakery. You work with a settings panel alongside a clear outline of your page's structure. It's the familiar WordPress workflow, and it's stable and well-suited to live sites.
- Visual Builder (newer, still in development) — a drag-and-drop editor with a real-time preview, similar in style to Elementor. You see your changes live as you make them.
The Visual Builder is newer and still being refined — the theme marks it "Under development." It's great to explore, but for a live store we recommend the Classic Builder, and trying the Visual Builder on a staging or test site first.
Which builder should I use?
- Building or updating a live site? Use the Classic Builder. It's the default, it's stable, and it's the most familiar.
- Want the modern drag-and-drop experience? Try the Visual Builder — ideally on a test/staging site while it continues to mature.
You can change your choice at any time from Builder Mode, and your pages carry over between the two (see the next section).
Switching between builders
Both builders save your layout in the same format, so a page you built in one opens in the other and your content carries over. You can switch Builder Mode whenever you like without rebuilding your pages.
There is one thing to know when moving from Classic to the Visual Builder:
The Visual Builder doesn't use the standalone Container block — in it, container settings (width and alignment) are built directly into each Section. If a page uses standalone Container blocks, they're automatically converted to Sections when you switch to the Visual Builder. Your content stays intact.
Opening the builder
- Go to Pages and open (or create) the page you want to design.
- In the Page Builder panel, turn on Enable Page Builder. This replaces the page's normal content with your builder layout.
- Build your layout:
- With the Classic Builder, add and edit blocks right there in the panel.
- With the Visual Builder, click Edit with Visual Builder to open the full-screen drag-and-drop editor. (Save the page once first if the button asks you to.)
From the Pages list you can also hover any page and click Edit with Builder to jump straight in.
Adding and arranging blocks
- Click Add block and pick one from the library. Blocks are grouped into Layout, Content, Media, Hero, and Marketing so they're easy to find.
- Start with a Section to create a row, choose how many columns it has, then drop other blocks into each column.
- Drag blocks to reorder them, and drag them between columns to rearrange your layout.
- Select any block to open its settings on the side.
The block library
Both builders share the same library of more than 45 blocks across five groups.
Layout
Structure and framing for your page.
| Block | What it does |
|---|---|
| Section | A full-width row with 1–4 columns (or 2/3 + 1/3 splits), background colour or image, spacing, and content width. The starting point for most layouts. |
| Spacer | Adds adjustable vertical space between blocks. |
| Divider | A horizontal line — choose the style, width, thickness, and colour. |
| Video Background | A section with a looping video playing behind your content. |
| Popup | Shows content in a pop-up window, triggered on the page. |
Content
Text, buttons, and the rich content blocks that make up most of a page.
| Block | What it does |
|---|---|
| Heading | A heading (H1–H4) with alignment and colour. |
| Text | A formatted paragraph / rich-text block. |
| Image | A single image with alignment, size, and rounded-corner options. |
| Button | A call-to-action button with a link, style, and size. |
| Alert / Notice | A coloured info, success, warning, or error message box. |
| Star Rating | A star rating you can show anywhere. |
| Countdown | A live countdown timer to a date you set. |
| Before / After | Two images side by side to compare a before and after. |
| Accordion | Expandable rows — ideal for an FAQ. |
| Tabs | Content split across tabbed panels. |
| Counter | An animated number that counts up — good for stats. |
| Progress Bar | Labelled progress or skill bars. |
| Icon Box | An icon with a heading and short text — a feature highlight. |
| Table | A simple data table. |
| Gallery | A grid of images. |
| Testimonials | Customer quotes with a photo, name, and rating. |
| Team Members | Profile cards for your team. |
| Trust Badges | Guarantee, security, or payment badges. |
| Shortcode | Outputs any WordPress shortcode. |
| Raw HTML | Inserts your own custom HTML. |
| Post Grid | A grid of your latest blog posts. |
| Query Loop | A repeating list of posts (or products) in a layout you choose. |
| Post Title, Post Body, Post Meta, Post Thumbnail, Post Comments | Dynamic blocks that pull in the current post's title, content, author/date details, featured image, and comments. See the note below. |
| Archive Title, Archive Description | Dynamic blocks that show the title and description of the current category or archive. See the note below. |
Media
| Block | What it does |
|---|---|
| Video | Embeds a YouTube, Vimeo, or self-hosted video. |
| Lottie Animation | A lightweight, scalable animated illustration. |
| Map | An embedded map. |
| Logo Carousel | A scrolling row of logos — great for partners or brands. |
| Image Grid | A grid or mosaic of images. |
Hero
| Block | What it does |
|---|---|
| Hero Slider | A large, full-width image-and-text slider for the top of a page. |
Marketing
| Block | What it does |
|---|---|
| Newsletter | An email sign-up form. |
| Pricing Table | Side-by-side pricing plans with a highlighted option. |
| Social Icons | Links to your social media profiles. |
| Info Banner | An announcement or promo banner. |
| Sale Banner | A promotional sale banner. |
| Product Grid | A grid or carousel of your store's products — choose the source (newest, featured, on sale, best sellers, a category, or hand-picked products), the number to show, and the columns. |
| Product Categories | A showcase of your store's product categories. |
Product Grid and Product Categories display products from your store, so they need the WP eCommerce Core Plugin active. If no products appear, add some products first.
The Post and Archive blocks show content that changes automatically — for example, the current article's title or a category's description. They're mainly used when designing reusable templates. On a normal page they simply show that page's own details.
Block settings
Select any block to open its settings, organised into tabs:
- Content — the block's own text, images, links, and options.
- Style — colours, spacing, borders, and alignment. Colours you've defined under Design System appear as ready-to-click swatches in every colour picker.
- Animation — have the block fade or slide in as the visitor scrolls, with an adjustable speed and delay.
- Hover — an effect when a visitor's mouse is over the block.
- Scroll — a subtle movement effect as the page scrolls.
- Advanced — apply one of your saved Design System classes, add a custom CSS class, or add custom CSS for that block.
Design System classes (set under Appearance → Flavor Options → Design System) let you reuse the same styling across many blocks. Change the class once and every block using it updates instantly.
Responsive design
Every block is responsive by default. You can also fine-tune how each one behaves on different screen sizes:
- Hide on device — hide a block on desktop, tablet, or mobile.
- Reorder on device — change the order blocks appear in on tablet and mobile.
- Column stacking — Section columns automatically stack on smaller screens.
The screen widths that count as desktop, tablet, and mobile are set under Appearance → Flavor Options → Design System, and apply everywhere on your site.
Saving, previewing, and publishing
Your builder layout is saved together with the page:
- Classic Builder — save the page with the usual WordPress Save draft, Preview, and Publish / Update buttons.
- Visual Builder — use the Save button in the full-screen editor to store your work, and Preview to see the page before it goes live. When you're ready, Publish or Update the page as normal.
Turning Enable Page Builder off again restores the page's original content — your builder layout is kept, so you can switch back later.