Skip to main content

Visual Page Builder

The Flavor Starter Theme includes a built-in Visual Page Builder for creating custom page layouts without coding.

Accessing the Builder​

  1. Create or edit a page in WordPress
  2. Select the "Flavor Builder" page template
  3. Click "Open Page Builder" in the editor

Available Blocks​

Layout Blocks​

  • Section — Full-width container with background options
  • Columns — 2, 3, or 4 column layouts
  • Spacer — Vertical spacing

Content Blocks​

  • Heading — H1–H6 with styling options
  • Text — Rich text with formatting
  • Image — Single image with caption
  • Button — CTA buttons with link and style options
  • Icon — Icon selection from built-in library

eCommerce Blocks​

  • Product Grid — Display products in a grid layout
  • Featured Product — Highlight a single product
  • Category List — Product category navigation
  • Cart Button — Add-to-cart button for a specific product

Dynamic Blocks​

  • Recent Products — Auto-updated product list
  • Sale Products — Products currently on sale
  • Best Sellers — Top-selling products

Block Settings​

Each block has configurable options:

  • Content — The block's main content and text
  • Style — Colors, fonts, spacing, borders
  • Advanced — CSS classes, visibility conditions, responsive settings

Responsive Design​

All blocks are responsive by default. You can also:

  • Hide blocks on specific devices (desktop/tablet/mobile)
  • Set different column layouts per breakpoint
  • Adjust spacing per device size

Saving and Publishing​

  • Save Draft — Save progress without publishing
  • Preview — Preview the page before publishing
  • Publish — Make the page live
caution

The Page Builder uses React for rendering. Make sure your theme's React app is built (npm run build in react-app/) for production use.