Creating a slider with the Customizr WordPress theme
Howdy web designer!
You’ve downloaded the Customizr theme and of course you want to have a beautiful slider on your front page. But you don’t know where to start from to do that.
This is exactly why I have published this step by step short tutorial. You won’t believe how quick and easy it is! (check this video for a quick introduction).
I am assuming you have done the following pre-requisites :
- installed last version of Customizr from your WordPress admin panel
- logged into your WordPress admin
- opened the front page customizer section and see the dropdown list below :
0 . Removing the demo slider
- From your WP admin, navigate to Appearance > Customize > Content > Front Page. Then, in slider options, select a slider among the ones you have created
- choose the slider options : full-width or boxed, delay between slides. Note : To remove the demo slider : select “No slider” in the dropdown list.
- choose the slider height, choose whether to apply to all sliders, and whether to replace the default image height.
1. Open the media library
2. Open a media and set the slide’s options
- From the Media Library, click on an image that you want to add to your slider
- Click on the “Edit more details” link on the right of the screen (not the Edit button)
- Scroll down and find the Slider Options box (see the screenshot below)
3. Adding optional call to action content
Here you can set the optional call to action content : title, description, color (of title and description), button, link.
Leave those settings empty if you only want to display an image.
4. Naming the slider
If you haven’t created any slider, you will see the following message : “You haven’t create any slider yet. Write a slider name and click on the button to add you first slider.”
Just type a name and click on “add a slider”.
Once clicked on the button, your slider is created and you will see that your image has been added in it (see below).
6. Reordering the slides
Reordering the slides is done manually by dragging and dropping your slides, see the screenshot below :
7. Displaying a slider on the front page
Now go back to customizer (click on customiz’it to go there), open the front page section and click on the slider dropdown list. You should see your freshly created slider in the list now.
Just select it, save and you are done.
8. Displaying a slider on a post or a page
Open a page or a post and go to the bottom of the screen. There you’ll find a metabox called “Slider Options”.
Click on the iphone like button and select your wanted slider in the dropdown list.
9. Deleting a slider
On the top right corner of the slides list, you’ll find a clickable link called “ Delete this slider” (see below). Just click it and confirm the action in the pop in window.
10. Creating a slider in Customizr : (quick) video demonstration!
Doc created by: Menaka S.