How to Create Hero Headers With the Layers Slider Widget

How To  Tutorials  Last Updated: Time to Read: 3 minutes

This tutorial is part of our feature 10 Ways to Use the Layers Slider Widget. For general help with using the Slider Widget and getting familiar with the controls, see the Layers User Guide.

Hero headers are a popular design element used as landing page “covers” or interior page headers, and can either include multiple slides or be static elements. This tutorial will show you two ways to use the Slider Widget to create page headers, one using the stock options, and one with a custom style you can add to the Advanced area of the widget.

pagetitle

This configuration can be used to mimic the page headers or “title banner” at the top of other Layers pages such as the Shop, Blog or Blank template. To begin, choose the page you wish to add the widget to and EDIT LAYOUT (or from the front-end, choose Customize in the admin toolbar)

  1. Click EDIT LAYOUT in the Customizer, then click your page’s BODY panel.
  2. Click +ADD WIDGET and choose the Layers Slider widget
  3. Expand the second and third slides and click the red trash-can icon to delete them.
  4. Click LAYOUT in the widget Design Bar and choose Full Width
  5. Click SLIDER in the widget Design Bar. We set our Slider Height to 400. Uncheck all options.
  6. Click on the Background Image button in the slide’s toolbar and choose a background color or upload a background image. We used an image that is 2000px wide and chose the Stretch option to auto-scale it to the screen size.
    • Always choose a background color that closely matches your background image so the text color invert triggers correctly.
  7. Click the Text button on the toolbar and choose the Center Align option and Large Text Size
  8. Replace the default Title with your Page Title.
  9. Replace the default Excerpt with an excerpt or introduction to your page, or optionally remove the Excerpt.
  10. We added some button text and a link to our title, but this is optional for most page title uses.
  11. That’s it!

Image 2015-11-04 at 4.00.09 PM

This configuration is best used on the Home page or other landing pages where you want visitors to focus on the call to action in the slide while getting a full-screen dose of your site’s visual style. To begin, choose the page you wish to add the widget to and EDIT LAYOUT (or from the front-end, choose Customize in the admin toolbar)

  1. Click EDIT LAYOUT in the Customizer, then click your page’s BODY panel.
  2. Click +ADD WIDGET and choose the Layers Slider widget
  3. Expand the second and third slides and click the red trash-can icon to delete them.
  4. Click LAYOUT in the widget Design Bar and choose Full Screen
  5.  We only use one slide to create a static header, so all options in the Slider button are ignored.
  6. Click on the Background Image button in the slide’s toolbar and select/upload a background image that is at least 1900px wide.
    • Always choose a background color that closely matches your background image so the text color invert triggers correctly.
    • Check the Stretch option to auto-scale the image to the screen size.
  7. Click the Text button on the toolbar and choose the Center Align option and Large Text Size
  8. Replace the default Title with your Page Title.
  9. Replace the default Excerpt with an excerpt or introduction to your page, or optionally remove the Excerpt.
  10. Add some button text and a button link. You can use an anchor link to jump to another place on the same page, for example.
  11. To create the larger heading size and outline button, click the Advanced button on the Design Bar and add a custom class hero
  12. Add the following styles to the Custom CSS box:

If you want to use the hero style on other pages with the Slider widget, add the Custom CSS code above to the main CSS panel in your Customizer menu instead, then simply add hero to the Custom Class field in the Advanced option of any Slider widget on your site. Learn more about using the Advanced widget option.

View Example