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


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!


241 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
      SARAH

      Hello ,
      i ve been working with customizr theme so far , downloaded a slider , created a menu , pages, articles.. but the problem is that the slider only works on my PC and menu also only shows on the PC too. When i turn to the tablet the slider is static and when i click on the menu there s that dark screen coming and bloking the navigation. can anybody help? thank you.

  • 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.)

  • Reply
    meike

    I want to copy the existing site to another page in my multisite – I used wp-importer – all pages and post are there – but no sliders!

    Any idea how to copy / import-export them?

    thanks

  • Reply
    Terry

    Great theme! I own many themes and after many hunting trips discovered Customizr. Love it.

    Is there a simple way to resize the “height” of the slider? Current is 500px and like to keep it at 300px.

    I have searched the docs and do not seem to find info on this question. Before I dig in and make a child theme to customize the slider wanted to ask if easy solution.

    Terry

  • Reply
    Katrina

    I LOVE the design and layout of Customizer. I do however have a few slider questions:
    I don’t see anywhere (commented or such)
    1: about the size of the image needed for good viewing in the sliders. I am selling digital security cams with high resolution so i MUST show quality.
    2. Changing the size of the slider. It’s too large for my needs. something smaller is needed. (not a developer so mucking around the backend is not a good idea :()
    3. I would like to add smaller sliders on different pages without having to make animated gifs.
    4. Can I add video to a slider?
    5. Most of my clients are mobile users. So i need sliders to play nice with mobile devices. ( i LOVE this option of slider.!!!!! https://www.paypal.com/home–any thoughts on building something like this?)

  • Reply
    Joy

    Sorry, but I must be an idiot and I’m clearly missing something. Have changed hosts and my site is now online. Didn’t save the db just before migration, so despite having all the images that came with the last db save, I’m having to redo all my links and sliders. I’m having a new issue now:

    After creating the slider, the thumbnail image doesn’t appear in the box below showing the slider’s image(s). Do I need to delete the slider, delete the image, and re-upload the image and start over?

  • Reply
    Joy

    My sliders aren’t showing.

    Images that have the slider turned on and the slider name created are not showing the thumbnail, letting me know there’s something wrong. When I return to the customize page to select the slider, it says no sliders have been created.

    I have recently migrated my wordpress to a new host. After the move, I started having this issue.

    Do I need to install Regenerate Thumbnail plugin? Or do I need to delete the images I’d used for sliders and reupload?

    Help?
    Thanks.

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="">