Customizr tutorial : creating a slider with the Customizr WordPress theme 228


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 :

1 installed last version of Customizr from your WordPress admin panel

2 logged into your WordPress admin

3 Opened the front page customizer section and see the dropdown list below :

default-customizr-slider

1. Go to the media library

wordpress-media-library

2. Open a media and set the slide’s options

At the bottom of the media edit page, you will find a meta box called “Slider options”. Open the iphone like button to start editing your slide.

customizr-theme-adding-an-image-to-a-slider

 

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.

 

customizr-slider-call-to-actions-settings

 

4. Creating a slider name

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”.

customizr-add-a-slider-name

Once clicked on the button, your slider is created and you will see that your image has been added in it (see below).

customizr-slider-adding-a-slide

 

5. Adding another slide to an existing slider

Now you might probably want to add other slides to this slider. Then just open a new media and follow the previous steps.

Once done, you should now have 2 slides in your slider (see below).

customizr-list-of-slider-slides

 

6. Reordering the slides

Reordering the slides is done manually by dragging and dropping your slides, see the screenshot below :

customizr-reordering-slides-drag-and-drop

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.

customizr-list-front-page-sliders

 

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.

 

customizr-select-a-slider-for-page

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.

customizr-deleting-a-slider

 

 

10. Creating a slider in Customizr : (quick) video demonstration!

 


About Nicolas

My name is Nicolas Guillaume (nikeo). I am the developer of the WordPress Customizr Theme. This website is a discussion platform, your comments are welcome!


228 thoughts on “Customizr tutorial : creating a slider with the Customizr WordPress theme

  • Reply
    silk

    Hi there, I tired to add a GIF as a slider, but it stays as a steady non-moving photo instead of showing the animation. Please help! Dimensions are kept according to samples here!

  • Reply
    Karen McRae

    My slider on the front page is only displaying approximately 1/3 across instead of being full screen. It has been displaying properly until yesterday so am not sure what happened. Any insight? Thank you!

  • Reply
    Harold

    I need help with the Customizr slider.
    I loaded all my pics through Media menu and added a slide named Home. When I viewed the slider it was obvious that the size of the pictures needed to be changed -all I got was the bottom edge of the picture all the way across the page. I went to the Media menu and cropped all my pictures to the correct aspect ratio. And I made sure I clicked on the Update button on each picture. I checked the page view again and nothing had changed. I went back into the Media menu and Deleted the slider. Then it did not show up on each picture. I created the slider all over again and added each picture. I then checked the page view again and it still had the old pictures showing the bottom edge of each picture (which supposedly didn’t exist any more on each picture because I had cropped it off). What the hell???

  • Reply
    Delaina Miller

    I can’t get the slider to work. This is one of two sites I have that use your fantastic theme but for the life of me I can’t get the slider to work on this one. Any suggestions?

  • Reply
    Tony

    I am considering moving from the Hueman theme to Customizr but have a couple of questions about the slider.

    Can I have a single, fixed image instead of a slider (multiple images)?
    Can I remove the timing options for the slider images (multiple images) to where the user is able to select the next image by clicking on a right or left arrow, for example?

    • Reply
      Nicolas Post author

      Hi Tony,
      1) fixed sinlge image : yes, you just have to set only one image in your slider
      2) manual slide : you can control the delay between each slides, => set the delay to a high value will be equivalent to remove the timing option.
      Hope this helps, best.

  • Reply
    Richard

    The alternate text keeps disappearing for the first featured page. If I go in and edit it, it reappears, but then it disappears again after saving it.

    Also, I used pics that were 933 x 500 because they were already of that proportion and I notice they don’t always get displayed right. Sometimes they do. Sometimes they don’t.

    This seems like a nice theme, but can any of this be fixed sometime soon? And/or do I really have to use the exact suggested image sizes for the slider? (If so, I will have to re-create the images altogether. Not your problem I know, but still — a pain.)

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">