Home Page Slider

Ultra’s convenient Smart Slider 3 plugin integration lets you insert a full width slider above the content and sidebar on any page. It also lets you overlap the header and slider should you wish to do so. Below we’ll run through installing Smart Slider 3 and making use of this feature.

Please, keep in mind, if you ever need any assistance with this feature or any other Ultra question, you can open a new support topic here. For our premium theme users, we’re also available at support@purothemes.com. There is seldom a challenge we can’t overcome 🙂

Home Demo

By default, the home page displays a demo slider. If you’d like to remove that and move on, no problem. Go to AppearanceCustomizeTheme SettingsHome and set the Home Slider to None.

Integrating Your Own Slider

To integrate your own slider you’ll first need to install the Smart Slider 3 plugin, that can be done from PluginsAdd New, search for Smart Slider 3 using the search form at the top right, install and active.

With Smart Slider 3 installed and activated, you’re ready to create your first slider. Smart Slider 3 adds a new menu item on the main WordPress menu, usually near the bottom. Look out for a blue icon.

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

Once your slider has been saved, navigate to AppearanceCustomizeTheme SettingsHomeHome Slider. The Home Slider drop down menu will now contain your newly created Smart Slider. Select it to replace the demo slider. 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

The home page slider setting can be found at AppearanceCustomizeTheme SettingsHome and at PagesHome Page in the Page Slider settings box. These two settings do sync. It currently isn’t possible to use a different Smart Slider on each of your Polylang/WPML home pages via the Page Slider setting. This limitation only affects your home page. To overcome this home page Polylang/WPML slider challenge, follow the instructions below to insert a Smart Slider widget on your home pages.

Please note that the tutorial focuses on the Hero widget but any widget can replace the Hero widget. In the case of Polylang/WPML, follow the below instructions but insert the Smart Slider 3 widget instead of the Hero widget.

Using Another Slider Plugin or Widget

If instead of Smart Slider you’d prefer to make use of SiteOrigin’s Hero widget, please, follow these steps:

  1. Go to Plugins in WordPress and confirm that you have both Page Builder by SiteOrigin and SiteOrigin Widgets Bundle installed and activated.
  2. Navigate to AppearanceCustomizeTheme SettingsHome and set the Home Slider drop-down menu to None.
  3. Navigate to your home page at PagesHomePage Builder.
  4. Insert a new row by clicking the Add Row button, set the row layout field to 1 column. Finally, click Insert.
  5. Next, edit your new row by clicking the wrench icon far right followed by Edit RowRow LayoutFull Width Stretched.
  6. If your new row isn’t at the top of the page where you need it, click the up-down arrow button to the right of the wrench icon on the right and drag your row to the top.
  7. Next, click the Add Widget button followed by Widgets Bundle in the left column. Insert the SiteOrigin Hero widget.
  8. Once you’ve built your slider and checked your home page, you’ll notice the slider isn’t flush with the header. This is because Smart Slider 3, when inserted via theme settings is inserted above the site content. To move the SiteOrigin Hero widget into this same position we can make use of Ultra’s Page Settings. Go to PagesHome Page and locate the Page Settings meta box in the right column. Disable the option labelled Header Bottom Margin to remove the space below the header.
Last updated: 02/04/2018