Full Screen Sliders

The Pro version of Super Hero Slider gives you several options for creating full-screen sliders.

Screen Shot 2016-07-11 at 15.24.39

In Design Settings, check the option to “Go Full Screen” then select one of the following Layout Modes:

Block

Block mode pushes the page content below the slider. As the user scrolls down the page, the page content will appear and the slider disappear.

Overlay

Overlay mode places the slider on a layer above the page content, obscuring the content. This option works well if you want a full-screen slider on your page, e.g. for a landing page. No other content will display.

Allow Parallax Scroll

Parallax scrolling will add a parallax scrolling effect.

 

Creating a Products Carousel

To create a carousel of products, first read through the article on creating a products slider.

Once you’ve created your slider, you can make it into a slider by increasing the number of Carousel Items in the Slider Settings panel:

products-carousel-items

Selecting 4 items will look like this on the page:

products-carousel

Note that the options in the Products Feed Slider Layout panel do not apply to carousels.

 

Creating a Products Slider

You can create a Products Slider to showcase selected WooCommerce products in a slider or a carousel. Go to Sliders > Add New to create a new slider, give it a name, then select ‘Products (requires WooCommerce)’ in the ‘Content Type’ dropdown in the Slider Settings panel.

add-product-slider

Some new panels will open below the Background Settings panel.

Products Feed Slider Layout

Use this panel to set the layout for your slider.

products-feed-slider-layout

Slider Layout

You can choose from four possible layouts:

  • Image Left | Content Right: This will displayed the featured image on the left side of the slide and the content on the right
  • Image Right | Content Left: This will displayed the featured image on the right side of the slide and the content on the left
  • Image Full Width | Content Left: This will display the featured image at the full width of the slide and place the content on top to the left
  • Image Full Width | Content Right: This will display the featured image at the full width of the slide and place the content on top to the right

Caption Design

Your content, e.g. product title, description and price, will appear as a caption with the featured product image. Choose from:

  • Standard: The content will appear with no background color
  • Panel (third): The content will appear at 33% of the slide width with the option to include a background color
  • Panel (half): The content will appear at 50% of the slide width with the option to include a background color

Panel Background

An optional color for the caption panel.

Products Feed Slider Content

This panel allows you to select what products to display in the slider.

products-feed-slider-content

Number of Products

Select how many products to display in your slider

Category

Optionally select which categories to display products from.

Featured Products

Check this if you only want to include featured products in your slider.

On Sale Products

Check this to only include products that are on sale.

Order By

Choose how to order your products from:

  • Date
  • Menu Order
  • Price
  • Sales
  • Title

Order

Choose either ASC or DESC.

Products Feed Slide Content

In this panel, you can refine which content will appear on each slide. There are checkboxes to enable or disable product title, ratings, description, price and add to cart button.

There are some additional settings to give you greater flexibility in how your slider works:

Use Alt Product Image as Background Image

When you install Super Hero Slider Pro, the plugin automatically adds a new field to your product edit screen between the Product Image and Product Gallery panels.

slider-image

You can upload an image here that won’t display in your product page but that is available for your slider. If you prefer to use the alt image in your slider, just check the ‘Use Alt Product Image as Background Image’ option.

Embed Featured Image in Product Description

In conjunction with the setting above, you can choose to include the product’s featured image as part of the slide content. By checking both these options and including an alt image, you can create slides like this:

products-slider-embedded-feature-image

Caption Color

Change the text color in your content.

Products Feed Animations

Use this panel to set animations for the three captions in your content.

products-feed-animations

The captions work like this:

  • Caption 1: Product Title, Ratings and Featured Image
  • Caption 2: Description
  • Caption 3: Price and Add to Cart Button

Products Feed Advanced Settings

This panel includes some additional options.

products-feed-advanced-settings

  • Slider Max Height: if you decide that you’d like to set a maximum height for your slider, enter the value in pixels here
  • Constrain Main Image Width: this will ensure that the width of your main image is set to 100%. If you leave this deselected, the image will potentially be cropped to fit the slide’s dimensions
  • Center Main Image: if the ‘Constrain Main Image Width’ setting is deselected, you can opt to center your image within the slide
  • Embedded Feature Image Max Height: if you have selected to embed the featured image in the slide content, you can set a maximum height for that image here
  • Mobile Breakpoint: there are some layouts which might change for smaller screens. You can change the breakpoint here

Adding a Text Menu to a Posts Slider

First, create your posts slider. Then you can add a menu to it by following these steps:

In Navigation Settings, select ‘Display’ under ‘Pagination’ and select a position for the ‘Thumbnail Navigation’ – either top, bottom, left or right.

posts_feed_nav_settings

Now, in the Posts Feed Slider Layout panel, check the Menu Navigation box and choose what content you’d like to display in the menu:

posts_feed_text_thumbs

Adding a Posts Carousel

To add a posts carousel, firstly follow the guidance on creating a posts slider. Once you’ve added your posts slider, you simply need to define how many items are visible within the carousel.

In the Slider Settings section, update the Carousel Items field. If you’d like to add spacing between the items, update the Carousel Item Spacing field as well:

posts_feed_carousel

 

Adding a Posts Slider

You can easily add a slider to include your most recent posts. Go to Sliders > Add New to create a new slide, name it as you wish, then select ‘Posts’ from the ‘Content Type’ dropdown under Slider Settings.

posts_content_type

Two new panels will open in place of the standard Slides Order panel.

Posts Feed Slider Layout

Use the options in this panel to define the layout of the posts slider.

posts_feed_layout

Number of Posts

Select how many posts to include in your slider.

Category

Select one or more categories if required.

Caption Position

The caption will appear in the same position on each slide.

Caption Design

Leave this as ‘Standard’ for the standard caption layout or select either ‘Panel (third)’ or ‘Panel (half)’ to have the captions appear on a solid background.

Panel Background

This color picker will only appear if you choose one of the panel options from Caption Design. Select the color for your panel background.

Menu Navigation

Select this option to replace the thumbnail navigation style with a text menu showing a list of recent posts.

Menu Line 1, 2, 3

If you select the Menu Navigation option, you can set what content will appear in the menu navigation here.

Posts Feed Slider Content

In this panel you can define the content that you want to appear in your slider. The slider will automatically pull through the post’s featured image to use as the slide image. You can define caption content and animation options here for 1 to 3 lines.

posts_feed_content

Caption Content

Decide what content to display – either the post’s categories, publish date, excerpt, title or no content at all.

Caption Style

Pick a style to display the content in.

Caption Color

Choose a color for the text.

Caption Animation, Delay, Speed

Animation options for each line of the caption.

Creating a Slide

After you have created a slider, you can add some slides. Go to Slides > Add New to create a slide. Add a title then complete the options below.

Once you’ve successfully created a slide and added it to a slider, you’re ready to add your slider to a page.

Upload an image

Click Add Image to open the media manager. Either select an existing image or upload a new one.  Click Select.

Slide Captions

Add some text for the captions. Keep it brief to avoid filling the slide with text.

Animation Captions

Choose animations for the captions to appear.

Animation Delays

Select how many milliseconds to delay the caption from appearing. Setting Delay 1 and Delay 2 to slightly different values will make your captions appear at different times during the slide.

Slide Settings

Slider

Pick the slider(s) you’d like to allocate this slide to. Note that you can add the same slide to multiple sliders.

Caption Position

Choose where the captions will appear.

Linked Page

You can link the pages to another page on your site if you wish.

Creating a Slider

Super Hero Slider creates two new post types in your dashboard – Slides and Sliders. You create and edit slides and sliders in the same way you would a normal post or page.

To create a Slider, simply go to Sliders > Add New and give your Slider a memorable title.

You’ll see that there are no slides listed but there are other options available.

Once you’ve created your first slider, you can create a slide.

When you have added your slides, you can edit the slider to drag and drop slides into the order you want. Slides at the top of the list will appear first.

Navigation Settings

Navigation Position

Where to place the next and previous arrow buttons.

Navigation Style

The style for the navigation buttons.

Navigation Buttons

The arrow icons used in the buttons

Buttons Style

Choose size and shape

Pagination

Where to display small dots under the slider to represent each slide

Slider Settings

Slide Duration

How long each slide will display for before automatically transitioning to the next slide. Set this value to 0 to disable autoplay. Values are in milliseconds – divide by 1000 to get seconds.

Animation

Pick the animation for the slide to transition in and out

Adding a slider to your page

There are several ways to add a slider to your page or post.

Shortcode

Add [super_hero_slider slider=99] anywhere in your content where slider is the ID number of your slider.

More simply, if you insert [super_hero_slider] the slider will look for an ID number saved to your post/page meta in the Slider ID field that is automatically added to every post and page.

As featured image

You can replace the featured image on your page or post with a slider. Just select the slider in the ‘Slider’ dropdown field then check the ‘Replace featured image?’ box. Make sure you have added a featured image as a placeholder. There’s more information here.

PHP

Add <?php super_hero_slider(); ?> to a page template.

Or add <?php super_hero_slider(99); ?> to a page template. Note that if you specify a parameter (e.g. 99) this will always display the slider with the ID. If you omit the parameter, Super Hero will use the slider ID specified in the page or post metabox.

WordPress Hook

This is a neat way to add your slider. Depending on what hooks your theme supports, add something like this to your functions.php file.

add_action ( 'your_theme_hook', 'super_hero_slider' );

Every time the your_theme_hook fires, Super Hero will add a slider – if one is specified in the page or post Slide ID field.

You can add a hook to your theme by editing the theme files. For example, if you wanted to add a hook at the top of the page content in the Twenty Sixteen theme, you can edit the header.php file, adding as the final line:

do_action ( 'your_theme_hook' );

This tells your theme to fire any functions associated with this hook.

Remember: if you’re editing theme files, it’s usually best practice to create a child theme first. This will avoid having to re-edit files every time your theme has an update.