SuperHero Slider

This highly-requested widget displays a unique slideshow that loads fullscreen on any device. Page content below the full screen slideshow is accessible once you scroll. Features include custom titles, subtitles, and image positioning.

Demo: https://demo.wocode.com/superhero-slider

Tutorial Video

Setup

WIDGET PLACEMENT

The steps described in this section will convert the slider and row to full width. Resetting the spacing as described below will eliminate space between the slider and the page header. This is the most common setup.

• Drop the SuperHero Slider widget on your page. We suggest placing the widget in a new row.
• In the widget options, go to Design > Spacing and click “Reset All Spacing”.
  
• Click on the row the widget is placed in, and select “edit design”.
• Enable “Full Bleed Row”
  

MANAGING HEADERS

This section describes how to align the slider with headers. There are two methods described: Method 1 aligns the slider below the header. Method 2 aligns the slider at the top of the page, “behind” the header (this is ideal for transparent headers).

Method 1: Align Slider Below a Header

SuperHero Slider will automatically align below the header. Since SuperHero Slider is designed to take up the space of the entire screen, the slider will be pushed below the screen at a height equal to the height of the header. This is because the top of the slider begins at the bottom of the header (relative to page height). This method deducts the height of the header from the slider height, so that it is perfectly full screen.

Note that SuperHero Slider generally looks best with narrow headers. Tall headers that dominate a lot of page space will decrease the space allowed for the slider.

• First off, you will need to know the height of your header. You may estimate the height, and then fine tune, or you may use a simple tool to learn the height of the header.
• If you have a screenshot tool that allows you to select a portion of the screen, you may use this to identify the height of your header, if your screenshot tool shows the pixel dimensions of the selected area. On a Mac, select Cmd + Shift + 4 to enable the screenshot tool. Align the area over the header vertically, and note the height pixels before taking the screenshot.
• Enter this value in the Header Height field. This parameter will deduct the entered value from the overall height of the slider. This deduction will align the bottom of the slider with the bottom of the page.
• You may also estimate the height, without the use of a screenshot tool. Simply start with a value, and then fine tune after viewing the published page.
• Some fine tuning will be needed in most cases.

Method 2: Align Slider “Behind” a Header – Ideal for Transparent Headers

If your site utilizes a transparent header, or if you’d simply prefer to align the slider to the top of the page, you may utilize this method.

• Once again, you must determine the height of your header. Refer above to method 1 for details.
• Open the widget options, and go to Design > Spacing. Enter the height of the header as a negative value in the uppermost spacing option.
  

• Even though the widget was placed below the header on the page, this negative margin will move the slider up, to the top.
• As with method 1, you will likely need to fine tune the spacing so that the top of the slider is perfectly placed at the top of the page.
• The header will be seen “on top” of the slider, as if on a higher layer. If the color of the header is set to transparent, any text or logo will be seen on top of the slider image. An example of this type of setup can be seen below.
  

WIDGET OPTIONS (CONTENT)

• Transition Time: This is the time it takes for the slide transition to complete.
• Transition Style: These styles offer various visual transition effects when transitioning through slides.
• Image Position: This dropdown offers image positioning options. The default option, “Center Center” will be ideal in most cases. However, if you have images that have key content at the top of the image, you may use the “Top Center” setting to ensure that this content is seen. The setting anchors the image to the position selected.
• Arrow Color: Selects the color of the previous and next arrows. The arrows are hardcoded SVG files, and therefore are not CSS based elements that allow for the normal color picker process. Arrow colors available are white, blue, and black.
• Enable Continuous Loop Mode: This mode simply allows the slideshow to loop to the beginning slide when you advance past the last slide.
• Enable Grab Cursor: This setting allows the cursor to show as a hand, as you would see when hovering a cursor over a link. The purpose of this option is to allow the user to click and swipe left or right as an optional method of transitioning slides. Note that this mode requires a long swipe when the slider is viewed on larger browser widths.
• Enable Pagination: This option enables pagination dots at the bottom of the slider. Note that the color of the pagination dots can be selected in the Design section. The pagination color picker will only be seen when pagination is enabled.
• Header Height: This setting deducts a portion of the slideshow height, which accounts for the height of the header on your page. See the “Managing Headers” section above for more information.
• Slide Images: This is the area where you will select images, enter title and subtitle text, and enable buttons. Each “List Item” represents a single slide. All options for a slide are available when you select a list item. Note that titles, subtitles and buttons are unique, and assigned to slides individually.

WIDGET OPTIONS (DESIGN)

In the Design section, you will find sections that control the styling for the Title Text, Subtitle text, Buttons and Spacing. Additionally, if pagination is enabled, you will see an option to set pagination color. The spacing settings are standard spacing settings you find in all widgets. The Title and Subtitle Styling section parameters will not be explained in detail here, as the labels are self explanatory.