• Products
  • Resources
  • Blog
  • Contact

How To Use The Rubix Slider By Prime Slider

  • BdThemes
  • How To Use The Rubix Slider By Prime Slider

Table Of Contents

How To Use The Rubix Slider By Prime Slider

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

Enable The Rubix Slider

Enable The Rubix Slider

To use the Rubix Slider from Prime Slider, first, you have to enable the slider.

  1. Go to WordPress dashboard > Prime Slider Plugin dashboard.
  2. Then, Click the Core Widgets Tab.
  3. Search the Rubix slider name.
  4. Enable the Rubix slider.
  5. Hit the Save Settings Button.

Inserting The Rubix Slider

Inserting The Rubix Slider

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

2. Search the Rubix slider.

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

Work With The Content Tab

Layout Section

Go to Content > Layout

Layout Section

1. Columns: You can set the columns of the slider with this option.

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

3. Thumbs Max Width: You can change the width of the content with this option.

4. Thumbs Position: You can adjust the thumbs position to top or bottom with this option.

Layout 02 6 - BdThemes

5. Content Reverse: Enable the switcher to reverse the content with this option.

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

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

Query Section

Go to Content > Query

Query 01 6 - BdThemes

1. Source: Select the source for the slider from here. The types of sources are – Posts, Pages, Floating Elements, Downloads, Products, Mega Menu Items, Template Items, Manual Selection, Current Query, Related. Here we selected the type as posts.

2. Limit: You can adjust the limit here of how many posts you want to show in the slider.

3. Include/Exclude Selection: Select the Include / Exclude filter to show/hide specific posts by Terms (Tags/Categories) or Authors. Here, we selected the include field as Author.

4. Author: This option lets you select the author’s name whose post you want to add to the slider.

5. Date: You can select the post as per the date of creation with this option.

Query 02 6 - BdThemes

6. Order By: It controls the data you want to display through title, id, date, author, comment count, menu order & random. Here we selected the order as date.

7. Order: This option controls the order by which data is arranged. There are two types of order. Ascending Order (Starts from the smallest or lowest value and goes to the largest or highest.) & Descending Order (Starts from the largest or highest value and goes to the smallest or lowest.)

8. Ignore Sticky Posts: Enable or Disable the switcher to hide or show the sticky posts.

9. Only Featured Image Post: Enable or disable the switcher to show or hide the featured image post.

10. Query ID: Give your query a custom, unique ID to allow server-side filtering. Learn more about the Query

Additional Options Section  

Go to Content > Additional Options

Additional Options Section 

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

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

3. Show text: Enable the switcher to show the text/description to the audience.

4. Text Limit: This option allows you to adjust the text’s word limit.

5. Strip Shortcode: This option removes any shortcodes from the blog’s main content.

Additional Options 02 2 - BdThemes

6. Show Category: Enable the switcher to show the category name to the audience.

7. Show Author: Enable or disable the switcher to show or hide the author’s name from the slide.

8. Show Date: Enable or disable the switcher to show or hide the post creation date from the slide.

9. Human Different Time: Enable the switcher to show the post creation time different way (how long ago the post was created) to the audience.

Additional Options 03 2 - BdThemes

10. Show Time: Enable the switcher to show the time of the post creation.

11. Show Read More: Enable the switcher to show the read more button to the audience.

12. Read More Text: You can make changes to the read more button text with this option.

Slider Settings Section

Go to Content > Slider Settings

Slider Settings Section

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. Sliders to Scroll: You can adjust the number of slides that you want to slide in transition.

5. Center Slide: Enable the switcher to keep the middle slide in focus, making it stand out from the others.

Slider Settings 02 5 - BdThemes

6. Grab Cursor: Enable the switcher to make the cursor a grab icon while hovering over the slide.

7. Drag Free Mode: Enable the switcher to move freely with momentum, creating a smooth, natural scrolling experience.

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

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

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

Work with The Style Tab

Items Section

Go to Style > Items

Items Section

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 change the background image with this option.

4. Content Padding: You can adjust the space of the content with this option.

Items 02 - BdThemes

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

6. Height: You can adjust the line height with this option.

Title Section

Go to Style > Title

Title Section

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. Spacing: You can adjust the space between the title and the text with this option.

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

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

Text Section

Go to Style > Text

Text Section

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

2. Margin: You can adjust the space and gaps around the text with this option.

3. Max Width: You can adjust the width of the excerpt with this option.

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

Date Section

Go to Style > Date

Date Section

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

1. Color: You can change the date 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.

Date Icon 01 - BdThemes

Now, let’s proceed to the Icon tab –

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

2. Background Type: You can change the background type to classic or gradient with this option.

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

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

5. Border Type: You can add and change the border type with this option.

Date Icon 02 - BdThemes

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

7. Padding: You can adjust the inner space of the date icon with this option.

8. Margin: You can adjust the space around the date icon with this option.

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

10. Box Shadow: You can add a shadow effect to the date icon with this option.

Category Section

Go to Style > Category

Category Section

1. Spacing: You can adjust the space between the title and the category with this option.

Category Normal 01 3 - BdThemes

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

2. Background Type: You can change the background type to classic or gradient with this option.

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

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

5. Border Type: You can add and change the border type with this option.

Category Normal 02 4 - BdThemes

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

7. Padding: You can adjust the inner space of the category field with this option.

8. Space Between: You can adjust the space between the categories with this option.
(Note: This option will work only when you have more that one category in one post.)

9. Box Shadow: You can add a shadow effect to the category field with this option.

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

Category Hover 5 - BdThemes

Now, let’s proceed to the Hover Tab – 

11. Color: You can change the category text hover color with this option.

12. Background Type: You can change the background type to classic or gradient with this option.

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

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

Read More Section

Go to Style > Read More

Read More Section

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

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

2. Icon Color: You can change the read more icon color with this option.

3. Background Type: You can change the background type to classic or gradient with this option.

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

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

Read More Normal 02 1 - BdThemes

6. Border Type: You can add or change the border with this option.

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

8. Padding: You can adjust the inner space of the read more button with this option.

9. Size: You can make changes to the size of the read more button with this option.

Read More Normal 03 1 - BdThemes

10. Margin: You can adjust the space around the read more button with this option.

11. Box Shadow: You can add a shadow effect to the read more button with this option.

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

Read More hover - BdThemes

Now, let’s proceed to the Hover tab –

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

14. Icon Color: You can change the read more button icon hover color with this option.

15. Background Type: You can change the background type to classic or gradient with this option.

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

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

18. Box Shadow: You can add a hover shadow effect to the read more button with this option.

Thumbs Slider Section

Go to Style > Thumbs Slider

Thumbs Slider Section

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

1. Background Type: You can change the background type to classic or gradient with this option.

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

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

Thumbs Slider Normal 02 - BdThemes

4. Border Type: You can add and change the border with this option.

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

6. Padding: You can adjust the inner space of the thumb slider with this option.

Thumbs Slider Normal Line - BdThemes

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

8. Height: You can change the height of the line with this option.

Thumbs Slider Normal Title 2 - BdThemes

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

10. Spacing: You can adjust the space between the line and the title with this option.

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

Thumbs Slider Normal Meta - BdThemes

12. Color: You can change the meta text & icon color with this option.

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

Thumbs Slider Hover 01 - BdThemes

Now, let’s proceed to the Hover Tab –

1. Background Type: You can change the background type to classic or gradient with this option.

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

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

Thumbs Slider Hover 02 - BdThemes

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

5. Title Color: You can change the title hover color with this option.

6. Meta Color: You can change the meta hover color with this option.

Thumbs Slider Active - BdThemes

Now, let’s proceed to the Active Tab –

1. Background Type: You can change the background type to classic or gradient with this option.

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

3. Image: You can change the background image active color with this option.

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

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

Video Assist

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

Thanks for being with us.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge