The Sliper(called “Slider” in the Selection pack) is a powerful responsive slider WordPress plugin for Elementor that can help to implement all your creative ideas. Flexible settings and an intuitive interface will help you easily create beautiful slides without a single line of code. For content, you can choose a custom image/text for or use WordPress posts and even Woocommerce products as the source.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
On the Content tab of the Sliper Elementor widget, you can manage the general slider settings and each slide content.
General
General slider settings, where you can choose the content source, display type, number of slides per page, and other settings.
Source
Select which type of source you want to use for the info box:
- Custom – an option allows you to create custom slides with the necessary content for each of them. Once you select this source, a new “Slides” section with settings is displayed on the Content tab, where you can add and configure the required number of elements.
- Posts – an option that allows you to display posts of a certain category as the slides of the slider. To do this, you need to create posts, fill in the appropriate fields and assign them to a specific category. After that, select the category in the current settings.
- Custom Posts – an option that allows you to display custom posts. If your site uses custom post types, this setting will help you display specific posts of a custom type by selecting it from the list in the current option.
- WooCommerce – an option that allows you to display WooCommerce products of a certain category as the slides of the slider. To do this, you need to create products, fill in the appropriate fields and assign them to a specific category. After that, select the category in the current settings.
Type
The option allows you to choose different display styles for the slides:
- Overlay – an option allows content to be displayed over the image.
- Card – an option allows content to be displayed below the image as a regular card.
Link type
The option allows you to apply a link to a specific box element. The available types are Box, Title, Button. Select Note to disable the link. If you select the Button then make sure the button is added to the slider Layout.
Initial Slide
Select which slider will be displayed first after the page load.
Slides align
Align slides in relation to the slider. The option is available if the slide width is set to less than 100%.
Scroll by
Specify the number of slides you want to scroll with one click.
Slides shift
Specify the horizontal offset of the slides.
Slide transition
Select one of the available animations to be used when switching slides: Rice, Slide Down, Slide Up, Bounce, Flip X, Flip Y, Jello, Zoom, Fade.
Transform origin
Sets the origin for an element’s transformations: Center top, Center center, Center bottom, Left top, Left center, Left bottom, Right top, Right center, Right bottom.
RTL
The toggle to enable/disable right-to-left layout.
Disable on Desktop
The toggle to enable/disable the slide on the desktop. Instead, each slide will be displayed as regular images.
Disable on Tablet
The toggle to enable/disable the slide on the tablet. Instead, each slide will be displayed as regular images.
Disable on Mobile
The toggle to enable/disable the slide on the mobile. Instead, each slide will be displayed as regular images.
Navigation
The section where you can select types of navigation, play mode, and other settings.
Auto play
The toggle to enable/disable the autoplay feature for the slider. It also allows for defining the transition duration.
Pause on hover
The toggle to enable/disable the pause for autoplay when hovering a slider.
Infinite scrolling
The toggle to enable/disable the loop feature to scroll the slider endlessly.
Navigation arrows
The toggle to enable/disable the navigation arrows.
Navigation dots
The toggle to enable/disable the navigation dots.
Keyboard navigation
The toggle to enable/disable the ability to navigate using keyboard keys.
Hash navigation
The option allows selecting slides with links and URLs.
Draggable
The toggle to enable/disable dragging and flicking feature.
Attraction
Attracts the position of the slider to the selected cell. Higher attraction makes the slider move faster.
Friction
Specify the movement of the slider. Higher friction makes the slider feel stickier. Lower friction makes the slider feel looser.
Layout
The section of the Sliper for Elementor where all elements of the slider layout can be added, configured and ordered.
To add a new box element, click “Add Item” and select one of the available item types: Image, Title, Description, Price, Category, Button.
Slides
The section is available when choosing Custom as Source of the Sliper Elementor. Here you can add the required number of slides with the custom content.
Content
- Background type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Title – a field to enter the title of the slide.
- Description – a text area to enter the description of the slide. The text editor allows using HTML markup with certain tags:
a,button,br,em,strong,b,span,div,h1,h2,h3,h4,h5,h6,ul,li,ol,iframe,img,figure,figcaptionAll HTML tags cannot be used for security reasons. - Button Text – enter the text for the button.
- Link – enter the button link.
- Slide Id – specify the unique ID for each slide.
Style
- Custom – the toggle to enable/disable custom style for each slide. These styles take priority over general slide styles.
When the option is enabled such settings are available:
- Horizontal Position – specify the content alignment horizontally.
- Vertical Position – specify the content alignment vertically.
- Text Align – specify the text alignment of the slide content.
- Content Color – select the color and opacity of the content using the color picker.
- Text Shadow – create a text shadow and adjust it according to your needs specifying color, blur, horizontal and vertical shift.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Style tab
On the styles tab of the Sliper Elementor widget, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.
Slider
The section of the general style settings for slider block.
- Width – specify the width of the slider in different units(px, %).
- Height – specify the height of the slider in different units( px, %, VH).
- Padding – the setting allows managing the padding of the elements in different units(px, em, %) for desktops, tablets, or phones.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the border radius for the slider.
Slide
The section of general styles for slides. The settings of this block have a lower priority over the individual style settings of each of the slides.
- Width – specify the width of each slide in different units(px, %).
- Padding – the setting allows managing the padding of the slide in different units(px, em, %) for desktops, tablets, or phones.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the border radius for slides.
- CSS filter – adds various CSS filters for the photo as Blur, Brightness, Contrast, Saturation, Hue.
Overlay
The section with style settings that are applied when you select the Overlay slider display type in the Content tab.
- Horizontal Position – specify the content alignment horizontally for different devices.
- Vertical Position – specify the content alignment vertically for different devices.
- Alignment – specify the content alignment of the slide content.
- Margin – the setting allows managing the margin of the block in different units(px, em, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the block in different units(px, em, %) for desktops, tablets, or phones.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the border radius for the block.
- CSS filter – adds various CSS filters for the photo as Blur, Brightness, Contrast, Saturation, Hue.
Title/Description
The sections include styles settings for text and text block.
- HTML tag(for Title only) – select one of the available tags from the list for the header text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
- Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
- Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Background
The section with style settings of the slider background.
- Width – specify the width of the slider in different units(px, %).
- Height – specify the height of the slider in different units( px, %, VH).
- Margin – the setting allows managing the margin of the elements in different units(px, em, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the elements in different units(px, em, %) for desktops, tablets, or phones.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the border radius for the slider.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- CSS filter – adds various CSS filters for the photo as Blur, Brightness, Contrast, Saturation, Hue.
Button
The section with flexible style settings of the button and text in the normal or hover state.
- Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
- Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
- Border Radius – specify the border radius for the slider.
normal/hover
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Navigation
The section with navigation style settings of the Sliper Elementor.
Arrows
- Position – select the position of the navigation arrows on the slider for different devices.
- Size – select the size of the navigation arrows on the slider for different devices.
- Border Radius – specify the border radius for the button.
- Color(normal/hover)– specify the font color and opacity for the text of the button using the color picker.
- Background Type(normal/hover) – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Dots
- Position – select the position of the navigation dots on the slider for different devices.
- Size – select the size of the navigation dots on the slider for different devices.
- Opacity – specify the opacity of the navigation dots for different devices.
- Color– specify the font color and opacity for the text of the button using the color picker.
Advanced Tab
The settings in the advanced tab Synopter widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
Settings overview and examples of using
Hosting for Elementor websites
Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.