How To Use Isolate Slider Default Skin By Prime Slider

In this documentation, we will discuss the customization of the Isolate Slider Default Skin, brought to you by the Prime Slider.

Enable The Isolate Slider Widget

To use the Isolate 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 Isolate Slider Widget Name.

4. Enable the Isolate Slider Widget.

5. Hit the Save Settings Button.

Inserting the Isolate Slider widget

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

2. Search the Isolate Slider widget.

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

Work With The Content Tab Of Isolate Slider Default Skin

Sliders Section

Go to Content > Sliders

1. Skin: This option allows you to change the slider skin to Default, Locate & Slice. Here we selected the Default 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. Title: You can add the title text with this option.

2. Button Text: You can add the button text with this option.

3. Button Link: You can add a link to the button with this option.

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

5. Lightbox/Link: This option allows you to choose the type of content that will appear when the play button (on the slider image) is clicked. The types are selected image, website, video, youtube, vimeo & google map. Here we selected YouTube.

6. YouTube Source: Here, you can add the YouTube video link.

Now let’s proceed with the Optional Tab –

7. Sub Title: You can change the subtitle text with this option.

8. Title Link: This option allows you to add a link to the title.

9. 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. Show Title: Enable the switcher to show the title to the audience.

5. Title HTML Tag: This option lets you select the heading for the title.

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 Button: Enable the switcher to show the button to the audience.

9. Show Text: Enable the switcher to show the description to the audience.

10. Show Play Button: By enable this switcher you can visible the play icon.

11. Show Scroll Button: You can show the scroll button to the audience by enabling this option.

12. Show Navigation: Enable the switcher to show the navigation bar to the audience.

13. Show Pagination: Enable the switcher to show the page number to the audience.

14. Alignment: You can set the content position to left, center or right with this option.

15. Content Position: You can set the content position to left or right.

16. Column Position: This option allows you to set the column position to top or bottom. (Note: This option will work only for mobile view.)

17. Image Resolution: You can change the image resolution with this option.

18. Image Match Height: With this option, you can match the same image height for desktop, tablet and mobile.

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. Button Text: You can add the button text with this option.

4. 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 enabling this option you can automatically play the slides one after another.

2. Autoplay Interval (ms): This option lets 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. Parallax Animation: Enable the switcher to add a layered scrolling effect to slider elements.

7. Kenburns Animation: Enable the switcher to add a smooth zoom-in/out and pan effect on background images.

8. 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

Wrapper Section

Go to Style > Wrapper

1. Overlay: Select the type of overlay to apply over the background.

2. Overlay Color: You can choose the overlay color and adjust its transparency to control the visual effect.

3. Wrapper Spacing: You can set the spacing around the wrapper content using the slider for better alignment and layout control.

4. Slide Fill Color: Defines the background color for the slide area to visually separate content blocks.

Title Section

Go to Style > Title

1. Color: You can change the title color with this option.

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

3. Text Stroke: This option allows you to add an outline or border around text, creating a visually distinct effect.

4. Text Shadow: This option allows you to add a shadow effect to the text.

5. Title Spacing: You can adjust the space between the title and the description with this option.

6. First Word Style: Enable this switcher to customize the title’s first word.

7. Color: You can change the title’s first word color with this option.

8. Line Color: You can change the line color with this option.

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

Text Section

Go to Style > Text

1. Color: You can change the text color 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 text with this option.

4. Excerpt Spacing: You can adjust the space between the excerpt and the button with this option.

Image Section

Go to Style > Image

1. 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.

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

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

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, 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.

8. CSS Filters: This setting lets you apply visual changes to the image. In this setting you can modify properties like Blur, Brightness, Contrast, Saturation, and Hue.

•   Blur: Softens the image, reducing sharpness.

•   Brightness: Adjusts the overall lightness or darkness.

•   Contrast: Modifies the difference between light and dark areas.

•   Saturation: Controls the intensity of the colors.

•   Hue: Shifts the overall color spectrum.

Button Section

Go to Style > Button

In this tab, we have two tabs. One is Normal and the other is Hover. Let’s start with the Normal Tab –

1. Color: You can change the button text color with this option.

2. Background Color: You can change the button color with this option.

3. Border Type: You can add border with this option.

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

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

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

7. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element

8. Box Shadow: You can add the shadow effect to the button with this option.

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

Now, Let’s Proceed to the Hover Tab –

10. Color: You can change the button text hover color with this option.

11. Background: You can change the background hover color with this option.

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

Lightbox Play Button Section

Go to Style > Lightbox Play Button

1. Position: You can adjust the lightbox play button position to Top Left, Top Right, Center, Bottom Left & Bottom Right. Here we selected the ceneter position.

2. Animation: This option allows you to select the animation style to Shadow Pulse, Multi Shadow & Line Bounce. Here we selected the Shadow Pulse animation.

3. Animated Shadow Color: This option allows you to change the animated shadow shadow color.

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

1. Color: You can change the play button icon color with this option.

2. Background: You can change the background color with this option.

3. Border Type: This option allows you to add various types of borders to the lightbox play button.

4. Border Width: You can set the thickness of the border with this option.

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

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

7. Padding: This option allows you to adjust the inner space of the lightbox play button.

8. Margin: This option controls the outer space and gaps of the lightbox play button.

9. Icon Size: You can make changes to the lightbox play button icon size with this option.

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

Now lets proceed to the Hover Tab –

11. Color: You can change the play button icon hover color with this option.

12. Background Color: You can change the background hover color with this option.

13. 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 icon color with this option.

2. Background Color: You can change the background color with this option.

3. Border Type: This option allows you to add various types of borders to the scroll down icon.

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

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

6. Border Radius: You can control the roundness of the border with this option.

7. Padding: This option allows you to adjust the inner space and gaps of the scroll down icon.

8. 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 –

9. Color: You can change the icon hover color with this option.

10. Background Color: You can change the background hover color with this option.

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

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. Arrows Color: This option allows you to change the arrows’ 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 background hover color with this option.

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

5. Border Type: This option allows you to add a border.

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. Margin: This option allows you to adjust the space & create gaps between elements.

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

11. Size: You can make changes to arrow’s size with this option.

12. Offset: This option allows you to move the arrow’s position vertically or horizontally.

Pagination

13. Dot Color: You can change the dot color with this option.

14. Active Dot Color: You can change the active dot color with this option.

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

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

17. Spacing: You can adjust the space between the pagination.

18. Size: You can make changes to the pagination (dots) size with this option.

19. Position: With this option you can move the pagination (dots) position to the left or right.

Now, let’s proceed to the Hover Tab –

1. Arrows 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 hover color with this option.

All done! You have successfully customize the Isolate Slider Default Skin on your website.

Video Assist

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

Thanks for being with us.