Home Page Slider

Ultra’s convenient Meta Slider plugin integration lets you insert a full width or constrained slider above the content on any page. It also lets you overlap the header and slider should you wish to do so. Below we’ll run through installing Meta Slider 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.

Appearance > Customize > Theme Settings > Home > Home Slider allows you to choose your home slider.
Appearance > Customize > Theme Settings > Home > Home Slider allows you to choose your home slider.

Integrating Your Own Slider

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

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

Meta Slider main menu item.
Meta Slider main menu item.

Within the Meta Slider interface open, click the Create your first slideshow button


Next, click the text New Slider to set your unique slider name.

Click New Slider to name your slider.
Click New Slider to name your slider.

Next, click the Add Slide button to add your first slide.

Click Add Slide to add your first slide.
Click Add Slide to add your first slide.

With your slide added you can now make use of the Caption and URL fields, as well as the other settings available.

Once your slide is added you can use the slide caption and url fields.
Once your slide is added you can use the slide caption and url fields.

Once your slider has been saved, navigate to AppearanceCustomizeTheme SettingsHomeHome Slider. The Home Slider drop down menu will now contain your newly created Meta Slider. Select it to replace the demo slider.

Select your newly created Meta Slider from Appearance > Theme Settings > Home > Home Slider.
Select your newly created Meta Slider from Appearance > Theme Settings > Home > Home Slider.

Video Walkthrough

The below video walks you through the steps outlined above. For instructions on recreating the demo home slider, page sliders and stretch options, please, keep reading below this video.

Recreating the Ultra Home Page Demo Slider

The slide background image size we used in our demo is 1200 x 480px.

Meta Slider free doesn’t natively provide the ability to add a slide layers, that feature is included in Meta Slider Pro. If you’d like to add a layer to your slide but would prefer to stick with Meta Slider Free, you can make use of Ultra’s caption image feature.

The Ultra caption layer option allows you to add a slide layer in image form only. You can see this in action in our demo slider. Using that as an example, create a transparent image in your preferred photo editing software (Photoshop for example) and add text as required. We used the following dimensions 2400px x 960px. You could achieve the same proportions with 1200px x 480px. We doubled our overlay dimensions to achieve a sharper image on Retina displays. Once you’ve finished creating your overlay image, save it as a PNG to maintain the transparent background.

Ultra demo slider overlay image.
Our demo slider overlay image, as seen in Photoshop before saving to PNG.

With your overlay created, add it to your Media Library by hovering over Media in your main WordPress menu and clicking “Add New”. Once your image has been added, click on it and copy its unique URL that can be found in the right column meta box.

Now we can head back to Meta Slider and copy our overlay image URL into the caption field.

Meta Slider overlay image
If you’d like to make use of the Ultra, Meta Slider image overlay, insert your overlay image url into the slide caption field.

Finally, we can move over to the Settings meta box on the right and enter our slider settings. In our demo slider, we set our width to 1200 and our height to 480. We also set our theme to Ultra (Flex) to make use of the Ultra Flex Slider left right buttons and bottom navigation dots. You can also use the Default theme if you prefer.

Ultra Meta Slider main slider settings.
Ultra Meta Slider main slider settings.

You’re done! Hit Save and go back to AppearanceCustomizeTheme SettingsHomeHome Page Slider, there you’ll find your new slider available for selection in the drop down menu. If you’d like your slider to stretch to 100% of the screen width, enable Stretch Slider. If you’d like your header to overlap your slider, enable the Header Overlaps Slider setting. This setting will change the header background from 100% to 90% opacity and set the header over the slider.

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

Unsplash.com is a great source for finding images to use in your sliders.

Page Sliders

Ultra offers this same functionality, the ability to insert a slider below the header, before the content, on all pages. When editing a page from the Pages menu, you’ll see a page Meta Slider meta box. There you’ll find the three slider settings we just discussed; slider selection, stretch and overlap. You can make use of them in the same way we did on the home page to deploy a page Meta Slider in the same position.

Page Meta Slider controls.
Page Meta Slider controls.

Stretching Options

There are two methods you can use to stretch your slider to 100%, should you wish to do so. Theme SettingsHome and the Page Meta Slider meta box both have controls for stretching your slider full width. This setting will maintain your slider height and stretch the background image to those bounds. It will use the CSS cover technique for stretching the image while still maintaining aspect ratio. The alternative is to turn this option off and instead use the Meta SliderAdvanced100% wide output setting. This option will increase your image width to 100% and adjust the height accordingly. The advantage is that no zooming of your image will occur; the disadvantage is that your slider will increase in height. Hopefully, this information will help you choose the method best suited to your site.

Polylang Limitation

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

Alternative Slider Solution: SiteOrigin’s Hero Widget

If instead of Meta 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 Meta Slider, 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: 07/09/2017