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

Activate ACF Gallery 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 Gallery Widget Name.
3. Enable the ACF Gallery 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 Gallery.
2. To make changes hit the ” Save Changes ” button.

ACF Gallery

1. Field Type: Select the Field Type. Different types of fields are available. Select the Gallery for Field Type.
2. Field Label: Set the label for the field label. e.g.: ACF Gallery.
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 library. e.g.: Image Array
5. Library: Set the library option to All.

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 Gallery

Navigate to the Pages > All Pages

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

Page Named Find the ACF Gallery Fields

1. Set the name for the page. e.g.: ACF Gallery Page.
2. The Fields group appear on the top.
3. The Gallery fields appear.
4. At the bottom click on the ” Add Gallery ” button to add gallery item from WordPress Media Library.

Add Content

1. ACF Gallery: Select the media from the library and selected media will appear here.

Edit with Elementor

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

Insert ACF Gallery

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

Image Gallery Section

Go to Content > Image Gallery

1. Skin: Different types of skin are available here. Choose the preferred skin. e.g.: Default, Hidden, Carousel.

Gallery Field

1. Search by the ACF Fields name. e.g.: ACF Gallery.
2. The result will appear here and select the fields.

4. The Gallery image will appear.

5. Image Resolution: Set the resolution for the Images.
6. Image Mask: Set the mask for the images different options are available here.

• Masking Shape: Choose the Masking shape for the image, Different styles are available choose one.
• Position: Set the position for the Image.
• Size: Set the size for the image.
• Repeat: Set the repeat for the image.

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.

Items Section

Go to Style > Items

Normal

1. Border Type: Set the type for the border.
2. Border Width: Set the thickness of the border.
3. Border Color: Set the color for the border.
4. Border Radius: Make the border radius.

Overlay

1. Animation: Set the animation for the Overlay Items.
2. Glassmorphism: Enable the switcher to show the glassmorphism effects.
3. Blur Level: Set the level for the galssmorphism.
4. Color: Choose the color for the effect.
5. Gap: Set the gap.

Caption Section

Go to Style > Caption

1. Color: Set the color for the caption.
2. Background Type: Choose the border type color and select the color for the caption.
3. Padding: Set inner space by setting the padding.
4. Margin: Set the margin for the caption section.

4. Border Type: Choose the type for the border.
5. Border Width: Set the thickness for the border.
6. Border Color: Choose the border color.
7. Radius: Make the border radius.

9. Box Shadow: Set the shadow for the Box.
10. Typography: Set the typography for the Captions.

Video Assist

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