Creating SCF Field Groups

SCF (Secure Custom Fields) is a free WordPress plugin that includes Flexible Content support. This guide walks you through setting up SCF field groups for use with Divi Handoff.

What is SCF?

Secure Custom Fields (SCF) is a free fork of ACF that includes all field types, including Flexible Content — the key feature Divi Handoff requires.

Unlike the free version of ACF, SCF includes:

• Flexible Content field type
• Repeater field type
• All pro-level features
• Completely free

Why SCF?

SCF provides the same functionality as ACF Pro at no cost. If you don't already have ACF Pro, SCF is the recommended choice for Divi Handoff.

Prerequisites

Before starting, ensure you have:

• WordPress 6.4 or higher
• Divi 5 activated
• Divi Handoff installed and activated

Step 1: Install and Activate SCF

1. Go to Plugins → Add New
2. Search for "Secure Custom Fields"
3. Click Install Now on the SCF plugin
4. Click Activate

After activation, you'll see SCF in your WordPress admin menu.

Step 2: Create a Field Group

1. Go to SCF → Field Groups
2. Click Add New
3. Enter a title for your field group (e.g., "Page Layouts")

note

The field group title is for admin reference only. Users won't see this name on the frontend.

Step 3: Set Location Rules

Location rules determine where your fields appear.

1. In the Settings section, find Location Rules
2. Set conditions for where the field group appears:
   • Post Type equals Page (for pages)
   • Or choose specific templates, post types, or other conditions

Example configurations:

Use Case	Rule
All pages	Post Type equals Page
Specific template	Page Template equals Full Width
Custom post type	Post Type equals Portfolio
Blog posts	Post Type equals Post

Step 4: Add a Flexible Content Field

1. Click + Add Field
2. Set the field settings:
   • Field Label: "Page Sections" (or your preferred name)
   • Field Name: page_sections (auto-generated from label)
   • Field Type: Select Flexible Content

The Field Name is important — you'll reference this in your Divi Handoff Layouts.

Step 5: Create Layouts Within Flexible Content

Layouts are the content blocks users can add to pages. Create a layout for each section type.

1. In your Flexible Content field, click Add Layout
2. Configure the layout:
   • Label: "Hero Section"
   • Name: hero_section (auto-generated)
3. Repeat to add more layouts as needed

Common layout examples:

Layout Name	Purpose
Hero Section	Full-width header with title and image
Content Block	Text content with optional image
Team Member	Photo, name, title, bio
Testimonial	Quote, author, company
Call to Action	Heading, text, button
Image Gallery	Collection of images
Feature Grid	Multiple feature boxes

Step 6: Add Sub-fields to Each Layout

Sub-fields hold the actual content for each layout. Add sub-fields inside each layout.

Adding Sub-fields

1. Click on a layout to expand it
2. Click + Add Sub Field
3. Configure each sub-field

Example: Hero Section Layout

Add these sub-fields to a "Hero Section" layout:

Field Label	Field Name	Field Type	Notes
Title	title	Text	Main heading
Subtitle	subtitle	Text	Secondary heading
Description	description	Textarea	Body text
Background Image	background_image	Image	Hero background
Button Text	button_text	Text	CTA button label
Button Link	button_link	URL	CTA destination

Example: Team Member Layout

Add these sub-fields to a "Team Member" layout:

Field Label	Field Name	Field Type	Notes
Photo	photo	Image	Team member headshot
Name	name	Text	Person's name
Job Title	job_title	Text	Role/position
Bio	bio	Textarea	Short biography
Email	email	Email	Contact email
LinkedIn	linkedin	URL	Profile link

Example: Feature with Repeater

Use a Repeater sub-field for lists of items:

Field Label	Field Name	Field Type	Notes
Section Title	section_title	Text	Heading for the section
Features	features	Repeater	List of feature items
↳ Icon	icon	Image	Feature icon
↳ Title	feature_title	Text	Feature name
↳ Description	feature_description	Textarea	Feature details

Step 7: Configure Field Settings

For each sub-field, configure appropriate settings:

Text Fields

• Default Value: Optional placeholder text
• Placeholder Text: Hint shown in empty field
• Character Limit: Maximum characters allowed
• Required: Whether the field must be filled

Image Fields

• Return Format: Choose carefully — this affects how Divi Handoff displays images
  • Image URL — Recommended for Divi Handoff
  • Image ID — Works with additional processing
  • Image Array — Contains URL, ID, and sizes
• Preview Size: Thumbnail size in admin
• Library: Restrict to uploaded images only, or allow all

Image Return Format

For best compatibility with Divi Handoff, set Return Format to Image URL or Image Array. This ensures image fields work seamlessly with Handoff modules.

Textarea Fields

• Rows: Number of visible lines
• New Lines: How line breaks are handled
  • Automatically add paragraphs — Wraps in <p> tags
  • Automatically add <br> — Converts to line breaks
  • No formatting — Raw text

WYSIWYG Fields

Use for rich text content:

• Toolbar: Full or basic
• Show Media Upload Buttons: Enable for inline images
• Delay Initialization: Better performance with many fields

Step 8: Publish the Field Group

1. Review all your layouts and sub-fields
2. Click Publish to save the field group

Your Flexible Content field is now available on pages matching your location rules.

Step 9: Verify Setup

1. Go to Pages → Add New (or edit an existing page)
2. Look for your field group in the page editor
3. Click Add Row in the Flexible Content field
4. Verify your layouts appear and sub-fields are correct

Field Type Recommendations

Choose the right field type for each content type:

Content Type	Recommended Field	Why
Headings	Text	Single line, clean input
Paragraphs	Textarea	Multiple lines, no formatting
Rich content	WYSIWYG	Full formatting control
Single image	Image	Easy selection, preview
Image gallery	Gallery or Repeater	Multiple images
Links	URL or Link	Validation, proper format
Yes/No options	True/False	Checkbox toggle
Dropdown options	Select	Predefined choices
List of items	Repeater	Repeated sub-fields
Video	oEmbed or URL	Embed support or raw URL

Tips for Working with SCF

Use Clear Field Names

Field names appear in Divi Handoff module settings. Use descriptive names:

• ✅ hero_title, team_member_photo, cta_button_text
• ❌ field_1, text, img

Group Related Fields

Organize sub-fields logically:

1. Content fields first (title, description)
2. Media fields second (image, video)
3. Interactive fields last (buttons, links)

Use Field Instructions

Add instructions to help content editors:

1. Click on any field
2. Find Instructions setting
3. Add helpful guidance (e.g., "Recommended image size: 1920x1080px")

Consider Required Fields

Mark essential fields as required to prevent incomplete content:

1. Click on the field
2. Enable Required toggle
3. Users must fill this field before saving

Troubleshooting

Field Group Not Appearing

Possible causes:

• Location rules don't match the current page
• Field group not published
• SCF plugin deactivated

Solutions:

1. Check location rules match your page type
2. Verify field group is Published
3. Confirm SCF is active in Plugins

Fields Not Saving

Possible causes:

• Field name conflicts with WordPress reserved names
• Server file upload limits (for images)
• PHP memory limits

Solutions:

1. Use unique field names with prefixes
2. Check server upload limits in Settings → Media
3. Contact host about PHP limits

Image Field Shows Wrong Size

Possible causes:

• Wrong Return Format selected
• Thumbnail regeneration needed

Solutions:

1. Set Return Format to Image URL or Image Array
2. Regenerate thumbnails with a plugin like Regenerate Thumbnails

What's Next

• Creating Handoff Layouts - Build Divi layouts for your fields
• Creating ACF Field Groups - Alternative setup with ACF Pro
• Quick Start Guide - Complete setup walkthrough
• Handoff Text Module - Display text from sub-fields
• Handoff Image Module - Display images from sub-fields