05 May Creating a slider with the Customizr WordPress theme(repost)

Repost from https://docs.presscustomizr.com/article/3-creating-a-slider-with-customizr-wordpress-theme

Creating a slider with the Customizr WordPress theme

You’ve installed the  Customizr theme and you’d like to display a carousel ( also named slider ) on your front page or in a page of your site like on the demo, here or here.

0. On home : removing the default slider

By default on home 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:

1. From your WordPress dashboard, navigate through Appearance -> Customize
2. 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 )
3. Scroll down to reach the SLIDER OPTIONS set
4. From the dropdown list against Select front page slider select No slider:
5. 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 :

1. click on “Edit the slide”
2. 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.

Additionally:

1. 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.
2. 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.