Documentation

Get your answers right away

Creating the layouts for your Flexible Content with Repeaters

Before we start with creating the layouts, you need to understand the core concept of Repeater Fields inside Flexible Content. A regular Repeater only has a layout for its items. When you use a Repeater inside a Flexible Content you have to create a layout for your Flexible Content and a layout for the Repeater Item. 

 

Let’s start with creating the layout for your Flexible Content

  1. Search for Templates in your menu panel (you find it below the Elementor item)
  2. Click Add New
  3. In the pop-up menu choose section as your template type and enter a name for your layout.
  4. In the widget panel search for Repeaters and drag it into your editor. 
  5. First, you need to choose which kind of Repeater Field you want to add. <icon selector>. Instead of the ‘normal’ repeater, choose the Flexible Repeater <icon>
  6. Now, you need to select your Repeater Field. Go to Repeater Name and click on the dropdown list. 
  7. Choose the Repeater Field that you want to connect.
  8. The next step is to choose the layout for your repeater items. You haven’t created the layout, so you can leave this one empty for now.
  9. If you want, you can add other widgets to your layout. If not, you can hit publish.

 

Because you need a layout for your Repeater Items, we are going to create them now. 

  1. Search for Templates in your menu panel (you find it below the Elementor item)
  2. Click Add New
  3. In the pop-up menu choose section as your template type and enter a name for your layout.
  4. In the Elementor Editor drag and drop the widgets you need to create your custom layout.
  5. Connect the widget fields to ACF by clicking on the Dynamic Tag icon <icon data-tag>. Note: To connect the widget fields to ACF, the fields must support Dynamic Tags. Otherwise, you can only use the widget as a static widget. 
  6. In the dropdown field, scroll down till you see the DYNOMENTS section. 
  7. Depending on the widget that you use you have chosen you can select a Dynamic Tag that can be used to connect the ACF Field.
  8. Choose a DYNOMENTS Dynamic Tag and click on the wrench icon <wrench icon>
  9. In the pop-over menu click on the dropdown field and search for your ACF Field. Note that you only see the ACF Fields that are corresponding to the type of Dynamic Tag that you have chosen. So if you chose DYNOMENTS Text you will only see the ACF Text related fields. 
  10. After you choose the right ACF field you will see a placeholder text in the form of DYNOMENTS <Tag Name>: <ACF Field name>. Note: The placeholders are only visible in the Editor to let you style your widget. When the section is in your Repeater Field loop it will be replaced with your content. 
  11. Style the widgets as you please and when you are finished publish the section.

 

Now go back to the Flexible Content layout that you have created earlier and edit it with Elementor. 

 

  1. In the editor click on the Repeater widget that you have dragged into the editor. 
  2. By clicking the widget, the settings open up again in the left menu panel
  3. Now choose the layout that you have created for your Repeater items by clicking on the dropdown list. You see all the Elementor layouts that have been created on your website. That’s why it is important to name your layouts in a way the is recognizable as flexible layouts. 
  4. That’s it. Hit publish again and head over to the page, page template, single page template, single post template, etc. where you want to integrate the Flexible Content with Repeater Field.

 

Still stuck? I’m happy to help you on your way. Click in the bottom-right corner on the speach icon and leave me a message