Skip to main content

Creating Handoff Layouts

Divi Handoff Layouts are the visual templates that render your SCF or ACF Pro Flexible Content. Each layout is built using the Divi Visual Builder and mapped to a specific Flexible Content layout type.

What is a Divi Handoff Layout​

A Divi Handoff Layout is a custom post type (divi_handoff_layout) that serves as a reusable visual template. When a page displays Flexible Content, Divi Handoff uses these layouts to render the content.

Key characteristics:

  • Built using the Divi 5 Visual Builder
  • Mapped to one SCF/ACF Flexible Content layout
  • Multiple Handoff Layouts can map to the same Flexible Content layout (giving you design options)
  • Uses Handoff modules or standard Divi modules with Dynamic Content

Prerequisites​

Before creating a Handoff Layout:

  • Divi Handoff is installed and activated
  • SCF or ACF Pro is installed with at least one Flexible Content field group
  • At least one layout is defined in your Flexible Content field
tip

If you haven't created field groups yet, see Creating SCF Field Groups or Creating ACF Field Groups first.

Step-by-Step: Create a Handoff Layout​

Step 1: Access Divi Handoff Layouts​

  1. Go to Divi Handoff Layouts in the WordPress admin menu
  2. Click Add New

Step 2: Enter a Layout Title​

Give your layout a descriptive name that indicates:

  • What Flexible Content layout it renders
  • The visual style (if you have multiple layouts for the same content type)

Examples:

  • "Hero Section - Full Width"
  • "Team Member - Card Style"
  • "Testimonial - Centered Quote"

Step 3: Map to a Flexible Content Layout​

In the Divi Handoff Layout Mapping meta box (sidebar):

  1. Find the Flexible Content Layout dropdown
  2. Select the SCF/ACF layout this Handoff Layout should render
  3. The dropdown shows all available layouts from your field groups
note

You can create multiple Handoff Layouts mapped to the same Flexible Content layout. When building a page, you choose which visual layout to use for each content row.

Step 4: Open the Divi Visual Builder​

  1. Click Edit with Divi Builder (or Use Divi Builder button)
  2. The Divi 5 Visual Builder opens
  3. Start building your layout with sections, rows, and modules

Step 5: Add Handoff Modules​

Divi Handoff provides four specialized modules that automatically bind to your Flexible Content sub-fields:

ModuleUse For
Handoff TextText content (headings, paragraphs, descriptions)
Handoff ImageImage fields
Handoff VideoVideo URLs or embedded video
Handoff RepeaterLooping through repeater sub-fields

To add a Handoff module:

  1. Click the + button to add a module
  2. Search for "Handoff" or find them in the module list
  3. Add the module to your layout

Step 6: Configure Module Field Binding​

For each Handoff module, bind it to a sub-field from your Flexible Content layout:

  1. Select the module
  2. In the Content tab, find SCF/ACF Field
  3. Select the sub-field to display

The dropdown shows all sub-fields available in the mapped Flexible Content layout.

Example - Handoff Text module:

  • SCF/ACF Field: Select hero_title to display the title field
  • HTML Tag: Choose h1 for semantic heading markup

Example - Handoff Image module:

  • SCF/ACF Field: Select hero_image to display the image field

Step 7: Style Your Layout​

Use all standard Divi design options to style your layout:

  • Typography settings (fonts, sizes, colors)
  • Spacing (padding, margin)
  • Background colors and images
  • Borders and shadows
  • Animations and effects

The layout you design becomes the visual template for all pages using this Flexible Content layout.

Step 8: Publish the Layout​

  1. Click Save in the Divi Builder
  2. Exit the Visual Builder
  3. Click Publish to make the layout available

Using Standard Divi Modules with Dynamic Content​

You can also use standard Divi modules (not Handoff-specific) with Dynamic Content:

Step 1: Add a Standard Divi Module​

Add any Divi module (Text, Image, Button, etc.)

Step 2: Enable Dynamic Content​

  1. Find the field you want to populate (e.g., Text field in a Text module)
  2. Click the Dynamic Content icon (database/cylinder icon)
  3. Select SCF / ACF Pro Flexible Content Fields
  4. Choose the sub-field from your layout

This method works for any Divi module field that supports Dynamic Content.

Adding Conditional Visibility​

Show or hide modules based on field values:

For Sections, Rows, and Columns​

Divi Handoff adds settings to standard Divi layout elements:

  1. Select the section, row, or column
  2. Find Divi Handoff Settings in the Content tab
  3. Set Condition Field to a sub-field name
  4. Set Condition Value to the expected value
  5. The element only displays when the field matches the value

Example use cases:

Condition FieldCondition ValueResult
is_featured1Show only for featured items
show_videoyesShow only when video is enabled
member_typeexecutiveShow only for executive team members

For Handoff Modules​

Handoff modules include built-in conditional visibility in their Advanced settings.

Adding Dynamic Backgrounds​

Set section, row, or column backgrounds from Flexible Content fields:

Method 1: Background from Layout Field​

  1. Select the section, row, or column
  2. Find Divi Handoff Settings in the Content tab
  3. Find Background from SCF/ACF Pro Layout Field
  4. Select a sub-field

How it works:

  • If the field value is an image URL → sets as background image
  • If the field value is a color (hex code) → sets as background color

Method 2: Dynamic Content for Background​

  1. Go to the element's Design tab
  2. Find Background settings
  3. Click the Dynamic Content icon on the image or color field
  4. Select the sub-field

Best Practices​

Layout Organization​

  • Use clear, descriptive names for layouts
  • Include the content type and style variation in the name
  • Keep layouts focused on one content type

Field Binding​

  • Test field bindings with actual content before publishing
  • Use appropriate HTML tags for text (h1, h2, p, etc.)
  • Set alt text for images (can also be dynamic)

Reusability​

  • Design layouts to be flexible enough for various content
  • Use relative sizing (%, vw) rather than fixed pixels where appropriate
  • Test layouts with different content lengths

Performance​

  • Optimize images at the field level (SCF/ACF settings)
  • Don't over-complicate layouts with too many nested elements
  • Use the Repeater module for lists rather than duplicating modules

Troubleshooting​

Layout Not Appearing on Page​

  1. Verify the layout is Published (not Draft)
  2. Confirm the layout is mapped to a Flexible Content layout
  3. Check that Enable Divi Handoff is checked on the page
  4. Ensure a Divi Handoff Layout is selected for the Flexible Content row

Fields Not Displaying​

  1. Verify the correct sub-field is selected in the module
  2. Confirm the field has content on the page
  3. Check for typos in field names (case-sensitive)

Conditional Visibility Not Working​

  1. Verify the condition field name matches exactly
  2. Check the condition value matches the expected field value
  3. For checkboxes/toggles, use 1 for true, empty for false

What's Next​