Team Member Section in Elementor with ACF

Advanced Custom Fields (ACF) is a popular plugin known for handling dynamic data efficiently. It offers various field types to present data in a more organized manner. If you’re looking to showcase repeating information, such as details about your team members, that you want to display on your Elementor website.

In any organization, a Team Member section is crucial as it introduces the faces behind a project, adding a personal touch for viewers. That is where the ACF Repeater field comes in handy. It enables you to achieve this by allowing you to repeat and display information seamlessly.

In this tutorial, we’ll walk you through the process of creating a straightforward and dynamic Team Member section using ACF Repeater along with AnyWhere Elementor Pro. By the end, you’ll have a user-friendly solution to effortlessly highlight your team members on your website.

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.

Dynamic Team Member with ACF Repeater Demo

Creating Option Page

Using PHP Code

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'
  
 ));
}

Using ACF

Navigate to ACF -> More option within ACF.
In this section, there should be an option called “Options Pages.” Click on it.
Click on “Add New” to create a new Options Page and fill in the required details.

Creating Custom Fields

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

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.

AE - Repeater Block Layout — AE – 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.

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 Carousel.
Template: Select the repeater block layout created.
Repeater Field(ACF): Select the name of the repeater field created, i.e., Team Member.

Conclusion

In conclusion, by using ACF Repeater Fields and AnyWhere Elementor Pro, you can easily create a dynamic team members section for your website. These tools allow you to add and manage team member information efficiently, giving you the flexibility to showcase your team in a visually appealing and organized manner.

Create a Dynamic Team Member Section in Elementor using ACF