How To Use The Fortune Slider By Prime Slider

In this documentation, we will discuss the customization of the Fortune Slider, brought to you by the Prime Slider addon for Elementor.

Enable The Fortune Slider

To use the Fortune Slider 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 for the Fortune Slider Name.

4. Enable the Fortune Slider.

5. Hit the Save Settings Button.

Inserting the Fortune Slider

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

2. Search the Fortune 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. Close Item: You can delete the Slider item by clicking the Close icon button.

2. Copy Item: This option lets you copy the same item.

3. 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 a subtitle with 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. Image: You can add or change the image with this option.

Now let’s proceed with the Optional Tab -

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

7. Text: This option allows you to add a description and customize it.

Additional Options Section

Go to Content > Additional Options

1. Style: You can select the slider visual style with this option.

2. Height: You can adjust the slider height with this option.

3. Content Width: You can adjust the content width with this option.

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

5. Show Sub Title: Enable the switcher to show the sub title to the audience.

6. Sub Title HTML Tag: This option lets you select the heading for the sub title.

7. Show Title: Enable the switcher to show the title to the audience.

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

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

10. Text Hide On: You can hide the text by selecting the device's name with this option.

11. Show Button: Enable the switcher to show the button to the audience.

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

13. Show Fraction: Enable the switcher to show the fraction to the audience.

14. Content Position: You can adjust the content position to center, start, end, space between, space around & space evenly with this option.

15. Alignment: You can set the content alignment to left, center, right or justified with this option.

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 Speed: This option lets you set the time to transition each slide.

3. Pause on Hover: Enable the switcher to pause autoplay when the user hovers over the slider.

4. Grab Cursor: Enable/ Disable the switcher to show/hide the grab icon while hovering on the slider with this option.

5. Loop: Enable the switcher to go back to the first automatically after the last slide.

6. Mousewheel: You can navigate through the slider’s slides by scrolling your mouse wheel while your cursor is over the slider.

7. Animation Speed: This option controls how fast the transition animation occurs between slides.

8. Observer: Enabling this option helps the slider function correctly when it’s initially hidden.

9. Swiper Effect: This option allows you to select the swiper effect from Slide, Fade, Cube, Coverflow, Flip, Shutters, Tinder, GL, & Creative. Here we selected the slide swiper effect.

10. Direction: You can make the slide transition to vertically or horizontally with this option.

Work with The Style Tab

Image Section

Go to Style > Image

1. Overlay: You can change the overlay type with this option.

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

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

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

5. Width: You can make changes to the image width with this option.

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

Title Section

Go to Style > Title

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

2. Hover Color: You can change the title hover color with this option.

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

4. Margin: This option allows you to adjust the space & create gaps between elements.

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

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

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

Sub Title Section

Go to Style > Sub Title

1. Color: You can change the subtitle’s text color with this option.

2. Margin: This option allows you to adjust the space & create gaps between elements.

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

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

Read More Section

Go to Style > Read More

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

1. Button Type: You can select the button type to fill or outline with this option.

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

3. Border/Outline Color: You can change the border/outline color with this option.

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

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

6. Margin: This option allows you to adjust the space & create gaps between elements.

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

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

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

Navigation Section

Go to Style > Navigation

Arrows Sub Section

1. Arrows Icon: You can make changes to the arrows icon style with this option. 

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

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

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

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. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.

9. Margin: This option allows you to adjust the space & create gaps between elements.

10. Space Between: You can adjust the space between the arrow’s with this option.

11. Icon Size: You can make changes to the icon size with this option.

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

Now, let’s proceed to the Hover Tab -

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

14. Background Type: You can select the background type to Classic or Gradient from here. Here we selected the Classic.

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

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

17. Box Shadow: You can add a shadow effect with this option.

Fraction Sub Section

1. Color: You can change the fraction's active color with this option.

2. Hover Color: You can change the fraction’s hover color with this option.

3. Active Color: You can change the fraction’s active color with this option.

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

Offset Sub Section

1. Arrows Horizontal Offset: You can move the arrows horizontally with this option.

2. Arrows Vertical Offset: You can move the arrows vertically with this option.

3. Fraction Horizontal Offset: You can move the fraction horizontally with this option.

4. Fraction Vertical Offset: You can move the fraction vertically with this option.

All done! You have successfully customized the Fortune Slider on your website. 

Video Assist

You can also watch the video tutorial to learn more about the Fortune Slider. Please visit the demo page for examples.

Thanks for being with us.