Our SuperHero widget allows for an image to be displayed at the top of a page in fullscreen format regardless of browser and screen size or shape. The fullscreen image then scrolls away as the page is scrolled downward. This is a very highly requested feature that has never been possible within Muse - until now!
SuperHero includes a child element with custom positioning options for headlines, captions, or additional images. This widget is fully responsive and works great across all devices.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.1
Supported Devices: Desktop, Tablet, Phone
Release Log
1.1: Fixed child panel positioning problems and extra space being created outside of widget when child was placed to the right (09/30/2016)
Setup
Drag the widget from the library and drop into your project in Design mode.
You will notice that there are 3 components on your workspace. We have included the MuseThemes widget along with 2 state buttons, all set up as hero and child components. The state buttons have graphic styles already applied to ease setup.
The small MT SuperHero widget (the one with the option panel) can be place out of the way, off the page.
Place the larger state button (with the "hero" graphic style applied) at the very top of the page, and set the state button to full width. Ensure that the state button is at the top of the page by checking the Y axis: it should be set to 0.
With the hero state button selected, click "Fill." Click "Add Image" to fill with an image. Don't forget to set Fitting and Position settings - these will affect the look and behavior of your fullscreen hero.
If you plan to use a headline or caption, you will want to place the child button (with the "child" graphic style applied) at the top of the page, like the hero state button. It's ok if the child state button gets "pulled into" the larger hero state button. Style the child state button as you like, with text, images, etc. If you don't plan to use a child panel, it's ok to delete the included child panel.
Open the Superhero widget options panel and enable the child panel. You can also set the child panel position and padding in this section.
Preview in browser to check child panel positioning and padding. You will notice that the hero image will stay fullscreen, regardless of browser or screen size until you scroll down the page.