Developer Documentation

Back To Developer Documentation

Module Settings Groups

Learn how to configure the toggle groups in the module settings modal.

Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.

When editing modules inside the Divi Builder, their settings appear in collapsable groups . You can assign a setting to a specific group using the toggle_slug parameter in the setting definition. You can use one of the builder’s predefined settings groups or you can use a custom group.

Predefined Settings Groups

The following groups are predefined and can be used by simply including one of their slugs as the toggle_slug parameter in a setting definition.

Display Name Slug
Admin Label admin_label
Alignment alignment
Animation animation
Arrows Color arrows_color
Attributes attributes
Audio audio
Background background
Bar Counter bar
Body Text body
Border border
Box Shadow box_shadow
Bullet bullet
Button One button_one
Button Two button_two
Button button
CSS ID & Classes classes
Caption Text caption
Categories categories
Circle circle
Color color
Conditional Logic conditional_logic
Content Text content
Controls Colors colors
Controls controls
Currency & Frequency Text currency_frequency
Custom CSS custom_css
Dividers dividers
Dropdown Menu dropdown
Elements elements
Email Account provider
Email email
Exceptions exceptions
Excluded Item excluded
Featured Image featured_image
Field Options field_options
Field Text form_field
Fields fields
Filter Criteria Text filter
Filters filters
Icon icon
Image & Icon icon_settings
Image & Video image_video
Images images
Image image
Input Text input
Label Text label
Layout layout
Links links
Link link
Map child_filters
Map map
Menu Text menu
Meta Text meta
Module Text module
Navigation navigation
Number Text number
Numbers Text numbers
Overlay overlay
Pagination Text pagination
Percentage Text percent
Play Icon play_icon
Player Pause player_pause
Portfolio Title Text portfolio_header
Price Text price
Redirect redirect
Result Message Text result_message
Rotation rotation
Sale Badge badge
Scroll Down Icon scroll_down
Search Field field
Sizing width
Spacing margin_padding
State state
Styles styles
Subhead Text subhead
Subheader Text subheader
Success Action success_action
Tab Text tab
Text main_content
Text text
Title Text header
Title Text title
Toggle Text toggle
Visibility visibility

Custom Settings Groups

Settings can be assigned to a custom group in the same way that you would assign them to predefined groups. However, you must also define all custom groups in the get_settings_modal_toggles() method of your module’s PHP class.

Settings Group Definition

  • tab_slug (array)
    • toggles (array) — All settings group definitions for the tab
      • toggle_slug (array) — Settings group definition
        • priority (int) — Groups are sorted based on this number (from lowest to highest)
        • sub_toggles (array) — Sub groups for this group (optional)
          • sub_toggle_slug (array) — Sub group definition
            • icon (string) — The slug of a predefined icon (optional)
            • icon_svg (string) — Raw SVG icon (optional)
            • name (string) — Display Name (only shown when no icon is defined)
        • tabbed_subtoggles (bool) — Whether or not to display sub groups as tabs
        • title (string) — Display name (localized)

Custom Settings Groups Example

Join To Download Today