Skip to main content

Handoff Text Module

The Handoff Text module displays text content from SCF/ACF Flexible Content sub-fields. It provides automatic field binding, HTML tag selection, prefix options, and link capabilities.

Purpose and When to Use​

Use the Handoff Text module when you want to:

  • Display headings, titles, or labels from Flexible Content layouts
  • Show descriptions, paragraphs, or any text-based content
  • Add dynamic text with prefixes or icons
  • Create linked text that pulls URLs from custom fields
Alternative Approach

You can also use the standard Divi Text module with Dynamic Content. Click the Dynamic Content icon in any text field and select "SCF / ACF Pro Flexible Content Fields" to choose a sub-field.

Compatibility and Performance Notes​

  • Divi Version: Divi 5 or higher (required)
  • Field Plugin: SCF (Secure Custom Fields) or ACF Pro
  • Supported Field Types: Text, Textarea, WYSIWYG, Number, Email, URL

Add to Page​

  1. Open a Divi Handoff Layout in the Divi Builder
  2. Add a new module and search for Divi Handoff: Text
  3. In the SCF/ACF Field dropdown, select the sub-field to display
  4. Configure HTML tag, prefix, and styling options as needed
  5. Save and verify the text displays correctly on the frontend

Settings Reference​

Content Tab​

Main Group​

SettingTypeDefaultDescription
SCF/ACF FieldSelectNoneSelect the Flexible Content sub-field from which to fetch the text value
HTML TagSelectDivHTML element to wrap the text (div, h1-h6, p, span)
PrefixTextEmptyStatic text that appears before the field content
Prefix IconIcon PickerNoneIcon displayed before the text content
Prefix Icon ColorColor#000Color of the prefix icon
Prefix Icon SizeRange24pxSize of the prefix icon (0-100px)
Prefix Icon SpacingRange10pxSpace between the icon and text (0-100px)
SettingTypeDefaultDepends OnDescription
Enable LinkToggleOff-Wrap the text in a clickable link
Open Link in New TabToggleOffEnable Link = OnOpen the link in a new browser tab
Use SCF/ACF Field for LinkToggleOffEnable Link = OnGet the link URL from a custom field instead of entering manually
SCF/ACF Field for LinkSelectNoneUse SCF/ACF Field = OnSelect the field containing the URL
Link URLTextEmptyEnable Link = On, Use SCF/ACF Field = OffEnter the destination URL manually

Background Groups​

SettingTypeDescription
Module BackgroundBackgroundBackground settings for the entire module container
Text BackgroundBackgroundBackground settings for the text element specifically

Design Tab​

Text Font Group​

Standard Divi font controls including:

  • Font family, size, weight, style
  • Text color, alignment
  • Letter spacing, line height
  • Text shadow

SCF/ACF Font Fields Group​

Override default font settings with values from custom fields:

SettingTypeDescription
Font Family FieldSelectSCF/ACF field containing font family name
Font Weight FieldSelectSCF/ACF field containing font weight value
Font Style FieldSelectSCF/ACF field containing font style (normal, italic)
Text Alignment FieldSelectSCF/ACF field containing alignment (left, center, right)
Text Color FieldSelectSCF/ACF field containing color value (hex code)
Text Size FieldSelectSCF/ACF field containing font size value
Letter Spacing FieldSelectSCF/ACF field containing letter spacing value
Line Height FieldSelectSCF/ACF field containing line height value

Standard Design Groups​

GroupDescription
SizingWidth, height, and alignment options
SpacingMargin and padding controls
BorderBorder width, style, color, and radius
Box ShadowDrop shadow configuration
FiltersBlur, brightness, contrast, saturation filters
TransformScale, rotate, translate, skew transformations
AnimationEntrance animation effects

Advanced Tab​

GroupDescription
VisibilityShow/hide on specific devices
TransitionsHover and scroll transition effects
PositionPositioning mode and offset values
ScrollScroll-based effects and sticky positioning

Examples and Common Patterns​

Example 1: Simple Heading​

Display a title from a "title" text field as an H2 heading:

  1. Add Divi Handoff: Text module
  2. SCF/ACF Field: Select "title"
  3. HTML Tag: H2
  4. Style with desired font settings

Example 2: Prefixed Label​

Show a category label with an icon prefix:

  1. Add Divi Handoff: Text module
  2. SCF/ACF Field: Select "category"
  3. Prefix Icon: Choose a tag or folder icon
  4. Prefix Icon Color: Match your theme accent color
  5. Prefix Icon Spacing: 8px

Example 3: Linked Title​

Create a clickable title that links to a URL stored in another field:

  1. Add Divi Handoff: Text module
  2. SCF/ACF Field: Select "title"
  3. HTML Tag: H3
  4. Enable Link: On
  5. Use SCF/ACF Field for Link: On
  6. SCF/ACF Field for Link: Select "link_url"

Example 4: Dynamic Font Styling​

Apply brand fonts stored in custom fields (useful for client-controlled branding):

  1. Add Divi Handoff: Text module
  2. SCF/ACF Field: Select "heading"
  3. In Design tab, open SCF/ACF Font Fields group
  4. Font Family Field: Select field containing font name
  5. Text Color Field: Select field containing brand color

Pitfalls and Limits​

Empty Field Handling

If the selected SCF/ACF field has no value on the current page, the module displays nothing. Consider using conditional visibility to hide modules when fields are empty.

HTML Tag SEO Implications

Choose HTML tags appropriately for SEO:

  • Use H1 only once per page
  • Use H2-H6 in hierarchical order
  • Use P for body text paragraphs
  • Use Span or Div for non-semantic text

Limitations:

  • Only displays plain text or WYSIWYG content (not complex field types)
  • Prefix icon must be a Divi icon (not custom images)
  • Dynamic font fields require exact value matching (e.g., "Arial" not "arial")
  • Does not support multi-line prefix text

What's Next​