Home Page Slider

Vantage offers an integration with Smart Slider plugin that allows you to easily and quickly insert a full-screen-width slider on each page, flush with the menu. The default Vantage home page features a demo slider that, unfortunately, isn’t editable. However, it’s really quick to install Smart Slider and replace the home page demo. Smart Slider offers an awesome library of prebuilt sliders to help you get started quickly.

Home Demo

The default Vantage home page displays a demo slider. If you’d like to remove it, navigate to AppearanceCustomizeTheme SettingsHome where you’ll find the Home Page Slider setting. Changing it from Demo Slider to None will remove the slider.

Integrating Your Own Slider

If you don’t already have Smart Slider installed, go to PluginsAdd New and search for Smart Slider in the top right search form. Once installed and activated, go to the Smart Slider menu item to create your first slider.

To create a new slider, click the green New Slider button. Alternatively, to start with a premade template click the blue Template Library button.

To display your slider on the home page, go to AppearanceCustomizeTheme DesignHome and select your new slider from the drop-down list. Alternatively, go to PagesHome Page (the name of your home page might be different) and locate the Page Slider meta box in the right column, you can also select your page slider there.

Although this section is titled Home Page Slider, a slider can be inserted on any page using the Page Slider meta box found in the right column.

Polylang and WPML Limitation

If you have Polylang or WPML installed and have several home pages, the Page Slider will only reflect the slider set on the main WordPress home page. It won’t be possible to select a different Page Slider on your alternative language home pages. This limitation only applies to the home page. To resolve this issue, follow the below steps outlined under the heading Using Another Slider Plugin or Widget. Instead of inserting a Hero widget, insert the Smart Slider widget.

Using Another Slider Plugin or Widget

Note: To use another slider plugin or widget you’ll need to make use of Page Builder and forgo the Page Slider theme setting.

If you’d prefer not to use Smart Slider and instead use another slider plugin or perhaps a widget like SiteOrigin’s own Hero widget, follow these steps:

Choose the page you’d like to insert the slider into and edit it. If you’re not editing AppearanceHome Page and instead are editing a regular page, click on the Page Builder tab to get started. Once in the Page Builder interface, click the Add Row button and use the Set row layout field to select 1 column, click Insert. Next, make your row fullscreen width by clicking the wrench icon then Edit RowLayoutRow LayoutFull Width Stretched, you’ll also need to set the Padding field above to 0. Your row is now ready for your full-width slider. If you’re using the SiteOrigin Hero widget click the Add Widget button in Page Builder and search for SiteOrigin Hero. Once inserted, be sure to set the Maximum Container Width to 100%. You’ll find that setting in the Design and Layout section.

If you’d like to insert another slider plugin that produces a shortcode we recommend inserting the default Text widget and pasting your shortcode into the content field.

Finally, you might notice that there is a gap between your slider and the menu. To remove that gap, scroll down the Page Settings meta box in the right column and disable the option labeled Masthead Bottom Margin.

Demo Files

If you’d like to experiment with the images used in our demo slider, please find them below:

Slide one background
Slide one overlay
Slide two background
Slide two overlay