You have 5142 weeks 6 days remaining for the course
Social Config 0/1
Almost every website you visit has a slider on their homepage. One clear advantage of using a slider is that website owners can place all their important content in a visually appealing and interactive slideshow at the top of the page before their main content. This allows users to quickly see the highlights and take action.
One CMS Sliders can run slideshows automatically without user input by moving slides on pre-defined time interval. Sliders can also respond to user interaction like click or swipe to view next or previous slides. Additionally, sliders can also have buttons or thumbnails which users can click to view a particular slide in the slider.
To access and create sliders, navigate to One CMS Tools > Sliders
You’ll be redirected to the Slider listing page. Chances are you’ll see at least one Slider there if there is an existing one on your homepage. You can edit any existing sliders from here, or create a new slider.
Creating a new Slider
To create a new Slider, click the Add Slider button at the top of the page.
This will bring you to the Add New Slider page. This page is a long form that lets you craft all the settings of your slider just the way you want it.
The very first field is used to give your slider a Name.
Layout and Slider Size
Next, you are presented with the Shortcode for the slider. You may be asking yourself, “Why do I need the shortcode now before I’ve even set up the slider?” Think about this. You can place your slider on a page and visualize the changes you make as you modify tall of the settings while you create the slider!
You can also choose the type of Layout for the slider. There’s 4 different types of layouts that range from having thumbnails on the right, left or bottom or no thumbnails at all. Click on the layout you want to use.
Now choose the width and height of the Slider Container. Generally, you’ll want this to fit in a specific part of your website, so play around with these settings until it fits how you want it to.
Since you’ll generally be pulling posts into the slider, you have the option of showing the Post Titles and Excerpts or not. Use the toggles to display these fields or not.
You can also set a Count of how many posts to show in the slider at a time.
Next, choose the size of the Image you’ll be showing in the slider from the dropdown. This is the main image (not the thumbnails), so be aware of how big or small it should be depending on the size of your slider.
If your slider does not display Thumbnails, you can disregard these steps
You can select how to show the content Title and Excerpt in relation to the Slider Thumbnails.
Next, set the Slide Styles for Thumbnails. This is how thumbnails will transition when going to a new set of thumbnails. Also set the width and height of your thumbnails.
In the Slider Effects you can set a variety of visual actions for the slider.
- Continuous Loop: When set to On, after the Slider reaches the last piece of content it will loop back to the first piece of content and continuously loop through all of the content.
- Effect: This is how the slider transitions to the next piece of content. It can either scroll sideways or fade.
- Direction: This is what direction the scroll transition will be.
- When Autoplay is turned on, the slider will transition between content without any action by the user.
- You can set how a Timer for how many milliseconds the slider should remain on each piece of content before transitioning to the next piece of content.
- Setting Pause on Hover to On will temporarily pause the transitioning of slides while the user has their mouse over the slider.
You can choose whether to show Previous and Next Navigation Arrows on the slider. These arrow let the website user manually advance the slides.
Selecting What Content to Show in the Slider
In the Slides List, you can select what type of content should be displayed in the slider. You can select from one of three taxonomies to pull content in from:
- Push Bins
Once you have selected a Taxonomy, you can then choose which content from that Taxonomy to display. In the animation below, I am choosing the Category “Rock Daypop“.
Click the Set Slides button after entering the Taxonomy information.
After setting the slides you are redirected to the Content Sorting screen with a listing of content from the Taxonomy you selected. If you desire, you can choose content from the list to “stick” or pin to the slider so it always displays. You can read more about content sorting in the Content Sorting tutorial. If you don’t want to stick any content, just click the Back to Slider button.
When you are redirected back to the Slider screen, a feed of content from the Taxonomy you selected should be listed in the Set Slides section.
Slider Custom CSS
Even with all of the settings you have filled out. Sometimes your slider may need a bit of tweaking to get it just the way you want. If you know CSS, you can add Custom CSS Styles for the Slider in the textarea and they will be applied to your slider when it renders on your website.
Saving Your Slider
We’re finally done! Click the Publish button to save your slider.
Your slider will now display in the Slider Listing screen. If you haven’t already, grab the shortcode and insert it wherever you plan on displaying the slider (you can embed it into an HTML widget or even in a post or page)
Besides using shortcodes, you can also place a slider on your website using the Slider Widget. Just drag and drop the widget into the area you want and select the Slider to display. It will use all of the settings you filled out when you created the slider.