Flexible Content — Building Page Sections (PRO) | Field Forge - Custom Fields, Built for Speed
Download Log in

Flexible Content — Building Page Sections (PRO)

User Guide

Flexible Content is the most powerful field type in Field Forge. It turns your WordPress editor into a simplified page builder by letting content managers choose from a set of pre-defined section types and arrange them in any order. Each section type (called a “layout”) has its own set of fields, and editors mix and match layouts to create unique pages without writing code or touching design tools.

Think of it this way: your developer designs the section templates (Hero Banner, Features Grid, Testimonials, CTA, etc.) and defines what content each one needs. Your content team then assembles pages by picking which sections to include and filling in the content. Every page can have a different combination and order of sections.

How Flexible Content Differs from Repeaters and Groups

FeatureGroupRepeaterFlexible Content
Number of instancesAlways 1Multiple rows, all identicalMultiple sections, each can be different
Sub-field structureOne fixed setOne fixed set per rowDifferent set for each layout type
Editor adds moreNoYes — adds identical rowsYes — chooses which layout to add
Best analogyA single formA spreadsheet (same columns)A page builder (different section types)

Step-by-Step: Building a Complete Landing Page Builder

The scenario: You manage marketing for a SaaS company. Your marketing team needs to create landing pages for campaigns, product launches, and webinars. Each landing page has a different structure — some start with a hero and end with a CTA, others have testimonials followed by a features grid followed by a pricing table. You need to give marketers the flexibility to build whatever they need without involving a developer each time.

Here is how to build a Flexible Content field with five layout types:

#### Creating the Field Group

  1. Go to Field Forge > New Field Group
  2. Enter the title: Landing Page Builder
  3. Click Add Field, choose Flexible Content (under Compound Fields, PRO)
  4. Configure:
Label: Page Sections

Name: page_sections

Instructions: Build your page by adding sections below. Drag to reorder. Each section type has its own set of fields.

Button Label: “Add Section” (customizes the default “Add Layout” button text)

#### Layout 1: Hero Banner

  1. Inside the Flexible Content settings, click Add Layout
  2. Name it: Hero Banner
  3. Set the Display: Block
  4. Add sub-fields:
– Headline (text) — Required: Yes, Wrapper: 100%

– Subtitle (textarea) — Rows: 2, Wrapper: 100%

– Background Image (image) — Instructions: “Upload a high-resolution image (1920×1080 minimum),” Wrapper: 50%

– Background Overlay (select: None, Light, Dark) — Wrapper: 50%

– Button Text (text) — Placeholder: “Get Started”, Wrapper: 50%

– Button URL (url) — Wrapper: 50%

#### Layout 2: Features Grid

  1. Click Add Layout again
  2. Name it: Features Grid
  3. Add sub-fields:
– Section Title (text) — Required: Yes, Wrapper: 100%

– Section Subtitle (textarea) — Wrapper: 100%

– Columns (select: 2 Columns, 3 Columns, 4 Columns) — Default: 3 Columns, Wrapper: 50%

– Features (repeater) — with sub-fields:

– Icon (image) — Wrapper: 20%

– Feature Title (text) — Wrapper: 40%

– Feature Description (textarea) — Rows: 2, Wrapper: 40%

#### Layout 3: Testimonials Carousel

  1. Click Add Layout again
  2. Name it: Testimonials
  3. Add sub-fields:
– Section Title (text) — Default: “What Our Customers Say”, Wrapper: 100%

– Background Color (color picker) — Wrapper: 50%

– Quotes (repeater) — Minimum Rows: 2, with sub-fields:

– Quote Text (textarea) — Required: Yes, Wrapper: 100%

– Author Name (text) — Required: Yes, Wrapper: 33%

– Author Title (text) — Placeholder: “CEO, Acme Corp”, Wrapper: 33%

– Author Photo (image) — Wrapper: 34%

#### Layout 4: Video Section

  1. Click Add Layout again
  2. Name it: Video Section
  3. Add sub-fields:
– Section Title (text) — Wrapper: 100%

– Video URL (oembed) — Instructions: “Paste a YouTube or Vimeo URL”, Wrapper: 100%

– Caption (text) — Wrapper: 100%

– Show Play Button Overlay (true/false) — Default: Yes, Wrapper: 50%

#### Layout 5: Call to Action Banner

  1. Click Add Layout again
  2. Name it: Call to Action
  3. Add sub-fields:
– Heading (text) — Required: Yes, Placeholder: “Ready to get started?”, Wrapper: 100%

– Description (textarea) — Rows: 2, Wrapper: 100%

– Button Text (text) — Required: Yes, Placeholder: “Start Free Trial”, Wrapper: 33%

– Button URL (url) — Required: Yes, Wrapper: 34%

– Background Color (color picker) — Wrapper: 33%

#### Setting Location Rules and Saving

  1. Scroll down to Location Rules
  2. Set: Page Template is equal to Landing Page
  3. Click Save Field Group

[Screenshot: the Flexible Content field editor showing five collapsed layouts — Hero Banner, Features Grid, Testimonials, Video Section, and Call to Action — each with a layout name and field count]

How Editors Build a Landing Page

Here is what a marketing team member does when creating a new campaign landing page:

  1. Create a new Page and select the “Landing Page” template
  2. Scroll down to the “Landing Page Builder” metabox
  3. Click Add Section — a dropdown shows all five section types
  4. Select Hero Banner — the hero fields appear in an expandable card
  5. Fill in the headline (“Transform Your Workflow”), subtitle, upload a background image, set the overlay to Dark, enter button text and URL
  6. Click Add Section again, select Features Grid
  7. Enter the section title (“Why Teams Choose Us”), select 3 Columns, then use the Features repeater to add feature cards with icons, titles, and descriptions
  8. Click Add Section, select Testimonials
  9. Add 3-4 customer quotes with names, titles, and photos
  10. Click Add Section, select Video Section
  11. Paste a YouTube URL for a product demo video, add a caption
  12. Click Add Section, select Call to Action
  13. Enter the CTA heading (“Start Your Free Trial Today”), description, button text, URL, and pick a brand color for the background
  14. Review the page structure — 5 sections are now listed vertically
  15. Drag the Video Section above the Testimonials if it makes more sense that way
  16. Click Update to save

The page now has five distinct sections, each fully customized, in whatever order the editor chose.

Managing Sections in the Editor

ActionHow To Do It
Add a new sectionClick Add Section and choose a section type from the dropdown
Reorder sectionsDrag a section by its header bar to move it up or down
Duplicate a sectionClick the duplicate icon on the section header (useful for creating similar sections quickly)
Remove a sectionClick the X button on the section header — the section and its data are removed
Collapse a sectionClick the section header to toggle it open or closed (keeps the screen manageable)
Add the same type twiceChoose the same layout again — there is no limit. Two Hero Banners or three CTAs are perfectly valid

Layout Limits

You can set minimum and maximum limits for each layout type:

SettingExamplePurpose
Minimum for Hero Banner: 1Every landing page must have at least one heroEnsures consistency
Maximum for Hero Banner: 1Cannot add two heroes (would look strange)Prevents mistakes
Maximum for Call to Action: 2At most two CTAs per pageKeeps pages focused
No limits on Features GridEditors can add as many feature sections as neededMaximum flexibility

Tips for Effective Flexible Content Design

  • Start with 4-6 layouts. Too many choices overwhelm editors. You can always add more later.
  • Name layouts clearly. Editors see these names in the dropdown. “Hero Banner” is better than “Layout 1.”
  • Customize the button text. Change “Add Layout” to “Add Section” or “Add Block” — it reads more naturally.
  • Use layout descriptions. Each layout can have a short description that appears in the dropdown to help editors choose.
  • Include a screenshot or mockup description in the layout instructions so editors know what the section will look like on the website.
  • Set sensible defaults. If most CTAs use the same background color, set it as the default value so editors only change it when they want something different.

> What happens without PRO: Flexible Content is exclusively a PRO feature. Without it, you would need separate field groups for each section type and rely on your developer to hardcode the page structure. Editors cannot mix-and-match sections or control their order. Flexible Content is the single most impactful PRO feature for content teams that build landing pages.

> Good to know: Flexible Content layouts can contain any field type, including Repeaters and Groups. A “Testimonials” layout can have a Repeater inside it for multiple quotes. A “Hero Banner” layout can have a Group for “Button Settings” with text, URL, and color. The nesting possibilities let you model very complex page structures while keeping the editing experience organized.

> Common mistake: Creating too many layouts at once. Start with 4-5 that your team will actually use. After a month, ask your editors which section types they wish they had, and add those. Building 15 layouts on day one means most will go unused and clutter the dropdown.

Forge AI Assistant Online

Hi! I'm the Field Forge AI assistant. Ask me anything about the plugin — setup, features, troubleshooting, or development.

Just now
Powered by Forge AI · Browse docs