Developer Reference

This page is for developers who need to extend Divi Handoff using simple PHP hooks and filters. Most users can accomplish everything through the settings UI without code.

Who This Is For

This documentation is for developers who need to:

Add custom CSS classes to layout sections
Modify layout content before it displays
Add custom content before/after layout sections
Style Handoff modules with custom CSS

Actions (Hooks)

Divi Handoff provides action hooks that let you add custom functionality at specific points when layouts display.

`dalb_before_layout_block`

Runs before each Flexible Content section displays.

Parameter	Type	Description
`$page_id`	`int`	ID of the current page
`$layout_index`	`int`	Zero-based index of the section (first section is 0, second is 1, etc.)
`$layout_name`	`string`	Name of the SCF/ACF layout (e.g., `hero_section`)
`$position`	`string`	Always `'before'` for this hook

Example:

functions.php
add_action( 'dalb_before_layout_block', 'my_before_layout', 10, 4 );
function my_before_layout( $page_id, $layout_index, $layout_name, $position ) {
    if ( $layout_name === 'hero_section' ) {
        echo '<div class="hero-wrapper">';
    }
}

`dalb_after_layout_block`

Runs after each Flexible Content section displays.

Parameter	Type	Description
`$page_id`	`int`	ID of the current page
`$layout_index`	`int`	Zero-based index of the section
`$layout_name`	`string`	Name of the SCF/ACF layout
`$position`	`string`	Always `'after'` for this hook

Example:

functions.php
add_action( 'dalb_after_layout_block', 'my_after_layout', 10, 4 );
function my_after_layout( $page_id, $layout_index, $layout_name, $position ) {
    if ( $layout_name === 'hero_section' ) {
        echo '</div><!-- .hero-wrapper -->';
    }
}

Filters

Filters let you modify data before Divi Handoff uses it.

`dalb_layout_block_classes`

Modify the CSS classes applied to each layout section wrapper.

Parameter	Type	Description
`$classes`	`string`	Existing CSS classes (empty by default)
`$page_id`	`int`	ID of the current page
`$layout_index`	`int`	Zero-based index of the section
`$layout_name`	`string`	Name of the SCF/ACF layout

Returns: string - Modified CSS classes

Example:

functions.php
add_filter( 'dalb_layout_block_classes', 'my_layout_classes', 10, 4 );
function my_layout_classes( $classes, $page_id, $layout_index, $layout_name ) {
    // Add alternating background class
    $bg_class = ( $layout_index % 2 === 0 ) ? 'bg-light' : 'bg-dark';
    return $classes . ' ' . $bg_class;
}

`dalb_layout_block_content`

Modify the HTML content of each layout section after it's processed.

Parameter	Type	Description
`$content`	`string`	HTML content of the layout section
`$page_id`	`int`	ID of the current page
`$layout_index`	`int`	Zero-based index of the section
`$layout_name`	`string`	Name of the SCF/ACF layout

Returns: string - Modified HTML content

Example:

functions.php
add_filter( 'dalb_layout_block_content', 'my_layout_content', 10, 4 );
function my_layout_content( $content, $page_id, $layout_index, $layout_name ) {
    // Add schema markup to testimonial sections
    if ( $layout_name === 'testimonial' ) {
        $content = '<div itemscope itemtype="https://schema.org/Review">' . $content . '</div>';
    }
    return $content;
}

CSS Classes

Use these CSS classes to style Divi Handoff elements.

Layout Section Classes

Class	Element	Description
`.layout_block`	`<div>`	Wrapper for each Flexible Content section
`.layout_block_{n}`	`<div>`	Section by index (e.g., `.layout_block_0` for first section)
`.{layout_name}`	`<div>`	Section by SCF/ACF layout name (e.g., `.hero_section`)
`.page-content`	`<div>`	Standard page content wrapper
`.container`	`<div>`	Standard width container
`.fullwidth_container`	`<div>`	Full-width container

Module Classes

Class	Element	Description
`.divi_handoff_dalb_text`	Module	Handoff Text module wrapper
`.divi_handoff_dalb_image`	Module	Handoff Image module wrapper
`.divi_handoff_dalb_video`	Module	Handoff Video module wrapper
`.divi_handoff_dalb_repeater`	Module	Handoff Repeater module wrapper
`.dalb_text`	Legacy	Text module (Divi 4 compatibility)
`.dalb_image`	Legacy	Image module (Divi 4 compatibility)
`.dalb_video`	Legacy	Video module (Divi 4 compatibility)
`.dalb_repeater`	Legacy	Repeater module (Divi 4 compatibility)

Content Classes

Class	Element	Description
`.dalb_text_content`	`<div>`	Text content wrapper inside text module
`.dalb_text_prefix_icon`	`<span>`	Prefix icon in text module
`.dalb_image`	`<div>`	Image container
`.dalb_video`	`<div>`	Video container
`.repeater_card`	`<div>`	Individual repeater item card
`.same-card-height`	Modifier	Forces equal card heights in repeater
`.keep_ratio`	Modifier	Maintains image aspect ratio
`.fit-container`	Modifier	Makes video fill container

Repeater Grid Classes

Class	Description
`.grid`	Enables CSS grid layout
`.grid-column-1`	1 column grid
`.grid-column-2`	2 column grid
`.grid-column-3`	3 column grid
`.grid-column-4`	4 column grid
`.grid-column-5`	5 column grid
`.grid-column-6`	6 column grid

Slider Classes (Slick.js)

Class	Description
`.slider-container`	Slider wrapper
`.slick-dots`	Pagination dots container
`.slick-dots.type-square`	Square pagination dots
`.slick-dots.show-text`	Show text in dots
`.slick-prev`	Previous arrow
`.slick-next`	Next arrow

CSS Customization Examples

Custom Layout Section Styling

style.css
/* Style specific layout types */
.layout_block.hero_section {
    padding: 80px 0;
    background-color: #f5f5f5;
}

.layout_block.testimonial {
    background-color: #fff;
    border-left: 4px solid #0073aa;
    padding: 40px;
}

/* Alternating backgrounds */
.layout_block:nth-child(even) {
    background-color: #fafafa;
}

Custom Module Styling

style.css
/* Style Handoff Text module */
.divi_handoff_dalb_text .dalb_text_content {
    font-family: 'Georgia', serif;
    line-height: 1.8;
}

/* Style Handoff Image module */
.divi_handoff_dalb_image .dalb_image img {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Style repeater cards */
.divi_handoff_dalb_repeater .repeater_card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

Custom Slider Styling

style.css
/* Custom slider dots */
.slick-dots li button {
    background-color: #ccc;
    border-color: #ccc;
}

.slick-dots li.slick-active button {
    background-color: #0073aa;
    border-color: #0073aa;
}

/* Custom slider arrows */
.slick-prev:before,
.slick-next:before {
    color: #0073aa;
}

Accessing Page Settings

You can check if Divi Handoff is enabled on a page and get page-specific settings:

functions.php
$page_id = get_the_ID();

// Check if Divi Handoff is enabled on this page
$dalb_enabled = get_post_meta( $page_id, 'dalb_enabled', true );

// Get page-specific settings
$show_content = get_post_meta( $page_id, 'dalb_show_content', true );
$hide_header = get_post_meta( $page_id, 'dalb_hide_header', true );
$hide_footer = get_post_meta( $page_id, 'dalb_hide_footer', true );

What's Next

Resources - Support and additional resources
Troubleshooting - Common issues and solutions
FAQ - Frequently asked questions

Who This Is For​

Actions (Hooks)​

dalb_before_layout_block​

dalb_after_layout_block​

Filters​

dalb_layout_block_classes​

dalb_layout_block_content​

CSS Classes​

Layout Section Classes​

Module Classes​

Content Classes​

Repeater Grid Classes​

Slider Classes (Slick.js)​

CSS Customization Examples​

Custom Layout Section Styling​

Custom Module Styling​

Custom Slider Styling​

Accessing Page Settings​

What's Next​

Who This Is For

Actions (Hooks)

`dalb_before_layout_block`

`dalb_after_layout_block`

Filters

`dalb_layout_block_classes`

`dalb_layout_block_content`

CSS Classes

Layout Section Classes

Module Classes

Content Classes

Repeater Grid Classes

Slider Classes (Slick.js)

CSS Customization Examples

Custom Layout Section Styling

Custom Module Styling

Custom Slider Styling

Accessing Page Settings

What's Next