Recipe: Creating a Landing Page Builder

Prefer video? Watch the Field Forge tutorials 8 short guides covering every feature Watch

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

—