In this documentation, we will discuss the customization of the General Slider widget With Meteor Skin, brought to you by the Prime Slider.

Enable The General Slider Widget

To use the Elementor General Slider widget from Prime Slider, first, you have to enable the widget.

1. Go to WordPress dashboard > Prime Slider Plugin dashboard.
2. Then Click the Core Widgets Tab.
3. Search the General Slider Widget Name.
4. Enable the General Slider Widget.
5. Hit the Save Settings Button.

Inserting The General Slider widget

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

2. Search the General Slider widget.

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

Work With The Content Tab

Sliders Section

Go to Content > Sliders

1. Skin: This option allows you to change the slider skin to Default, Slide, Crelly & Meteor. Here we selected the Meteor Skin.
2. Close Item: You can delete the Slider item by clicking the Close icon button.
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.

In the Slider Items, each item contains more options. There are two tabs that present those options. These are Content & Optional. Let’s start with the Content Tab – 
1. Sub Title: You can add the sub-title text in this option.
2. Title: You can add the title text with this option.
3. Button Text: You can add the button text with this option.
4. Button Link: You can add a link to the button with this option.
5. Background: You can select the background of the slider with this option. You can select Color (Below you will get the color change option), Image (Below you will get the image change option), Video (Below you will get the video link add option), Youtube (Below you will get the video link add option). Here we selected the background as image and on below image option, we uploaded our selected image.

Now let’s proceed with the Optional Tab –

6. Title Link: This option allows you to add a link to the title.
7. Excerpt: This option allows to to add a short summary and customize the description.

Additional Options Section

Go to Content > Additional Options

1. Slider Ratio: You can adjust the slider ratio to width & height with this option.
2. Minimum Height: You can adjust the slider height with this option.
3. Enable Response Height: Enable the switcher to set the slider height as responsive for all device.
4. Content Max Width: You can change the width of the content with this option.
5. Alignment: You can set the content position to left, center or right with this option.

6. Show Sub Title: Enable the switcher to show the sub title to the audience.
7. Sub Title HTML Tag: This option lets you select the heading for the sub title. 
8. Show Title: Enable the switcher to show the title to the audience.
9. Title HTML Tag: This option lets you select the heading for the title.
10. Show Button: Enable the switcher to show the button to the audience.

11. Show Button Icon: Enable the switcher to show the button icon with this option.
12. Show Excerpt: Enable the switcher to show the excerpt (short summery) to the audience.
13. Show Social Icon: You can show the social icon to the audience by enable this option.
14. Show Scroll Button: You can show the scroll button to the audience by enabling this option.

15. Show Pagination: Enable the switcher to show the page number to the audience.
16. Image Resolution: You can change the image resolution with this option.
17. Background Image Setting: You can make changes to the background image with this option. Here you will get position, repeat & size option to set up the background image.

Social Icon Section  

Go to Content > Social Icon

The settings in this section are the same as those in the Slider section described above. For a detailed explanation, please refer to the Slider section to understand how these options work.

Now, let’s proceed to the inner options of the social icon –

2. Title: You can add a title to your social icon with this option.
3. Link: This option allows you to add a link to the social icon.
4. Choose Icon: You can choose an icon with this option.

Scroll Down Section

Go to Content > Scroll Down

1. Duration: This option controls the timing of how long the scroll animation will take.

2. Offset: This option adjusts the final scroll position by a number of pixels (positive or negative).
3. Section ID: You can add the section ID here to go to the section where you want to go by clicking on the scroll down button.

Slider Settings Section

Go to Content > Slider Settings

1. Autoplay: By enable this option you can automatically play the slides one after another.
2. Autoplay Interval (ms): This option let you set the time delay between each slide transition.
3. Pause on Hover: Enable the switcher to pause autoplay when the user hovers over the slider.
4. Animation Speed: This option controls how fast the transition animation occurs between slides.
5. Loop: Enable the switcher to go back to the first automatically after the last slide.

6. Draggable: Enable the switcher to allow users to manually drag (swipe) slides left/right.
7. Slider Animations: You can select the type of animation used for slide transitions. There are various types of animation. These are slide, fade, scale, push & pull.
8. Parallax Animation: Enable the switcher to add a layered scrolling effect to slider elements.
9. Kenburns Animation: Enable the switcher to add a smooth zoom-in/out and pan effect on background images.
10. Kenburn Reverse: Enable the switcher to reverse the Kenburns animation direction (zoom-out instead of in, or pan the other way).

Work with The Style Tab

Sliders Section

Go to Style > Sliders

1. Overlay: You can select the overlay with this option.
2. Content Margin: This option allows you to adjust the space & create gaps around the content.

In this section, we have four tabs. These are Title, Sub Title, Excerpt & Button. Let’s explore those tabs one by one. 

Title Tab

1. Title Width: You can set the title width with this option.
2. Color: You can change the title color with this option.
3. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
4. Text Stroke: This option allows you to add an outline or border around text, creating a visually distinct effect.
5. Title Spacing: You can adjust the space between title and the excerpt with this option.

6. Advanced Style: Enable the switcher to get more options below to style the title.
7. Background Type: You can change the background type here. There are two options in background type. These are Classic & Gradient.

In Classic, you can change the background color and also set an image as the background. In the gradient option, you can also set background color along with locations and angle for each breakpoint to ensure the gradient adapts to different screen sizes. Also, you can change the gradient type (Radial & Linear) and positions.
8. Color: You can change the background color with this option.
9. Image: You can change the background image with this option.
10. Text Shadow: This option allows you to add a shadow effect on the text.

11. 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, dots, dashes, and grooves.

12. Border Width: Set the thickness of the border with this option.
13. Border Color: You can change the border color with this option.
14. Border Radius: This option controls the roundness of the border.
15. Box Shadow: While working with this option, you will get three more options (Blur, Horizontal & Vertical). Blur Controls how sharp or soft the shadow will appear. By using the horizontal option you can move the shadow left or right and by using the vertical option you can move the shadow up or down.
16. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.

Sub Title Tab

1. Color: You can change the subtitle color with this option.
2. Typography: You can change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
3. Sub Title Spacing: This option allows you to adjust the space between the title and the subtitle with this option.

Excerpt Tab

1. Color: You can change the excerpt text color with this option.
2. Primary Background: You can change the primary background with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
3. Width: You can adjust the width of the excerpt with this option.
4. Excerpt Spacing: You can adjust the space between the excerpt and the button with this option.

Button Tab

In this tab, we have two more sub section. One is Normal and the other is Hover. Let’s start with the Normal sub section – 
1. Color: You can change the button text color with this option.
2. Background Type: You can select the background type to classic or gradient with this option. Here we selected the classic background.
3. Color: You can change the background type with this option.
4. Image: You can change the background image with this option.

5. Border Type: You can add border with this option.
6. Border Width: Set the thickness of the border with this option.
7. Border Color: You can change the border color with this option.
8. Border Radius: This option controls the roundness of the border.

9. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
10. Margin: This option allows you to adjust the space & create gaps between elements.
11. Box Shadow: You can add the shadow effect to the button with this option.
12. Typography: Change the button text font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
13. Icon Custom Style: Enable the switcher to get more options to edit the icon.

Icon Style

14. Color: You can change the icon color with this option.
15. Background Type: You can select the background type to classic or gradient with this option.
16. Color: You can change the background color with this option.
17. Image: You can change the background image with this option.

18. Border Type: This option allows you to add a border to the icon.
19. Border Width: Set the thickness of the border with this option.
20. Border Color: You can change the border color with this option.
21. Border Radius: This option controls the roundness of the border.

22. Size: You can make changes to the icon size with this option.
23. Vertical Spacing: You can move the position of the icon vertically with this option.
24. Horizontal Spacing: You can move the position of the icon horizontally with this option.
25. Box Shadow: You can add a shadow effect to the icon with this option.

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.
4. Image: You can change the background image with this option.
5. Border Color: You can change the border color with this option.

Icon Style

6. Color: You can change the button text hover color with this option.
7. Background Type: You can select the background type to Classic or Gradient from here. Here we selected the Classic.
8. Color: You can change the background hover color with this option.
9. Image: You can change the background image with this option.
10. Border Color: You can change the border color with this option.

Social Icon Section

Go to Style > Social Icon

In this Section, we have two tabs. These are Normal & Hover. Let’s start with the Normal Tab – 

1. Color: You can change the social icon 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 hover color with this option.
4. Image: You can change the background image with this option.

5. Border Type: You can add border to the social icon with this option.
6. Border Width: Set the thickness of the border with this option.
7. Border Color: You can change the border color with this option.
8. Border Radius: This option controls the roundness of the border with this option.
9. Padding: You can adjust the inner space of the social icon with this option.

10. Box Shadow: You can add a shadow effect with this option.
11. Icon Size: You can make changes to the social icon size with this option.
12. Icon Space Between: This option allows you to adjust the space between the social icons.
13. Horizontal Spacing: You can move the icon position horizontally with this option.
14. Show Tooltip: Enable the switcher to show the icon name when the mouse hovers over the icon.

Now, let’s proceed to the Hover Tab –

15. Color: You can change the button text hover color with this option.
16. Background Type: You can select the background type to Classic or Gradient from here. Here we selected the Classic.
17. Color: You can change the background hover color with this option.
18. Image: You can change the background image with this option.
19. Border Color: You can change the border hover color with this option.

Scroll Down Section

Go to Style > Scroll Down

In this Section, we have two tabs. These are Normal & Hover. Let’s start with the Normal Tab – 
1. Color: You can change the scroll down color with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

Now let’s proceed to the Hover Tab –

3. Hover: You can change the scroll down hover color with this option.

Navigation Section

Go to Style > Navigation

1. Dot Color: You can change the dot color with this option.
2. Active Dot Color: You can change the active dot color with this option.
3. Dot Size: You can adjust the dot size with this option.
4. Dots Horizontal Spacing: You can move the dots’ position horizontally with this option.

All done! You have successfully customized the General Slider Widget with the Meteor Skin on your website. 

Video Assist

You can also watch the video tutorial to learn more about the General Slider Widget with Meteor Skin Widget. Please visit the demo page for examples.

Thanks for being with us.