In this documentation, we will discuss the customization of the Remote Pagination widget, brought to you by the Ultimate Post Kit Pro addon for Elementor. Please remember that the Remote Pagination are only compatible with Swiper-based slider or carousel widgets. It acts as a separate navigation element that can be customized and positioned independently from the main slider layout.

Enable The Remote Pagination Widget

To use the Remote Pagination widget from Ultimate Post Kit Pro, first, you have to enable the widget.

1. Go to WordPress dashboard > Ultimate Post Kit Pro Plugin dashboard.
2. Then, Click the Core Widgets Tab.
3. Search the Remote Pagination widget Name.
4. Enable the Remote Pagination widget.
5. Hit the Save Settings Button.

Inserting The Remote Pagination

To use a remote widget, first add a Swiper-based slider like the Alex Carousel (for example) to your page in Elementor, then link it to the remote widget. Make sure both Elementor and Ultimate Post Kit Pro are installed before using the widget.

1. Go to the Elementor Editor Page and Hit the “+” icon Button.

2. Search the Alex Carousel.

3. Drag the widget and drop it on the editor page.

After adding the Alex Carousel, insert the Remote Pagination widget anywhere on the page. It doesn’t need to be directly below the slider. It will work from any position.

4. Go to the Elementor Editor Page and hit the “+” icon Button.

5. Search the Remote Pagination widget.

6. Drag the widget and drop it on the editor page.

Linking the Remote Pagination with the Carousel

Set CSS ID for the Carousel

Select Carousel (Alex) > Advanced > Layout > CSS ID

1. CSS ID: You have to assign a CSS ID to the slider to link up with the remote Pagination. For example, we have used the CSS ID as Alex and copied it to use later on the remote Pagination widget.

Set CSS ID for the Widget

Go to Content > Remote Pagination

1. Remote Carousel ID: In this option, you have to paste the CSS ID that was already used and copied on the slider CSS ID option. (Note: Please remember that the CSS ID has to be the same on both the Carousel and the widget)

The link up with the Alex Carousel and the Remote Pagination widget is done. Now let’s customize the Remote Pagination.

Work With The Content Tab

Remote Pagination Section

Go to Content > Remote Pagination

2. Layout: You can set the layout of the pagination to horizontal or vertical with this option.

3. Slider / Carousel Loop Status: Enable the toggle to ensure proper syncing with the connected slider. Enable it only if the slider’s loop is active and deactivate the toggle if the connected carousel or slider loop feature is off.

Items Section

Go to Content > Items

1. Close Item: You can delete the Slider item by clicking the Close icon button.

2. Bullet Number: You can enter the bullet number or text manually into the pagination with this option. 

3. Copy Item: This option lets you copy the same item.

4. Add Item: You can add a new item by clicking the “+” Add Item button.

5. Image Resolution: You can adjust the resolution of the image with this option.

Work with The Style Tab

Remote Pagination Section

Go to Style > Remote Pagination

1. Alignment: You can move the Pagination position to left, center or right with this option.

2. Spacing: You can adjust the space between the Pagination digits with this option.

3.Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

4. Border Type: This option allows you to add borders to your items. You can select various border types from this option, such as Solid, Double, Dotted, Dashed, and Groove.

5. Border Width: Set the thickness of the border with this option.

6. Border Color: You can change the border color with this option.

7. Border Radius: This option controls the roundness of the border.

5. Height: You can adjust the pagination box’s height with this option.

6. Width: You can adjust the width of the pagination box with this option.

7. Box Shadow: This option allows you to add a shadow overlay to the pagination box.

5. Height: You can adjust the pagination box’s height with this option.

6. Width: You can adjust the width of the pagination box with this option.

7. Box Shadow: This option allows you to add a shadow overlay to the pagination box.

Now, let’s proceed to the customization of the Active Tab – 

1. Color: You can change the Pagination bullet number active color with this option.

2. Background Type: You can change the background type to classic or gradient with this option. Here, we have selected the background type as classic.

3. Color: You can change the active background color with this option.

4. Image: You can add or change the background image with this option.

5. Height: You can adjust the pagination box’s active height with this option.

6. Width: You can adjust the active width of the pagination box with this option.

7. Border Color: You can change the active border color of the pagination box with this option.

8. Box Shadow: This option allows you to add a shadow overlay to the pagination box.

All done! You have successfully customized the Remote Pagination widget on your website.

Video Assist

The video will come soon. Please visit the demo page for examples.

Thanks for being with us.