In this guide, we will show you how to add a “Simple Slider widget” to your Elementor website. The Simple Slider widget is the quickest and easiest way to set up a clean and visually appealing slider, helping you enhance your website’s visual presentation with minimal effort. Perfect for showcasing images, content, or promotions in an elegant way, this widget improves user engagement while keeping your design simple and effective. Its smooth transitions and easy setup make it ideal for creating attractive sliders without complexity.
Let’s explore the customization options available in the “Simple Slider widget” for Elementor below.
Add a Free Simple Slider to Elementor
Add a Free Simple Slider Widget to an Elementor Page
Elementor Simple Slider Widget General Settings
Height
Adjusts the vertical size of the slider using a slider or numerical input (units include vh for viewport height).
Transition Speed
Controls how fast the animation occurs when switching between slides (in milliseconds); supports dynamic data.
Autoplay Speed
Sets the duration each slide remains visible before moving to the next; supports dynamic data.
Autoplay
A toggle to enable or disable automatic slide rotation.
Pause On Hover
When enabled, the autoplay stops whenever a user’s mouse is positioned over the slider.
Fade Transition
Toggle to switch between a sliding motion and a cross-fade effect.
touchMove
Enables or disables the ability for users to swipe through slides on touch-screen devices.
Arrow Navigation
Toggle to display or hide directional arrows for manual slide control.
Dot Navigation
Toggle to show or hide the pagination dots at the bottom of the slider.
Show Content
Master toggle to display or hide all overlaying content on the slides.
Show Title
Toggle to specifically show or hide the heading/title text within the content area.
Show Text
Toggle to specifically show or hide the body text or description within the content area.
Title
Sets the main heading for the item; includes AI generation and dynamic data options.
Subtitle
Adds a secondary line of text below the title for extra detail.
Image
Allows you to upload or select a visual for the item; includes an AI icon for potential image generation or editing.
Link Type
Selects the format of the link.
Link
The destination URL for the item features a settings gear for link behavior and dynamic data mapping.
Button Text
Defines the label displayed on the button.
Elementor Simple Slider Widget Style Settings
Overlay Color
Sets a color layer over the slide image, often used to improve text readability. Includes access to global site colors.
Slide Content Max Width
Controls the maximum width of the content area within the slide using a slider or numerical input.
Slide Content Padding
Defines the internal spacing (Top, Right, Bottom, Left) between the content and its border or edge.
Slide Content Background Color
Sets the background color specifically for the content container overlaying the slide.
Slide Content Border Type
Selects the style of the border (e.g., Solid, Default) surrounding the content area.
Title Color
Sets the text color for the main title. Includes an option to select from global site colors (globe icon) or a custom color picker.
Title Typography
Manages font characteristics like family, size, and weight. The pencil icon allows for manual adjustments, while the globe icon applies global font presets.
Title Spacing
Adjusts the vertical gap between the title and the content directly below it using a slider or numerical input.
Text Color
Sets the color for the body or description text. Use the globe icon to select from global site colors or the square icon for a custom color.
Text Typography
Controls font family, size, weight, and style. The pencil icon allows for custom edits, while the purple globe icon applies global typography presets.
Text Spacing
Adjusts the vertical space (margin) below the text block using the slider or numerical input field.
Button Padding
Adjusts internal spacing between the text and the button edges for each side.
Button Radius
Controls the roundness of the button corners.
Button Background Color
Sets the default fill color.
Button Background Color Hover
Defines the color change when a user's mouse moves over the button.
Button Text Color
Sets the default color of the label text.
Button Text Color Hover
Defines the text color change during a hover interaction.
Button Spacing
Manages the external gap between the button and surrounding elements.
Button Border Type
Selects the style of the outline.
Button Border Width
Adjusts the thickness of the border for each side.
Button Border Color
Sets the color of the outline.
Button Border Hover Type
Determines if the border style changes when hovered.
Button Style
Controls the structural display mode.
Nav Arrow Spacing (px)
Sets the distance between the arrows and other elements.
Nav Arrow Position
Adjusts the horizontal or vertical placement of the arrows.
Nav Arrow Radius
Controls the roundness of the arrow background corners.
Nav Arrow Background Size
Sets the overall dimensions of the arrow's background container.
Nav Arrow Icon Size
Adjusts the size of the actual arrow symbol.
Nav Arrow Background
Defines the default background color for the arrows.
Nav Arrow Background Hover
Sets the background color when a user hovers over an arrow.
Nav Arrow Icon Color
Defines the default color of the arrow symbol.
Nav Arrow Icon Color Hover
Sets the arrow symbol color during a hover interaction.
Nav Dots Spacing
Adjust the horizontal distance between individual navigation dots.
Dot Height
Set the vertical dimension of the dots.
Dot Width
Set the horizontal dimension of the dots (e.g., to create rounded rectangles or circles).
Dot Color
Define the default color for the navigation dots.
Dot Color Hover
Change the color of a dot when a user’s mouse is over it.
Dot Color Active
Set a unique color for the dot representing the current slide.
Simple Slider Widget Design Examples For Elementor
Here are some live use cases for the Simple Slider widget.
Working Hours for the Agency.
Simple Slider with Navigation.
Thank you for using the Simple Slider widget for Elementor! This easy-to-use tool lets you create beautiful and responsive sliders with minimal effort, helping you showcase images, content, or promotions in a smooth and engaging way. With its clean design, flexible customization options, and seamless integration, it enhances your website’s visual appeal while ensuring a user-friendly experience. For questions or inspiration, feel free to reach out or explore our demo.