Create Dynamic Content using ACF Repeater on Elementor | Elementor Resources 72812182217

This website is not affiliated with Elementor.

Create Dynamic Content using ACF Repeater on Elementor

Create Dynamic Content using ACF Repeater on Elementor

 

ACF Repeater Plugin has been in the WordPress Development scene since the early days of WordPress itself. It brings along limitless possibilities for different types of websites by adding dynamic data to WordPress-generated content through the creation of Custom Fields.

On the other hand, Elementor allows you to insert ACF Custom Field data dynamically to your designs and templates. Styling wouldn’t be limited as you can use the styling options that Elementor already offers.

In this guide, I will show you a step-by-step tutorial for making dynamic content on your website. Here is what it will look like:

Note: This tutorial requires Elementor Pro, Anywhere Elementor Pro and the ACF repeater plugins.

Step 1: Create a New AE template.

Step 2: Scroll down and look for the “Anywhere Elementor settings”. Change the “Render Mode” to “Block Layout”, save the template and open it using the Elementor visual editor.

As you can see, the section contains icons text and check icon. I already had an input for the Field Label and Field Name as “additional_details_list”.

Step 3. Continue to the template in the Elementor visual editor and use the AE Custom Field widget to show data from the Repeater subfields.

Step 4. In the AE – Custom Field widget, within the name field, now specify the key or slug of your subfield.

You can then use the Image Widget and it will automatically populate the list with appropriate icons.

Step 5. Now since we’re finished setting up, don’t forget the title of your Custom Field Template because you will be using that as a reference for the next procedure. You’re ready now to create a Custom Post Type page which you will be using on your Single Post page.

Step 6. I’ve shown a screenshot for the Single Post template including additional sections (as shown inside the red box, it automatically displays the list of fields that you set using the AE Custom Field). However, before proceeding on setting up the functionality, you need to look for the Anywhere Elementor ACF Repeater Widget, and on the Template Field look for the template title that you created through the repeater field you will be using on the section.

Now, you can add as many lists on the post editor as you want and it will automatically be displayed on the front-end.

Congratulations! You can now create dynamically generated content for your WordPress and Elementor website!

How can we improve this guide? Please let us know in the comments section! 🙂

Pin It on Pinterest