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

Enable The Vertex Slider

To use the Vertex 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 Vertex Slider Name.
4. Enable the Vertex Slider.
5. Hit the Save Settings Button.

Inserting The Vertex Slider

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

2. Search the Vertex slider.

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

Work With The Content Tab

Layout Section

Go to Content > Layout

1. Columns: You can set columns that you want to show on the slide with this option.

2. Image Size: This option lets you set the image height and width.

3. Vertical Spacing: You can adjust the vertical spacing of the layout.

4. Alignment: You can adjust the content’s alignment to left, center or right with this option. 

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

6. Show Title: Enable or disable the show title switcher button to show or hide the title from slider. Here you also can set the Title HTML Tag (H1 to H6, Div, Span ,and P).

7. Show Category: Enable or disable the show category switcher button to show or hide the category from slider.

Query Section

Go to Content > Query

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 Terms. This option lets you select the categories that you want to add to the slider.
4. Date: You can select the post as on the date of creation with this option.

5. 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.
6. 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.)
7. Ignore Sticky Posts: Enable or Disable the switcher to hide or show the sticky posts.
8. Only Featured Image Post: Enable or disable the switcher to show or hide the featured image post.
9. Query ID: Give your query a custom, unique ID to allow server-side filtering. Learn more about the Query. 

Slider Settings Section

Go to Content > Slider Settings

1. Autoplay: By enabling this option, you can automatically play the slides one after another. This option lets you set the time delay between each slide transition.

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

3. Slides to scroll: It represents how many slides will slide at once.

4. Center Slide: If you enable the Switcher option, then your Active slider will show the center (depending on your widget style).

5. Grab The Cursor: Your mouse pointer icon will be changed into a grab cursor. Visitors can slide your slider manually with your mouse cursor.

6. Drag Free Mode: In this mode, you can easily make it visible by Dragging your slider into the slide Area.

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

8. Observer: If you enable the option then you are able to use the slider/carousel in any hidden places (such as in tabs, Accordion, etc).

Work with The Style Tab

Sliders Section

Go to Style > Sliders

1. Content Padding: You can set the content padding from here.

2. Border Radius: From here you can set the slider item border radius.

3. Border Line Color: This option lets you change the border line color.

4. Border Line Width: This option lets you change the border line width.

Title Section

Go to Style > Title

1. Color: This option lets you change the title normal color.

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

3. Text Shadow: This option lets you set the text shadow for the title.

4. Hover Color: This option lets you change the title hover color.

5. Text Stroke: If you want to add a stroke (outline) around the text, you can use the Text Stroke property. you also can change the Text Stroke Color as your working demand.

Category Section

Go to Style > Category

Come to the Category section, you will find two tabs section; Normal and Hover.

In the Normal tab section, you can customize these below options-

1. Spacing: You can adjust the spacing between title and category.

2. Color: This lets you change the Category text normal color.

3. Background Type: you can change the color of any object background to classic or gradient. Here we choose the Background type Classic.

4. Background Color: This lets you change the Category Background color. If you want, you also can change an image to the Background.

5. Border Type: This option allows you to add a border around the category text.
6. Border Radius: This option controls the roundness of the border.
7. Padding: This option allows you to adjust the inner space and gaps around the category text.
8. Space Between: You can adjust the space between categories.
9. Box Shadow: You can add the box shadow for the category.
10. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

Navigation Section

Go to Style > Navigation

1. Color: This option lets you change the navigation normal text color.

2. Background Type: you can change the color of any object background to classic or gradient. Here we choose the Background type Classic.

3. Background Color: This lets you change the Background color. If you want, you also can change an image to the Background.

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

7. Icon Typography: You can set the icon typography from here.

8. Size: This option lets the navigation size.

9. Icon Size: This option lets the navigation icon size.

In the Hover tab section, you will get the below options-

10. Color: This option lets you change the navigation hover text color.

11. Background Type: you can change the color of any object background to classic or gradient. Here we choose the Background type Classic.

12. Background Color: This lets you change the Background hover color. If you want, you also can change an image to the Background.

13. Box Shadow: You can set a hover box shadow for the navigation.

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

Video Assist

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

Thanks for being with us.