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

Activate ACF Slider Widget

To use the ACF Slider 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 Slider Widget Name.
3. Enable the ACF Slider 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 Slider .
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 Slider Title

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 Slider Title.
3. Field Name: Set the name for the Field name. It will be in small later no space , use the underscore.

ACF 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 Slider 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 of the Image. e.g: Image Array,

ACF 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 Slider Content.
3. Field Name: Set the name for the Field name. It will be in small later no space , use the underscore.

ACF 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 Slide 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 Slider

Navigate to the Pages > All Pages

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

Page Named Find the ACF Slider Fields

1. Set the name for the page. e.g.: ACF Slider.
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 Slider Title: Set the Content of this Title fields.
2. ACF Slider Image Set the Image for the ACF Slider Image.
3. ACF Slider Content: Set the Content on the Content fields.
4. ACF Slider URL: Set the URL for the slider content.
5. Add Row: To add more repeater item click on the ” Add Row ” button. Add as many as row item want.

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 Slider

1. Go to the Elementor Editor Page and Hit the Add Element ” + ” Icon.
2. Search by the ACF Slider 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.

Slider Section

Go to Content > Slider

Repeater Field Select

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

3. After selecting the slider will appear.

Title

4. Search by the field name. e.g.: ACF Slider Title. and Select the Title.

Image

5. Search by the field name. e.g.: ACF Slider Image. and Select the Image.

Content

6. Search by the field name. e.g.: ACF Slider Content. and Select the Content.

Link

7. Search by the field name. e.g.: ACF Slidr URL. and Select the url. It will link with the Read More Button.

Layout Section

Go to Style > Layout

1. Height: Set the height for the Slider section.
2. Content Width: Set the width for the content.
3. Content Position: Set position for the content, left, right, centre.
4. Alignment: Set alignment for matching the position. Left, Center, Right, Justified.

5. Show Title: Enable the switcher to show the Title of the Slider.
6. Title HTML Tag: Set any Title 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).
7. Show Button: Enable the switcher to display the Read More Button right after the content.

8. Scroll to Section: Enable the switcher to display the scroll to section button. It will scroll to relevant section according to the Section ID.
9. Section ID: Input the section ID on this field.
10. Scroll to Section Icon: Set the Icon for the scroll to section button.

Button

Go to Style > Button

1. Button Text: Set the text for the Button.
2. Icon: Set the from the icon library.

Navigation Section

Go to Style > Navigation

1. Navigation: Set the position for the navigation. Choose the Arrows.
2. Show Scrollbar?: It will display the scrollbar on the slide show.
3. Arrows Position: Set the position for the arrows:
4. Arrows Icon: Choose different types of Icon from the selection table.
5. Hide Arrow on Mobile?: Enable the switcher to hide the arrow on the mobile device.

Slider Settings Section

Go to Style > Slider Settings

1. Transition: Set the transition for the slide settings.
2. Text Effect: Set the effect for the Text. Different type of effect are available.
3. Autoplay: Enable the switcher to show the autoplay settings.
4. Autoplay Speed: Set the speed for the autoplay.

5. Pause on Hover: Enable the switcher to pause the item on hover.
6. Loop: For the infinity time play enable the Loop switcher.
7. Keyboard: Enable the switcher to enable it by following the keyboard.
8. Animation Speed (ms): Set the speed for the animation.

9. Observer: Enable the switcher to demonstrate the observer feature.
10. Mouse wheel: Enable the switcher to scroll the slider on the mouse wheel.

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.

Slider Section

Go to Style > Slider

1. Background Color: Choose the background color for the slider.
2. Overlay: Choose the overlay background to demonstrate the feature.
3. Background Type: Set the background type color and choose the color for this.
4. Margin: Set the margin for the inner space.
5. Padding: Set the padding for this.

Title Section

Go to Style > Title

1. Color: Set the color for the title.
2. Background: Set the background for the Title.
3. Padding: Set the padding for this.

4. Typography: Set the typography for the title.
5. Text Stroke: Set the stroke for the text.
6. Space: Set the space between the Title and Content.

Text Section

Go to Style > Text

1. Text Color: Set the color for the text.
2. Background: Set the background for the text.
3. Padding: Set padding for the inner space.
4. Text Typography: Set the typography for the text.
5. Text Space: Set the space between the text.

Button Section

Go to Style > Button

Normal

1. Color: Set the color for the button text.
2. Background Color: Choose the background color for the button.
3. Border Type: Set the type for the border.
4. Border Width: Set the thickness for the border.

5. Border Color: Select the color for the border.
6. Border Radius: Set the radius for the border.
7. Padding: Set the inner space for the padding.
8. Box Shadow: Make a shadow for the box item.
9. Typography: Set the typography for the button.

Hover

1. Color: Set the color for the Button.
2. Background: Set the background for the button.
3. Border Color: Set the color for the border.
4. Animation: Set the animation for the button.

Navigation Section

Go to Style > Navigation

ARROWS

Normal

1. Color: Set the color for the navigation arrows icon.
2. Background: Set the background for the navigation.
3. Border Type: Set 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: Set the radius for the border.
7. Padding: Set the padding for the border.
8. Size: Set the size for the normal.
9. Space Between Arrows: Set the spacing for the arrows.

Hover

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

OFFSET

1. Arrows Horizontal Offset: Set the offset for the horizontal position.

Video Assist

Please check the demo page for examples.
Thanks in advance.