Home Page Slider

Whether you are using the Vantage Custom Home Page, a static front page or displaying your blog posts, you can display a slider of images on your front page just under the menu bar.

By default a demo slider will be active upon installation. To deactivate this Demo Slider, navigate to Appearance > Theme Settings > Home. Next to the title “Home Page Slider” select “None” from the drop down menu.

Home Page Slider Setting

If you have already installed the Meta Slider plugin and begun creating your own responsive sliders, you will be able to select any of these sliders from the drop down menu above, to be displayed on your home page. If you have not yet installed Meta Slider you will see the following message below the drop down menu:

This theme supports Meta SliderInstall it for free to create beautiful responsive sliders – More Info

To create a new home page slider, navigate to Meta Slider in your WordPress admin. Check out the Meta Slider documentation for more details on creating sliders. After you have created a new slider you’ll need to adjust a few settings.

2013-09-28_17-20-08

The most important setting here is the theme. This should be set to Vantage (Flex) when you’re creating a slider for the home page. The width should be 1080 although this will be autoset when you have the Vantage theme selected. You can choose what ever height you like. 420 is a good place to start. You should be using FlexSlider as the slider type.

Now you can start adding slides. I’ll start by adding a few images that I found from Pixabay.

If you’re using Meta Slider Pro, which is highly recommended, then you’ll be able to add fully animated layered slides, but in this guide I’ll just cover adding simple image slides.

2013-09-28_17-29-57

Now we need to tell Vantage to use our new slider as the main home page slider. Navigate to Appearance > Theme Settings. Select the Home tab, then select your slider for the Home Page Slider setting.

2013-09-28_17-31-46

Adding Overlay Images

Note: The following requires Vantage Free 1.0.5+ or Vantage Premium 2.0.5+

Vantage also has a theme setting called Stretch Home Slider (right under the Home Page Slider setting). This will stretch your home page slider images to fit the width of the screen if you’re using the default Full Width layout (in the Layout tab of Theme Settings).

If you’re not using Meta Slider pro and you want to achieve an effect like the default demo slider in Vantage, then you can use overlay images. What you need to do is create a transparent PNG that’s exactly the same size as your slider. In our case, 1080×420 pixels. You can create this overlay image using something like Photoshop or the free app Pixlr.

Create the image, then upload it to your server by navigating to Media > Add New in your WordPress admin. After you’ve uploaded it, click edit, then find and copy the full file URL.

2013-09-28_17-45-04

Lastly, go back to the Meta Slider interface and enter this full URL as the caption for the slide.

2013-09-28_17-46-23

Save your slider and just like that, you’ll have an overlay image. You can set a different one for each slide, treating the main image as the background image and the overlay image as the one with your main content. The main image will always stretch to fill the slider. The overlay image will only ever scale down to fit small screen devices.

Slider Overlay

2013-09-28_17-52-55