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