In this documentation, we will discuss the customization of the Motion Slider widget, brought to you by the Prime Slider.
Enable The Motion Slider Widget
To use the Elementor Motion Slider widget 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 Motion Slider Widget Name.
- Enable the Motion Slider Widget.
- Hit the Save Settings Button.
Inserting The Motion Slider widget
1. Go to the Elementor Editor Page and Hit the “+” icon Button.
2. Search the Motion Slider widget.
3. Drag the widget and Drop it on the editor page.
(Note: You need both Elementor and Prime Slider Pro installed to use this widget.)
Work With The Content Tab
Slider Items Section
Go to Content > Slider Items
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.
Come to the each slider item, you will get the below cuatomization options-
1. Image: You can set an image for the slider item from here.
2. Title: This option lets you change the title text of the slider item.
3. Description: This option lets you change the description text of the slider item.
4. Button Link: You can set a button link under the button.
Additional Settings Section
Go to Content > Additional Settings
1. Style: You can set the Sider style as – Default, Reverse, Left, and Right.
2. Height: This option lets you set the slider height.
3. Active Image as Background: If you enable this switcher button, then the active slider image will appear as the slider background image.
4. Overlay: This option lets you set the overlay color type – Classic or Gradient.
5. Overlay Color: This option lets you set the slider overlay color.
6. Rotate Speed: You can adjust the rotation speed from here. The Smallest value makes the slider faster.
7. Content Offset: You can set the content vertical and Horizontal offset from here.
8. Button Text: This option lets you change the button text.
Work with The Style Tab
Image Section
Go to Style > Image
Come to the image section, you will get the two tabs section; Normal and Hover. Let’s proceed with the Normal tab section.
1. Size: This option lets you set the slider image height.
2. Gap: You can adjust the gap between slider images.
3. Border Type: You can set the Border Type to Default, None, Solid, Double, Dotted, Dashed, or Groove. We choose here the Border Type Solid.
4. Border Width: The border width property allows you to control how thick or thin the border is.
5. Border Color: This lets you change the Border color.
6. Border Radius: Customizes the border corners for roundness.
7. 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.
In the Hover tab section, you will get the below customization options-
1. Border Color: This lets you change the hover Border color.
2. Box Shadow: You can set the item hover box shadow from here.
Content Section
Go to Style > Content
1. Alignment: You can set the content alignment – Left, Center and Right.
2. Max Width: You can adjust the content max width from here.
3. Border Type: you can set the Border Type to Default, None, Solid, Double, Dotted, Dashed, or Groove. We choose here the Border Type Solid.
4. Border Width: The border width property allows you to control how thick or thin the border is.
5. Border Color: This lets you change the content Border color.
6. Border Radius: Customizes the border corners for roundness.
7. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
8. Background Type: You can select the content background type to Classic or Gradient from here. Here we selected the Classic.
9. Color: You can change the content background color with this option. If you want then you can set an image instead of background color.
Title/Description Section
Go to Style > Title/Description
Come to the Title/Description section, you will get this two tabs section; Title and Description. Lets proceed with the Title tab section.
1. Color: This option lets you change the Title Color.
2. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
3. Margin: Adjusts the position of an object over the canvas.
4. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
In the Description tab section, you will get the below options-
1. Color: This option lets you change the description Color.
2. Padding: You can adjust the description padding from here.
3. Margin: Adjusts the position of an object over the canvas.
4. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
Button Section
Go to Style > Button
In this Section, we have two tabs. These are Normal & Hover. Let’s start with the Normal Tab –
1. Color: You can change the button normal color with this option.
2. Background Type: You can select the background type to Classic or Gradient from here. Here we selected Classic.
3. Color: You can change the background normal 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 Radius: Customizes the border corners for roundness.
6. Padding: You can adjust the button padding from here.
7. Margin: Adjusts the position of an object over the canvas.
8. Box Shadow: Set the button normal box shadow from here.
9. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
Now, let’s proceed to the Hover Tab –
1. Color: You can change the button text hover color with this option.
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 background hover color with this option. If you want then you can set an image instead of background color.
4. Box Shadow: You can add the button hover box shadow from here.
Navigation Section
Go to Style > Navigation
1. Arrows Icon: Here you will get 1 to 23 unique arrows style and can choose one of them.
In this Section, we have two tabs. These are Normal & Hover. Let’s start with the Normal Tab –
2. Color: You can change the arrow normal color with this option.
3. Background Type: You can select the background type to Classic or Gradient from here. Here we selected Classic.
Color: You can change the arrows background normal 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.
7. Padding: You can adjust the navigation padding from here.
8. Size: This option lets you set the navigation arrows size.
9. Horizontal Offset: This option lets you set the navigation horizontal offset.
10. Box Shadow: You can set the navigation normal box shadow from here.
Now, let’s proceed to the Hover Tab –
1. Color: You can change the arrows hover color with this option.
2. Background Type: You can select the background type to Classic or Gradient from here. Here we selected the Classic. You can change the arrows background hover color with this option. If you want then you can set an image instead of background color.
3. Border Color: This lets you change the hover Border color.
4. Box Shadow: You can set the arrows hover box shadow from here.
All done! You have successfully customized the Motion Slider on your website.
Video Assist
The video tutorial will come soon. Please visit the demo page for examples.
Thanks for being with us.
