In this documentation, we will discuss the customization of the Remote Arrows widget, brought to you by the Ultimate Post Kit Pro addon for Elementor. Please remember that the Remote Arrows 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 Arrows Widget
To use the Remote Arrows widget from Ultimate Post Kit Pro, first, you have to enable the widget.
- Go to WordPress dashboard > Ultimate Post Kit Pro Plugin dashboard.
- Then, Click the Core Widgets Tab.
- Search the Remote Arrows widget Name.
- Enable the Remote Arrows widget.
- Hit the Save Settings Button.
Inserting The Remote Arrows
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 Arrows 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 Arrows widget.
6. Drag the widget and drop it on the editor page.
Linking the Remote Arrows 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 Arrows. For example, we have used the CSS ID as Alex and copied it to use later on the remote Arrows widget.
Set CSS ID for the Widget
Go to Content > Remote Arrows
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 Arrows widget is done. Now let’s customize the Remote Arrows.
Work With The Content Tab
Remote Arrows Section
Go to Content > Remote Arrows
2. Arrows Icon: You can customize the appearance of the arrow icons using this option. There are 23 built-in icon styles, plus a custom option that allows you to use your own design. Choose any style that fits your layout.
3. Text: You can change the next arrows’ text with this option.
4. Text: You can change the previous arrow’s text with this option.
Work with The Style Tab
Remote Arrows Section
Go to Style > Remote Arrows
1. Alignment: You can move the Arrows position to left, center or right with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
3. Arrows Space Between: You can adjust the space between the previous and next arrows with this option.
4. Icon/Text Space Between: You can adjust the space between the arrow’s icon and text with this option.
In this section, we have two more tabs. These are Normal & Hover. Let’s start with the Normal Tab –
5. Color: You can change the arrows’ text normal color with this option.
6. Background Type: You can change the color of any object background to classic or gradient. Here we choose the Background type Classic.
7. Background Color: This lets you change the Background color. If you want, you also can change an image to the Background.
8. Border Type: you can set the Border Type to Default, None, Solid, Double, Dotted, Dashed, or Groove. We choose here the Border Type Solid.
9. Border Width: The border width property allows you to control how thick or thin the border is.
10. Border Color: This lets you change the Border color.
11. Border Radius: Customizes the border corners for roundness.
12. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
13. Box Shadow: The Box Shadow property is used to create the shadow around the Category Button. It takes Four values: Horizontal offset, Vertical offset, blur, and Spread to customize the Box shadow.
Position: you can set the Box Shadow position Outline and Inset. Here we set the Box Shadow position Outline.
Box Shadow Color: This lets you change the Box Shadow color.
Now, let’s proceed to the Hover Tab –
1. Color: You can change the arrows icon and text hover color with this option.
2. Background Type: You can change the background type to classic or gradient with this option.
3. Color: You can change the background hover color with this option. if you want then you can add an image as the background.
4. Border Color: You can change the border hover color with this option.
5. Box Shadow: You can add a shadow effect to the arrows button with this option.
All done! You have successfully customized the Remote Arrows widget on your website.
Video Assist
The video will come soon. Please visit the demo page for examples.
Thanks for being with us.
