Creating a dynamic team members section with ACF Repeater Fields and AnyWhere Elementor Pro  - Elementor Addons

Creating a dynamic team members section with ACF Repeater Fields and AnyWhere Elementor Pro 

acf repeaters

As we all know, having a Team Member section is very essential for any organization. That is probably because everyone wants to know the people behind a specific project and it also adds a personal touch to the viewers. So in this tutorial, we will guide you to create a simple and dynamic Team Member section using ACF Repeaters and AnyWhere Elemnetor Pro.

We will be creating a simple Option page for a Company and then creating and adding data to the custom fields.  

So here is the final look that we are looking to achieve for the team member section.

Creating Option Page

Add the following code in the function.php of the current child theme to create an Options Page “Company”.

if( function_exists('acf_add_options_page') ) {
 
 acf_add_options_page(array(
  'page_title' 	=> 'Company',
  'menu_title'	=> 'Company',
  'menu_slug' 	=> 'company',
  'capability'	=> 'edit_posts',
 	'redirect'     => 'false'
  
 ));
}

Creating Custom Fields

ACF Custom Fields

Select the Options page created to apply custom fields on it.

Adding Data To Custom Fields

adding data to custom fields

Creating Repeater Block Layout  

  • Create a new AE Template and do the following configurations.
    • Render Mode: ACF Repeater Block.
    • Field Location: Select Option.
    • Repeater Field (ACF): Select the Repeater field Team Member.
repeater block layout
  • Now save the template and edit with Elementor.
  • In Elementor, now select appropriate Elementor widgets and under the dynamic section select ACF Repeaters field accordingly.
  • Then Specify the name of the repeater and the field type. 
Repeater field

Pro Tip: Make sure to design the complete block layout in a Single Parent Section. You can use the inner section widget if required.

Using AE – ACF Repeater Widget

Use the ACF – Repeater widget wherever you need to and do the following configurations.

  • Skin: Select the layout from Accordion, Tab, Grid, and Carasoul.
  • Template: Select the repeater block layout created.
  • Repeater Field(ACF): Select the name of the repeater field created i.e Team Member. 
AE- ACF Repeater Widget

Leave a Comment

Your email address will not be published.

Scroll to Top