Skip to main content

Handoff Repeater Module

The Handoff Repeater module loops through repeater sub-fields within your Flexible Content layouts, rendering each row using a selected Divi Handoff Layout. Display items as a responsive grid or an interactive slider carousel.

Purpose and When to Use​

Use the Handoff Repeater module when you need to:

  • Display a list of items stored in an SCF/ACF repeater field
  • Create team member grids
  • Build feature/service lists
  • Display testimonial carousels
  • Create image galleries
  • Show pricing tables with multiple items
  • Render any collection of structured data from your Flexible Content layouts

The Repeater module creates a nested context, meaning modules inside the repeater layout can access fields from each individual repeater row.

Compatibility and Performance Notes​

  • Divi Version: Divi 5 or higher required
  • Field Plugins: SCF (Secure Custom Fields) or ACF Pro
  • Slider Library: Uses Slick.js for carousel functionality
  • Performance: Grid layout renders all items; slider lazy-loads for better performance with many items

Add to Page​

  1. Open the Divi Handoff Layout editor
  2. Add a Handoff Repeater module from the module library (under Divi Handoff category)
  3. In Content → Main, select your repeater field from SCF/ACF Pro Field
  4. Select the Card Layout (a Divi Handoff Layout) to use for each item
  5. Configure Layout Settings in the Design tab (Grid or Slider)
  6. Save and preview your page

Content Settings​

Main Settings​

SettingTypeDefaultDescription
SCF/ACF Pro FieldSelectnoneSelect the repeater field from your Flexible Content layout. Only repeater-type fields appear in this list.
Card LayoutSelectnoneChoose which Divi Handoff Layout to use for rendering each repeater row. The selected layout has access to all sub-fields within each row.

Background​

Standard Divi background options are available for the module container, including:

  • Background color
  • Background gradient
  • Background image
  • Background video

Design Settings​

Layout Style​

Choose between Grid and Slider display modes. Each mode has its own configuration options.

SettingTypeDefaultDescription
Layout StyleSelectgridChoose how repeater items should be displayed. Grid creates a structured multi-column layout. Slider creates an interactive carousel.

Grid Layout Settings​

When Layout Style is set to Grid, these settings become available:

SettingTypeDefaultRangeDescription
Column CountRange31-6Number of columns in the grid. Responsive settings allow different columns per device.
Item CountRange00-100Maximum number of repeater items to display in the grid. Set to 0 to show all items.
Horizontal GapRange20px0-100Horizontal spacing between grid items. Supports px, %, em, rem, and other CSS units.
Vertical GapRange20px0-100Vertical spacing between grid rows. Supports px, %, em, rem, and other CSS units.
Equal HeightToggleoff-When enabled, all grid items stretch to match the height of the tallest item in each row.

Grid Layout Tips​

  • Use 3-4 columns for team grids on desktop
  • Set 1 column on mobile for better readability
  • Equal Height works best when card layouts have variable content lengths
  • Combine Horizontal Gap and Vertical Gap for consistent spacing

Slider Layout Settings​

When Layout Style is set to Slider, these settings become available:

Core Slider Settings​

SettingTypeDefaultRangeDescription
Column CountRange11-6Number of slides visible at once. Use higher values for carousel-style displays.
Column SpacingRange0px0-200Spacing between slides in the carousel.
Equal HeightToggleoff-When enabled, all slides stretch to match the height of the tallest slide.
Auto PlayToggleoff-Automatically advance slides without user interaction.
Slide Speed (ms)Text3000-Duration between automatic slide transitions in milliseconds. Only applies when Auto Play is enabled.

Slider Elements​

SettingTypeDefaultDescription
Show ArrowsToggleoffDisplay previous/next navigation arrows on the slider.
Previous Arrow IconIcon Picker-Custom icon for the previous slide arrow. Appears when Show Arrows is enabled.
Next Arrow IconIcon Picker-Custom icon for the next slide arrow. Appears when Show Arrows is enabled.
Arrow Icon SizeRange24pxSize of the navigation arrow icons.
Arrow Icon OffsetRange20pxHorizontal offset of arrows from the slider edges. Negative values move arrows inward.
Show ControlsToggleoffDisplay dot navigation at the bottom of the slider.
Control TypeSelectcircleShape of navigation dots. Options: Circle or Square.
Show Control NumberToggleoffDisplay slide numbers on navigation dots.
Dot SizeRange14pxSize of the navigation dots.

Slider Navigation Styling​

SettingTypeDefaultDescription
Arrow ColorColor-Color of the navigation arrow icons.
Arrow Background ColorColor#0091eaBackground color of the arrow button containers.
Dot Navigation ColorColor#0091eaColor of the navigation dots. Active dot uses this color at full opacity.
Dot Navigation OffsetRange10pxVertical offset of dot navigation from the slider bottom.
Dot Navigation AlignmentSelectcenterHorizontal alignment of navigation dots. Options: Left, Center, or Right.

Slider Tips​

  • Set Column Count to 3-4 for a multi-item carousel
  • Enable Auto Play for testimonial sliders
  • Use Show Controls for user-controlled navigation
  • Combine Arrows and Dots for maximum accessibility

Advanced Settings​

Standard Divi advanced settings are available:

  • Visibility Settings - Show/hide on specific devices
  • Transition - Animation timing and effects
  • Position - CSS positioning options
  • Scroll Effects - Parallax and scroll-based animations

Examples and Common Patterns​

Example 1: Team Member Grid​

Create a 3-column team grid:

  1. Create a Team Member repeater field with sub-fields: photo, name, title, bio
  2. Create a Divi Handoff Layout called "Team Card" with Handoff Image and Handoff Text modules
  3. Add Handoff Repeater to your page layout
  4. Select the repeater field and Team Card layout
  5. Set Layout Style to Grid, Column Count to 3
  6. Set Horizontal Gap and Vertical Gap to 30px

Create an auto-playing testimonial slider:

  1. Create a Testimonials repeater with sub-fields: quote, author, company, avatar
  2. Create a "Testimonial Card" Divi Handoff Layout
  3. Add Handoff Repeater module
  4. Set Layout Style to Slider
  5. Enable Auto Play with 5000ms duration
  6. Enable Show Controls for dot navigation
  7. Set Dot Navigation Alignment to center

Example 3: Feature List​

Create a feature showcase:

  1. Create a Features repeater with sub-fields: icon, title, description
  2. Create a "Feature Item" layout using Handoff modules
  3. Add Handoff Repeater with Layout Style set to Grid
  4. Set Column Count to 4 for desktop, 2 for tablet, 1 for mobile
  5. Enable Equal Height for consistent card heights

Nested Context​

The Handoff Repeater creates a nested context for each row:

  • Modules inside the Card Layout automatically access sub-fields from the current repeater row
  • You don't need to specify which row—each item renders with its own data
  • Use Handoff Text, Image, or Video modules to display row-specific content
  • Standard Divi modules with Dynamic Content can also access repeater row fields

How Context Works​

Flexible Content Layout: "Services Page"
└── Repeater Field: "service_items"
    ├── Row 1: { title: "Web Design", icon: "...", description: "..." }
    ├── Row 2: { title: "SEO", icon: "...", description: "..." }
    └── Row 3: { title: "Marketing", icon: "...", description: "..." }

Handoff Repeater renders Card Layout 3 times:
├── Card 1 → context: Row 1 fields
├── Card 2 → context: Row 2 fields
└── Card 3 → context: Row 3 fields

Pitfalls and Limits​

Common Pitfall

No Card Layout Selected: If you see empty output, ensure you've selected a Card Layout in the module settings. The repeater needs a layout template to render each row.

Nested Repeaters

Repeaters inside Repeaters: While technically possible, deeply nested repeaters can cause performance issues and complex context management. Use single-level repeaters when possible.

Limitations:

  • Maximum of 6 columns in grid or slider layout
  • Slider requires Slick.js library (automatically loaded)
  • Card Layout must be a published Divi Handoff Layout
  • Repeater field must be within the current Flexible Content layout context

What's Next​