Creating a slider with the Customizr WordPress theme
Howdy web designer!
You’ve installed the Customizr theme and you want to have your own beautiful carousel ( also named slider ) on your front page with a nice parallax effect like on the demo. 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!
0. Removing the default slider
By default the Customizr theme, displays a slider generated from your latest posts, using the post's featured image, if set, as background image, the post title as slide title, the post's excerpt as description, and the post's URL as link for the call to action button.
Let's see how to remove this default slider then:
- From your WordPress dashboard, navigate through Appearance -> Customize
- Open the Front Page Content section ( if you don't see this section in the customizer, it means that you are not currently previewing your home page )
- Scroll down to reach the SLIDER OPTIONS set
- From the dropdown list against Select front page slider select No slider:
- Save and Publish
1. Open the media library
2. Open a media and set the slide’s options
- If your media library is displayed as a list (see the screenshot below), just click on the thumbnail of the image you want to add to a slider:
- If your media library is displayed as a grid (see the first screenshot below), click on the thumbnail of the image you want to add to a slider and then on the Edit more details link (see the second screenshot below):
Scroll down and find the Slider Options box (see the screenshot below):
3. Adding the image to a slider
Add the image to a slider by clicking on the iphone like button as shown in the screenshot below:
A new set of fields to set up your slide will appear.
4. Setting options and call-to-action content
Here you can set the options like transition speed (delay between slides ), and the optional call to actions content : title, description, color (of title and description), button text, link, etc...
Leave those settings empty if you only want to display an image only.
Note : The background color of the call-to-action button is the primary color of the theme.
5. 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 on the Add a slider button:
Once clicked on the button, your slider is created and you will see that your image has been added in it:
6. Reordering the slides
Reordering the slides is done manually by dragging and dropping your slides, see the screenshot below :
7. Removing a slide
If you want to remove a slide :
- click on "Edit the slide"
- In the slider options, set "Add to a slider" to No
8. Displaying a slider on the front page
Now go back to the Customizer ( From your WordPress dashboard, navigate through Appearance -> Customize)
Open the Front Page Content 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.
- Choose the slider options : full-width or boxed, delay between slides and whether or not apply a dark overlay on the slider's images. Note : The option Apply a dark overlay on your slider's images is available only for the modern style.
- Choose the slider height, choose whether to apply to all sliders, and whether to replace the default image height.
9. 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 below Add a slider to this post/page and select your wanted slider in the dropdown list.
Update the recent changes on the post/page by clicking on the WordPress Update button
10. 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.