This documentation provides comprehensive insights into the using ACF List widget developed by Element Pack Pro.

Activate ACF List Widget

To use the ACF List from Element Pack Pro Widget must be enabled. Navigate to WordPress Dashboard > Element Pack Pro Plugin dashboard.

1. Navigate to 3rd Party Widgets Tab.
2. Search by the ACF List Widget Name.
3. Enable the ACF List Widget.
4. Hit the Save Settings Button.

Create ACF Content

We will create an ACF content from the ACF Fields section. Please follow Step by step guide.

Note: you must install and activate the ACF Pro Plugin.

Add Fields Group

Navigate to the ACF > Field Groups Section.

1. Select the name for the Field Group e.g.: ACF List .
2. To make changes hit the ” Save Changes ” button.

Add Repeater Field

1. Field Type: Select the Repeater for Field Type. The Repeater field is selected to store and manage multiple sets of similar sub-fields dynamically within a single custom field group.
2. Field Label: Set the label for the field label.
3. Field Name: Set the name for the Field name. It will be in small later no space , use the underscore.

Add Sub Field

1. Navigate to the sub field and click on the “ + Add Field ” button to add sub fields.

ACF List Title

2. Field Type: Select the Field Type. Different types of fields are available. Select the Text for Field Type.
3. Field Label: Set the label for the field label. e.g.: ACF List Title.
4. Field Name: Set the name for the Field name. It will be in small later no space , use the underscore.

ACF List Content

1. Field Type: Select the Field Type. Different types of fields are available. Select the Text for Field Type.
2. Field Label: Set the label for the field label. e.g.: ACF List Content.
3. Field Name: Set the name for the Field name. It will be in small later no space , use the underscore.

ACF List Image

1. Field Type: Select the Field Type. Different types of fields are available. Select the Image for Field Type.
2. Field Label: Set the label for the field label. e.g.: ACF List Image.
3. Field Name: Set the name for the Field name. It will be in small later no space , use the underscore.
4. Return Format: Set the format for the Image. Different format available e.g.: Image Array, Image URL, Image ID.
5. Library: Select the library for the image.

ACF List URL

1. Field Type: Select the Field Type. Different types of fields are available. Select the URL for Field Type.
2. Field Label: Set the label for the field label. e.g.: ACF List Url.
3. Field Name: Set the name for the Field name. It will be in small later no space , use the underscore.

Settings

Set the Rules for appearing the ACF content on certain place.

1. Post Type: Select the type for the field Post, Pages, User, Or Forms. Choose the Post Type.
2. Set condition: Set the condition Is equal to or Is not equal to. If this select the is equal to it will refer the similar with the condition.
3. Select the condition where to work with, Select Page, Post, Templates etc. Please select the Post type is equal to Page.

Create a Page for ACF List

Navigate to the Pages > All Pages

1. Click on the ” Add New ” page to add new pages.

Page Named Find the ACF Fields

1. Set the name for the page. e.g.: ACF List.
2. The Fields group appear on the top.
3. The Repeater fields appear with all the repeater items.
4. At the bottom of the page the Newly added ACF Fields appear. Here add the acf content by following. Click on the ” Add Row ” button to add new row for the custom fields.

Add Content

1. ACF List Title: Set the Content of this fields..
2. ACF List Content: Set the Content for the fields.
3. ACF List Image: Choose Image from the media library and select it.
4. ACF List Url: Set the URL for the content.
5. To add more content click on the ” Add Row ” button.

Edit with Elementor

1. After adding items on the Repeater Fields. Click on the ” Edit with Elementor ” button to edit the content. It will navigate to the editor page.

Insert ACF List

1. Go to the Elementor Editor Page and Hit the Add Element ” + ” Icon.
2. Search by the ACF List widget name.
3. The widget will appear, Check the Element Pack Pro logo on top right corner.
4. Select the widget then Drag and Drop it on the editor page.

Configuring the Content Tab

The Content Tab provides options to manage and structure the core settings of elements. It allows to define the content and functionality to align with design goals.

ACF Fields Section

Go to Content > ACF Field

Repeater Field Select

1. Select the repeater field. Search by the field name. e.g.: ACF List Repeater.
2. The Repeater field will appear and select it.

Title

1. Select the Title. Search by the field name. e.g.: ACF List Title.
2. The Repeater field will appear and select it.

4. Search by the Text of the repeater item. e.g.: ACF List Content.

5. Select the image for the repeater field, search by the name and select it. e.g.: ACF List URL.

Link

6. Select link for ACF List item. Search by name and select it. e.g.: ACF List URL.

Layout Section

Go to Style > Layout

1. Layout Style: Select the style 01 and the design will appear here.

1. Layout Style: Select the style 02 and the design will appear here.

1. Layout Style: Select the style 03 and the design will appear here.

Additional Section

Go to Style > Additional

1. Columns: Select the number of columns for ACF List.
2. Gird Gap: Set the gap between grid item of the list items.
3. Show Number Count: Enable the switcher to show count number.
4. Title HTML Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).

5. Icon Position: Set the position for the icon. Left, Right, Top, Bottom.
6. Content Position: Set the position for the Content Left or Right.
7. Content Vertical Align: Set position for the Vertical Align Bottom, Center, Top.
8. Alignment: Set the alignment for the Text, Left, Center, Bottom.

Designing with the Style Tab

The Style Tab offers a range of options to enhance the visual appearance of elements, enabling precise adjustments and creative design possibilities. It helps create polished and engaging layouts effortlessly.

List Item Section

Go to Style > List Item

Normal

1. Background Type: Set the background type Color and select color for the list item.
2. Border Type: Set the type border for the content.
3. Border Width: Set the thickness for the border.
4. Border Color: Set the color for the border.

Hover

1. Background Type: Set the background type color and choose the color for the background.
2. Border Color: Choose the color for the boder.
3. Box Shadow: Make a shadow for the border.

Number Count Section

Go to Style > Number Count

Normal

1. Color: Choose the color fro the Number text.
2. Background Color: Set the background color for the number.
3. Border Type: Choose the border type from solid,
4. Border Width: Set the thickness of the border.
5. Border Color: Set the color for the border.

6. Border Radius: Set the border radius for the number count.
7. Padding: Set the padding for the spacing.
8. Margin: Set the space for the margin.
9. Typography: Set the typography for the number count.

Hover

1. Color: Set the color for the number count.
2. Background Color: Set the background color for number count.
3. Border Color: Set the border color.

Title/Subtitle Section

Go to Style > Title/Subtitle

Title

1. Color: Set the color for the title.
2. Typography: Set the typography for the title.

Sub Title

1. Color: Set the color for Sub Title.
2. Typography: Make the typography for the sub title.
3. Margin: Set the spacing for the margin.

Hover

1. Title Color: Set the color for the Title.
2. Sub Title Color: Set the color for the Sub Title.

Icon Section

Go to Style > Icon

Normal

1. Color: Set the color for the Icon.
2. Background Color: Set the background color for the Icon.
3. Border Type: Select the type for the border.
4. Border Width: Set the thickness for the border.
5. Border Color: Set the Color for the Border.

6. Border Radius: Make the border corner edges rounded by setting the radius.
7. Padding: Set the padding for the item.
8. Margin: Set the margin for it.
9. Typography: Select the typography for the Icon.
10. Box Shadow: Make a shadow of the Box.

Hover

1. Color: Set the color for the Icon.
2. Background Color: Set a background color for the icon.
3. Border Color: Se the border Color.
4. Box Shadow: Make shadow for the border.

Image Section

Go to Style > Image

1. Border Type: Set the type for the border.
2. Border Width: Set the thicnkess of the border.
3. Border Color: Choose the color for the border.

4. Border Radius: Set the border radius for the images.
5. Margin: Set the margin for it.
6. Size: Set the size of the imgeas.

Video Assist

Video Tutorial Coming Soon.

Check the demo by following.
Thanks in advance.