How to replace Big Title section with an image slider in Zerif

Replacing Big Title section of the theme with a slider plugin doesn't take much time. It's pretty easy and follow below steps to accomplish that in few minutes. And as we always recommend to everyone, please make sure that you're using a child theme with your Zerif theme.

First edit the style.css file of your child theme, and add the following CSS to it:

@media screen and (max-width:1023px) {
    .home-header-slider {
     padding-top: 111px;
    }
    }
    @media screen and (max-width:767px) {
    .home-header-slider {
     padding-top: 0px;
    }
    }
     @media screen and (min-width:1024px) {
    .home-header-slider {
     padding-top: 76px;
    }
}

Now install Nivo Slider to your WordPress. Visit Nivo Slider menu, in your WordPress dashboard, and create a new slider. After creating and saving your slider, copy the slider shortcode:

Now. in your child theme, copy the /sections/big_title.php file of your parent theme. Open the big_title.php file of your child theme and replace all the code with the following:

<div class="home-header-slider">
<?php nivo_slider( 1 ); ?>
</div>

Don't forget to replace the nivo_slider( 1 ) in above code with your slider shortcode. Save it, and enjoy the slider.


If you'd like a slider which can have buttons then you can use the  Pro version of the Master Slider plugin

After Installation, visit Master Slider menu, in your WordPress dashboard, and create a new slider. After creating and saving your slider, copy the slider shortcode:

Now. in your child theme, copy the /sections/big_title.php file of your parent theme. Open the big_title.php file of your child theme and replace and it entire code with the following code:

<div> <?php echo do_shortcode( '[masterslider id="1"]' ); ?> </div>

Don't forget to replace the  [masterslider id="1"] in above code with your slider shortcode. Save it, and enjoy the slider.

That's all! And if you don't like Master Slider then you can also use Meta Slider or Revolution Slider. They all work.

For the Spanish version of the documentation you can check this out: ¿CÓMO REEMPLAZAR LA SECCIÓN DE TÍTULO GRANDE CON UN SLIDER?