Skip to main content

Quick Start

This guide walks you through creating your first Flexible Content page rendered with Divi Handoff. By the end, you'll have a working page that displays dynamic content from SCF or ACF Pro fields using a reusable Divi layout.

Goal​

By the end of this guide, you'll have:

  • A Flexible Content field group with a "Hero Section" layout
  • A Divi Handoff Layout that renders the Hero Section
  • A page displaying your dynamic content through Divi Handoff

Time required: 15-20 minutes

Prerequisites​

Before starting, ensure you have:

  • Divi Handoff installed and activated (Installation Guide)
  • Divi 5 (Divi Theme) active
  • SCF (Secure Custom Fields) or ACF Pro installed and active
  • An active Divi Handoff license
Use Demo Content for Faster Setup

Click Import Demo Content in Divi Engine → Divi Handoff to instantly create sample field groups, layouts, and a demo page. This is the fastest way to see Divi Handoff in action.

Steps​

Step 1: Create a Flexible Content Field Group​

First, create the field structure that will hold your dynamic content.

  1. Go to SCF → Field Groups (or ACF → Field Groups if using ACF Pro)
  2. Click Add New
  3. Name the field group (e.g., "Page Sections")
  4. Set Location Rules to show when Post Type equals Page

Now add a Flexible Content field:

  1. Click Add Field
  2. Set Field Label to "Sections"
  3. Set Field Type to Flexible Content
  4. Set Field Name to sections (auto-generated)

Step 2: Create a Layout Within Flexible Content​

Within the Flexible Content field, create your first layout:

  1. Click Add Layout in the Flexible Content field
  2. Set Layout Label to "Hero Section"
  3. The Layout Name will auto-generate as hero_section

Add sub-fields to the layout:

  1. Click Add Sub Field and add these fields:
Field LabelField TypeField Name
HeadingTextheading
DescriptionTextareadescription
Background ImageImagebackground_image
  1. For the Background Image field, set Return Format to Image URL
  2. Click Publish to save the field group

Step 3: Create a Divi Handoff Layout​

Now create the Divi layout that will render your Hero Section.

  1. Go to Divi Handoff Layouts in the WordPress admin menu
  2. Click Add New
  3. Enter a title: "Hero Section Layout"
  4. Click Use Divi Builder to open the Divi 5 Visual Builder

Step 4: Build the Layout with Handoff Modules​

In the Divi Builder, create your hero section design:

  1. Add a Section
  2. Add a Row with a single column
  3. Add a Handoff Text module for the heading:
    • In module settings, find Main → SCF/ACF Field
    • Select Sections - Hero Section - Heading from the dropdown
    • Style the text as an H1 heading
  4. Add another Handoff Text module for the description:
    • Set Main → SCF/ACF Field to Sections - Hero Section - Description
    • Style as body text

Set Dynamic Background​

  1. Select the Section element
  2. Go to Design → Background
  3. Find Background from SCF / ACF Pro Layout Field
  4. Select background_image

This pulls the background image dynamically from the Flexible Content sub-field.

Step 5: Map the Layout to the Flexible Content Layout​

Connect your Divi layout to the SCF/ACF layout:

  1. Save and exit the Divi Builder
  2. In the WordPress editor, find the Divi Handoff Layout Mapping meta box on the right sidebar
  3. Under Flexible Content Layout, select Hero Section (the layout you created in Step 2)
  4. Click Update to save the layout

Step 6: Create a Page with Flexible Content​

Now create a page and add content:

  1. Go to Pages → Add New
  2. Enter a page title: "Welcome"
  3. Scroll down to find the Sections Flexible Content field (from Step 1)
  4. Click Add Row and select Hero Section
  5. Fill in the fields:
    • Heading: "Welcome to Our Website"
    • Description: "Discover what makes us unique."
    • Background Image: Upload or select an image

Step 7: Enable Divi Handoff on the Page​

Enable Divi Handoff to render your Flexible Content:

  1. Find the Divi Handoff Setting meta box on the right sidebar
  2. Check Enable Divi Handoff on this page
  3. In the Flexible Content area, locate the layout dropdown next to your Hero Section row
  4. Select Hero Section Layout (the Divi Handoff Layout you created)
  5. Click Publish to save the page

Step 8: View Your Page​

  1. Click View Page or visit the page on the frontend
  2. Your Hero Section displays with:
    • The heading and description you entered
    • The background image from the Flexible Content field

Verification​

Your quick start is successful if:

  • ✅ The page displays the Hero Section layout
  • ✅ The heading shows "Welcome to Our Website"
  • ✅ The description shows below the heading
  • ✅ The background image appears behind the section

If the layout doesn't display, check:

  • Enable Divi Handoff on this page is checked
  • A Divi Handoff Layout is selected for the Flexible Content row
  • The Divi Handoff Layout is mapped to the correct Flexible Content layout

Next Steps​

Now that you've created your first Divi Handoff page:

  • Add more layouts: Create additional Flexible Content layouts (e.g., "Features", "Testimonial") and corresponding Divi Handoff Layouts
  • Use the Handoff Repeater module: Display lists of items like team members or features
  • Add conditional visibility: Show or hide modules based on field values
  • Explore all four Handoff modules: Text, Image, Video, and Repeater

What's Next​