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

Activate ACF Tabs Widget

To use the ACF Tabs 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 Tabs Widget Name.
3. Enable the ACF Tabs 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 Tabs .
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 Tabs 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 Tabs Title.
3. Field Name: Set the name for the Field name. It will be in small later no space , use the underscore.
4. Default Value: Set the value for the default item.

ACF Tabs Sub 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 Tabs Sub Title.
3. Field Name: Set the name for the Field name. It will be in small later no space , use the underscore.
4. Default Value: Set the value for the default item.

ACF Content

1. Field Type: Select the Field Type. Different types of fields are available. Select the WYSIWYG Editor for Field Type.
2. Field Label: Set the label for the field label. e.g.: ACF Content.
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 Tabs

Navigate to the Pages > All Pages

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

Page Named Find the ACF Tabs Fields

1. Set the name for the page. e.g.: ACF Tabs.
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 Tabs Title: Set the Content of this Title fields.
2. ACF Tabs Sub Title: Set the Content of this Sub Title fields..
3. ACF Tabs Content: Set the Content for the Content fields.
4. 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 Tabs

1. Go to the Elementor Editor Page and Hit the Add Element ” + ” Icon.
2. Search by the ACF Tabs 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. Search by the field name. e.g.: ACF Tabs Repeater.
2. The Repeater field will appear and select it.

3. The tabs will appear according to the repeater.

Title

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

Sub Title

5. Search by the field name. e.g.: ACF Tabs Sub Title. and Select the Sub Title.

Content

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

7. Alignment: Set the alignment for the Content, Left, Center, Right and Justified.
8. Nav Spacing: Set the spacing for the Nav.
9. Content Spacing: Set the spacing for the content.

Additional Section

Go to Content > Additional

1. Active Item No: Choose the active number of the tab.
2. Transition: Set the tabs transitions.
3. Animation Duration: Set the duration for the animation.

4. Tabs Nav Sticky: Enable the switcher to show the sticky on the tabs.
5. Offset: Set the position for the offset.
6. Sticky on Scroll Up: Enable the switcher to show the sticky on scrolling up.

7. Fullwidth Nav on Mobile: Enable the switcher to show the full nav menu on Mobile device.
8. Swiping Tab on Mobile: Enable the switcher to show the swiping tab on mobile.
9. Hash Location: Enable the switcher to show the Hash Location.
10. Equal Tab Height: Enable the switcher to show the Equal height for all the Tab.

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.

Tab Wrapper Section

Go to Style > Tab Wrapper

1. Background Type: Set the background type color for the tabs item. Choose the tabs color for the wrapper section.
2. Border Type: Set the border for the tabs item.
3. Border Width: Set the thickness for the border.

4. Border Color: Set the color for the Border.
5. Border Radius: Make the border corner edges rounded.
6. Padding: Set the padding for the tabs wrapper item.

Tab

Go to Style > Tab

Normal

1. Text Color: Set the color for the Text.
2. Background Type: Select Background type color for the tab, Choose the Color for this.
3. Border Type: Set the thickness for the border.
4. Border Width: Set the width for the border.
5. Border Color: Set the color for the border.

6. Border Radius: Make the border radius for the tabs item.
7. Row Gap: Set the gap between the tabs item.
8. Padding: Set the padding for inner space.
9. Typography: Choose the Typography for the Tabs heading.
10. Box Shadow: Set the shadow for the box.

Hover

1. Background Type: Choose the background type color for the tab.
2. Text Color: Set the text color.
3. Border Color: Set the border color for the tab.

Active

1. Style Color: Set the style color.
2. Background Type: Choose the background type for tab item.
3. Text Color: Choose the text color for the tab.
4. Box Shadow: Make a shadow for the tab item.

Sub Title Section

Go to Style > Sub Title

Normal

1. Text Color: Set the color for the Text.
2. Spacing: Set the spacing for the tabs item.
3. Typography: Select the typography for the sub title.

Hover

1. Text Color: Set the color for the text.

Active

1. Text Color: Set the color for the text.

Content Section

Go to Style > Content

1. Background Type: Choose the type for the Background.
2. Text Color: Set the color for the Text.
3. Border Type: Set the border type for the Content. None, Double, Solid, Dashed, Dotted type are available.
4. Border Width: Set the thickness for the Border.

5. Border Color: Set the color for the Border.
6. Border Radius: Set the edges rounded by setting the border.
7. Padding: Set the padding for the
8. Typography: Choose the typography for the content section.

Sticky Section

Go to Style > Sticky

1. Background : Set the background for the sticky section. The Background color will appear while sticky will active.
2. Box Shadow: Make a shadow for the Box.
3. Border Radius: Set the border radius.

Video Assist

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