Repeater

The Repeater option is one of the most powerful controls in Widget Builder. It allows you to define a set of fields (like Text, Image, URL) that can be duplicated by the user to create multiple, structured items of the same type. It manages dynamic lists of content.

Why would someone use it in a custom widget? #

Use this control when your widget needs to handle a list of similar items, like testimonials, team members, FAQ items, pricing features, or slides in a carousel. It lets users add, remove, and reorder as many items as they need, with each item containing the same customizable fields, all within a single, organized interface.

Where This Option Appears #

• In Widget Builder: You add this control in the Content tab. Its primary setup is defining the Fields that will appear inside each repeated item.
• In the Elementor Editor: Once saved, it appears as an interactive, sortable list. Users can click “Add Item” to create a new row, which expands to show the set of fields you defined (like “Name”, “Role”, “Image”). Each item can be collapsed, edited, duplicated, or deleted.

Available Settings #

Here are the configurable settings for the Repeater control:

Basic Settings #

• Label: The name of the control (e.g., “Team Members”, “FAQ List”).
• Name: The unique machine-readable ID (like team_members) for the dynamic shortcode.
• Description: Optional text to explain the repeater’s purpose.
• Fields: This is the core configuration. Here, you define the structure of each repeated item by adding other controls (Text, Image, URL, etc.). Each internal field gets its own Name (e.g., member_name, member_image).
• Title Field: Selects which of the defined fields (e.g., member_name) will be used as the title shown on the collapsed repeater row in the editor, making it easy to identify items.
• Prevent Empty: When enabled, at least one repeater item must always exist; users cannot delete the last item.
• Default Value: Allows you to pre-populate the repeater with one or more example items, each containing default data for its fields.

Advanced Settings #

• Show Label, Label Block, Separator, Conditions, Control Classes, Selector: Standard options.

Generated Shortcode & Data Structure #

When you add a Repeater control with the Name faq_list, Widget Builder generates a shortcode like: {{faq_list}}.

• What it represents: This shortcode provides access to an array or list of items. Each item is an object containing the values for all the fields you defined (e.g., question, answer).
• How to use it: You loop through this data in your HTML Panel to generate markup for each item. The syntax typically involves a loop tag.
  • HTML Panel (Example Logic):

{{#each faq_list}}
<div class="faq-item">
    <h3>{{question}}</h3>
    <p>{{answer}}</p>
</div>
{{/each}}

5. How to Use It: A Practical Example #

Let’s create a “Testimonial Slider” widget where users can add unlimited testimonials.

1. In Widget Builder:
   • Add a Repeater control. Set Label to Testimonials.
   • In the Fields section, add three child controls:
     1. A Text control with Label: Client Name and Name: client_name.
     2. A Textarea control with Label: Testimonial Text and Name: text.
     3. A Media control with Label: Client Photo and Name: photo.
   • Set the Title Field to client_name.
2. In your HTML Panel, write a loop to build the slider structure:
3. In your JS Panel, you would initialize a slider library (like Swiper) to cycle through the .testimonial-slide elements that were dynamically created.

<div class="testimonial-slider">
    {{#each testimonials}}
    <div class="testimonial-slide">
        <img src="{{photo}}" alt="{{client_name}}">
        <blockquote>"{{text}}"</blockquote>
        <cite>— {{client_name}}</cite>
    </div>
    {{/each}}
</div>

In the editor, users can now click “Add Item” to create new testimonials, filling out the name, text, and photo for each one.

Common Use Cases #

• Lists & Galleries: Testimonials, team members, client logos, portfolios, product feature lists.
• Interactive Content: FAQ accordions, timeline builders, step-by-step guides.
• Complex Modules: Creating entire slides for sliders, tabs content, or pricing table rows.
• Structured Data: Anywhere you need users to input multiple entries with a consistent format.

Helpful Tips #

• Plan Your Fields Carefully: The Repeater’s power comes from its nested fields. Design them to capture all necessary data for a single item. Use clear Names for these child fields as they become your shortcode keys.
• Use a Clear Title Field: Always set a Title Field to a unique, text-based field (like a name or title). This makes managing a long list of items in the editor much easier.
• Understand the Loop Syntax: The exact looping syntax ({{#each}}, {{/each}}) may vary. Consult your Widget Builder’s documentation for the correct templating language.
• Performance Consideration: While powerful, Repeaters can become complex. Avoid nesting Repeaters within Repeaters unless absolutely necessary, as it can complicate the data structure and editing experience.
• JavaScript for Interactivity: For features like sliders or accordions created with a Repeater, your JS Panel is essential for initializing the interactive behavior on the dynamically generated HTML.

The Repeater control is the key to building dynamic, data-rich, and highly flexible widgets that empower users to create complex content structures directly from the Elementor editor.

Frequently Asked Questions #