Creating (Image) Sliders
The Lunteer Slider is designed to enable you to create and edit content sliders (or galleries) without the need for developers. The following tutorial describes how you can create a slider and edit the look and feel.
Just like regular posts and pages, you can add any type of content to a slider; you can add a background image and text, Call-to-Action buttons, and even forms and Google maps. Each section you add to your slider becomes a new ‘slide’ and you can add as many, or as few as you like.
Creating A New Slider
Opening a New or Editing a Slider
In the left navigation menu, click Sliders, then click Add New to add a new slider.
Adding a Section
Next, click the blue Add Section bar to add your first ‘slide’ to the slider. There are many different layout options to choose from ranging from full width to multiple columns.
Selecting a Content Type
Select the content type you want to add. For a more in-depth instructions on how to add content types and our editor, please see our editor tutorial.
Adding a Background
After selecting a section, you will be prompted to add a background to the new section. This step is optional. You can either choose to add a background image at this stage, or you can add the background later.
Slider Options
Beneath the Add Section button is the Slider Options area. This section allows you to change settings for the slider like whether to show prev and next arrows, animation speed, and others.
The Slider Options area is split into two sections; Display (left column) and Animation (right column).
Slider “Display” Options
The Display settings section lets you configure additional display options .
Show ‘Prev’ and ‘Next’ arrows – add left and right arrows, so that users can easily navigate between sides.
Show dots – add “indicator dots” which show the current slide in a slideshow.
Fade Mode – fade-in the next slide(as opposed to sliding horizontally).
Slides to show – define the number of slides that display at any given moment.
Slider “Animation” Options
The Animation settings section allows you to control the animations and pauses for your slider.
Auto Play – set the slider to play automatically when the page finishes loading.
Auto Play speed – define the speed at which each slide changes into the next.
Pause – set the slider to pause its automatic playing if a user hovers over a slide, focuses on a slide, or hovers over the indicator dots.
additional display options
Advanced Options
There are more advanced Slider Options available under Advanced Options. These have instructions within the page and are beyond the scope of this tutorial.
Publishing Your Slider
When you are ready for your slider to go live, click Publish. The slider can now be selected as a ‘Content Type’ in any page or post.
Adding a Content Slider to a Post/Page
To add a slider to a page or post, simply select Slider as the content type. You will then be given a dropdown menu of all your “published” sliders. Select the slider that you want to add to the page, then click Publish or Update to add the slide.
Editing a Content Slider
In the main navigation menu of the Dashboard, go to Sliders > All Sliders to view all your existing sliders. Click on the slider you want to edit. Your slider will open, allowing you to edit the content in the same way as a regular page, or post. Once changes are saved, it will be shown automatically on posts, or pages where you have added the slider.
Deleting A Content Slider
In the main navigation menu of the Dashboard, go to Sliders > All Sliders to view all your existing sliders. Hover over the slider that you wish to delete. The word Trash will appear as an option beneath your slider.
Click Trash and the slider will be deleted. The deleted slider will no longer show on any page or post to which it was added. The page will refresh with an option to “undo” this at the top of the page.
You also have the option to view all deleted sliders using the links above the list of sliders.
Add Background Image
If you skipped adding a background in the setup process or wish to change the background, you can do either at any point.
To add a background image , click the cog in the top right of the section, then choose the Style menu option.
This is confusing, as we jump to describing the ‘later’ process. That needs to be made clear.
The Style Selection and Columns Screen opens.
Click Select Image to navigate to an image that you wish to use as your background or upload a new image.
Click done and update your slider.
Conclusion
Sliders are a great way to bring your website or campaign to life. Sliders are a great way to display images or other content types in the same area without the need for users to scroll. This tutorial has given you the knowledge to add a slider to your website without the need for developers. Now go and build yourself a slider!
Insights Newsletter