In this documentation, we will discuss the customization of the Pieces slider widget, brought to you by the Prime Slider addon for Elementor.
Enable The Pieces Slider
To use the Pieces Slider from Prime Slider, first, you have to enable the widget.
- Go to WordPress dashboard > Prime Slider Plugin dashboard.
- Then, Click the Core Widgets Tab.
- Search the Pieces Slider Name.
- Enable the Pieces Slider.
- Hit the Save Settings Button.
Inserting The Pieces Slider
1. Go to the Elementor Editor Page and hit the “+” icon Button.
2. Search the Pieces Slider.
3. Drag the widget and drop it on the editor page.
Work With The Content Tab
Sliders Section
Go to Content > Sliders
1. Add Item: You can add a new item by clicking the “+”Add Item button.
2. Copy Item: This option lets you copy the same item.
3. Close Item: You can delete the Slider item by clicking the Close icon button.
1. Title: You can add a title text with this option.
2. Title Link: This option allows you to add a link under the title.
3. Image: You can add and change an image with this option.
Additional Settings Section
Go to Content > Additional Settings
1. Show Title: Enable/Disable the show title switcher button to show/hide the title from slider.
2. Image Resolution: You can change the image resolution with this option.
3. Image Height: This option lets you set the slider image height.
4. Image Width: This option lets you set the slider image width.
Work with The Style Tab
Title Section
Go to Style > Title
1. Color: You can change the title color with this option.
2. Background Color: You can change the Title background color with this option.
3. Radius: You can set the Title border radius from here.
4. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
5. Font Size: This option lets you set the title font size.
6. Font Family: This option lets you set the title font family.
Number Section
Go to Style > Number
1. Color: You can change the number color with this option.
2. Background Color: You can change the number background color with this option.
3. Radius: You can set the number border radius from here.
4. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
5. Font Size: This option lets you set the number font size.
6. Font Family: This option lets you set the number font family.
Navigation Section
Go to Style > Navigation
In this Section, we have two tabs. These are Normal & Hover. Let’s start with the Normal Tab –
1. Color: This option allows you to change the navigation normal color.
2. Background Type: You can select the background type to Classic or Gradient from here. Here we selected the Classic.
3. Color: You can change the navigation normal background color with this option.
4. Border Type: you can set the Border Type to Default, None, Solid, Double, Dotted, Dashed, or Groove. We choose here the Border Type Solid.
5. Border Width: The border width property allows you to control how thick or thin the border is.
6. Border Color: This lets you change the Border color.
7. Border Radius: Customizes the border corners for roundness.
8. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
9. Margin: Adjusts the position of an object over the canvas.
10. Box Shadow: This option lets you add the box shadow for the navigation.
11. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
In the hover tab section, you will get the below options-
12. Color: This option allows you to change the navigation hover color.
13. Background Type: You can select the background type to Classic or Gradient from here. Here we selected the Classic.
14. Color: You can change the navigation hover background color with this option.
15. Border Color: This lets you change the navigation Border color.
16. Box Shadow: This option lets you add the box shadow for the navigation hover.
All done! You have successfully customized the Pieces Slider on your website.
Video Assist
You can also watch the video tutorial to learn more about the Pieces Slider. Please visit the demo page for examples.
Thanks for staying with us.
