Recipe: Creating a Landing Page Builder | Field Forge

This recipe shows how to use Flexible Content to give content managers the power to build custom landing pages by choosing, ordering, and filling in pre-designed sections.

Step 1: Create the Flexible Content Field Group

Go to Field Forge > New Field Group
Title it Landing Page Builder
Add a Flexible Content field (PRO) labeled Page Sections with name page_sections
Set the Button Label to Add Section (this customizes the button text editors see)

Step 2: Define the Layouts

Add the following layouts to the Flexible Content field:

Layout 1: Hero Section

Sub-field	Type	Settings
Headline	Text	Required: Yes, Placeholder: “Your main headline here”
Subheadline	Textarea	Rows: 2
Background Image	Image	Required: Yes, Instructions: “Use 1920×1080 minimum”
Button Text	Text	Default: “Get Started”
Button URL	URL	Required: Yes
Button Style	Button Group	Choices: Primary, Secondary, Outline

Layout 2: Features Grid

Sub-field	Type	Settings
Section Title	Text	Placeholder: “Why Choose Us”
Section Subtitle	Textarea	Rows: 2
Features	Repeater	Sub-fields: Icon (Image), Title (Text, Required), Description (Textarea)
Columns	Button Group	Choices: 2 Columns, 3 Columns, 4 Columns

Layout 3: Testimonials

Sub-field	Type	Settings
Section Title	Text	Default: “What Our Customers Say”
Testimonials	Repeater	Sub-fields: Quote (Textarea, Required), Author Name (Text), Author Photo (Image), Company (Text), Rating (Number, Min: 1, Max: 5)
Display Style	Button Group	Choices: Carousel, Grid, Stacked

Layout 4: Call to Action

Sub-field	Type	Settings
Heading	Text	Required: Yes
Description	Textarea	Rows: 3
Button Text	Text	Default: “Start Now”
Button URL	URL	Required: Yes
Background Color	Color Picker	Default: #1a73e8
Text Color	Color Picker	Default: #ffffff

Layout 5: FAQ Section

Sub-field	Type	Settings
Section Title	Text	Default: “Frequently Asked Questions”
Questions	Repeater	Sub-fields: Question (Text, Required), Answer (Textarea, Required)
Display Style	Button Group	Choices: Accordion, Two Column, Stacked

Layout 6: Pricing Table

Sub-field	Type	Settings
Section Title	Text	Default: “Choose Your Plan”
Plans	Repeater	Sub-fields: Plan Name (Text, Required), Price (Text), Billing Period (Select: Monthly/Yearly), Features (Textarea), Button Text (Text), Button URL (URL), Highlighted (True/False)
Show Toggle	True/False	Label: “Show monthly/yearly toggle”

Step 3: Set Location Rules

Set: Page Template is equal to Landing Page (you need a Landing Page template in your theme)
Alternatively, target a specific page or post type
Save the field group

Step 4: How Content Managers Build a Landing Page

Create a new Page and select the “Landing Page” template
Scroll to the “Landing Page Builder” metabox
Click Add Section and choose Hero Section
Enter the headline, subheadline, upload a background image, and set the button text and link
Click Add Section again, choose Features Grid
Add a section title and create feature items with icons, titles, and descriptions
Choose the number of columns (3 is most common)
Continue adding sections: Testimonials, Pricing Table, FAQ Section, Call to Action
Drag sections to reorder — typically: Hero at top, CTA at bottom, supporting content in between
Click Publish or Update

Tips for Effective Landing Pages

Start with a Hero: Every landing page should begin with a clear headline and a strong call-to-action button
Limit to 4-6 sections: Too many sections create a long, unfocused page. Each section should serve a purpose
Social proof early: Place Testimonials or a stats section near the top to build trust before asking for action
One primary CTA: The page should guide visitors toward a single primary action. Use the same button URL across Hero and CTA sections
End with a CTA: Always close the page with a Call to Action section so visitors who scrolled the entire page have a clear next step
Test on mobile: Ask your developer to verify the layout looks good on phones. Most landing page traffic comes from mobile devices

—