The Slider widget by Atomic Addons builds a hero slider for the top of a page. Each slide has a background image, a title, some text and a button, and the text slides in when its slide appears. A slide can also show a saved Elementor template instead. This guide covers adding the widget, building the slides and the layout, button, navigation and slider settings.
Enable the Slider Widget
Slider is a Free widget and works with the free Atomic Addons plugin. A few of its settings carry a Pro badge and need Atomic Addons Pro; they are marked below. Switch the widget on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Slider. You can also open the Creative category.
- 4
Turn the Slider widget on.
- 5
Click Save Settings.
Add the Slider Widget
Slider works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Slider. The widget sits in the Atomic Addons category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
Sliders
Open the widget and go to Content → Sliders. The Slider Items list holds one entry per slide, four by default. Click a slide to open it:
- 1
Select Source: Custom Content, the default, builds the slide from the fields below. Elementor Template shows a saved template instead, so you can design a slide freely. Pro badge: the free plugin uses Custom Content.
- 2
Select Template: Elementor Template only: start typing the name of a saved template (Templates → Saved Templates) and pick it.
- 3
Title: The slide's title. Dynamic tags are supported here and in the fields below.
- 4
Image: The background image, which covers the whole slide. A slide without an image shows the background color set under Style → Slider.
- 5
Content: The slide's text, in a rich text editor.
- 6
Link: Where the slide's button goes,
#by default. Clear it and the slide has no button.
Layout
Content → Layout sizes the slider and places the text:
- 1
Height: The height of the slides, 50 to 1024px: 600px by default. Use the device icon to set it per screen size.
- 2
Content Width: The width of the text area, 200 to 1200px.
- 3
Content Position: Where the text sits on the slide: one of the four corners, the middle of a side, or Center, the default. Pro badge: the free plugin keeps Center.
- 4
Alignment: Left, center (the default), right or justified alignment of the text. As the panel's hint says, match it to the position: left for a position on the left.
- 5
Show Title: Shows the slide titles. On by default.
- 6
Title HTML Tag: The titles' markup, H1 to H6, div, span or p. H2 by default.
- 7
Show Button: Shows the buttons. On by default.
- 8
Scroll to Section: Adds a round button at the bottom of the slider that scrolls the page down to a section. Enter that section's ID in Section ID, such as
#my-section(set it under Advanced → CSS ID of the section), and pick its Scroll to Section Icon, a double arrow by default. Pro badge.
Button
Content → Button appears while Show Button is on. One setting applies to every slide's button:
- 1
Button Text: The label, Read More by default.
- 2
Icon: An optional icon next to the label.
- 3
Icon Position: With an icon: Right of the label (the default) or Left.
- 4
Icon Spacing: With an icon: the space between icon and label, 8px by default.
Navigation
Content → Navigation sets the controls visitors use to move between slides. They can also swipe or drag the slides.
- 1
Navigation: Arrows, the default, adds previous and next buttons. Arrows and Dots adds a dot for each slide as well, and Arrows and Fraction a counter such as “1 / 4”. Dots shows only the dots, Progress a bar that fills as the slides move, and None nothing. Pro badge: the free plugin uses Arrows.
- 2
Dynamic Bullets?: With dots: shows only a few dots at a time, smaller the further they are from the current one.
- 3
Show Scrollbar?: Adds a draggable bar under the slides that appears while they move. Pro badge.
- 4
Arrows Position: Where the controls sit. Its name follows your choice above: Arrows Position, Arrows and Dots Position and Arrows and Fraction Position offer nine places, Center by default, which puts the arrows at the sides; Dots Position offers eight, Bottom Center by default. Progress Position puts the bar at the Bottom (the default) or the Top.
- 5
Hide Arrow on Mobile ?: Hides the arrows on screens narrower than 960px, where visitors swipe. Pro badge.
Slider Settings
Content → Slider Settings controls how the slides move:
- 1
Transition: How one slide replaces the next: Slide (the default), Fade, Cube, Coverflow or Flip. Pro badge: the free plugin uses Slide.
- 2
Text Effect: How the title, text and button come in on a new slide, one after the other: Slide Right to Left (the default) or Slider Bottom to Top.
- 3
Autoplay: Moves on to the next slide by itself. On by default. Visitors who ask their system for reduced motion don't get autoplay.
- 4
Autoplay Speed: How long each slide stays, in milliseconds: 5000, or 5 seconds, by default.
- 5
Pause on Hover: Stops autoplay while the pointer is over the slider. Off by default.
- 6
Loop: Goes back to the first slide after the last one. On by default.
- 7
Keyboard: Lets visitors move through the slides with the arrow keys while the slider is on screen. Off by default.
- 8
Animation Speed (ms): How long one move takes, 100 to 5000: 500 by default.
- 9
Observer: Turn it on when the slider sits in a tab, an accordion or a popup that is hidden when the page loads, so it sizes itself when it appears.
- 10
Mousewheel: Lets visitors move through the slides with the mouse wheel. Pro badge.
Style the Slider
Everything below is on the Style tab. Sections that belong to a part you turned off are hidden.
- Slider: the slides' background color, the Overlay over the images (Background, a dark tint by default, Blend with a blend mode, or None; Pro badge) and the margin and padding of the text area.
- Title: color, background, padding, typography, text stroke and the space below.
- Text: color, background, padding, typography and the space below.
- Button: color, background, border, border radius, padding and typography, with Normal and Hover tabs, and a hover animation.
- Navigation: the arrows, dots, fraction, progress bar and scrollbar, each with their colors and sizes, and offsets that move the controls.
- Scroll to Top: the scroll to section button, shown while it is on and has a section ID.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.