This powerful widget may just make you rethink the way you design in Muse! Our Presentation Panels widget allows users to create full width and height "panels," which can be snap-scrolled with a mouse scroll wheel or arrow keys on a keyboard. This allows users to create dramatic, fullscreen scrolling page layouts that respond beautifully regardless of display size or shape. Scrolling works both vertically and horizontally.
Widget Compatibility: Standalone (designed for use as the only widget on a page)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Setup
Drag the widget from the library and drop into your project in Design mode.
The widget components can be placed off canvas and out of the way.
You will notice that Presentation Panels consists of 3 widgets:
Controller: This component is the master widget. It contains all of the major master settings for all of the panels. Check out the tutorial video above for more detailed explanation of individual options.
Parent Panel: The Parent Panel defines the main/background area of an individual panel. You will need a separate Parent Panel widget component for every panel on your page. Every Parent Panel widget component should have it's own unique ID. The panel graphic style entered should match the graphic style applied to the parent panels you create using State Buttons (more on that later). You can also set unique label text for the hover tate of the pagination dots.
Child Panel: Child Panels widget components will also need to be duplicated so that there is Child Panel widget component for every child panel used. The "Parent Panel Graphic Style To Place Within" setting should be filled with the name of the parent panel graphic style you would like to place the child panel inside of. If you are not using child panels within your parent panels, you do not need the Child Panel widget components on your page.
The first step to setting up Presentation Panels is to have a plan in place for your page. This widget pretty much takes over the page it's placed on. It shouldn't be added to an existing page that has other content. With a pre-existing idea of the layout of your page (how many panels, content for individual panels), Presentation Panels is fairly simple to set up.
Next, you will want to create your panel content. Drop a State Button into your project. The State Button represents the panel seen when the page is previewed or published. The size of the panel is not critical, but make it large enough so that it easily contains all of the content you would like to be seen within. Making the State Button about the width of the page usually works well.
Clearing the pre-set styling of the State Button is usually best. Right-click and select "Clear All Styling", then "Clear Widget Contents". This will create an empty State Button.
Fill the State Button with your content. You can place images, text, most anything. Select the State Button and apply a graphic style to it.
Open the option panel on a Parent Panel widget component and define the graphic style. While you're there, set a Unique Panel ID.
Repeat this process of creating parent panels using State Buttons. Duplicate Parent Panels as needed by Option/Alt-dragging.
For child panels, use the process described above for parent panels.
When setting up a page with Presentation Panels, keeping panels organized makes life easier. The actual placement of the parent and child panels in Muse Design mode has no effect on where the panels appear when you preview or publish your page. The order and arrangement of the panels is handled by the widget code. We suggest stacking the parent panel state buttons vertically, in the order that they will appear on your page. You can place child panel state buttons next to the parent panels or stacked below. It's up to you.
You will likely need to fine-tune the placement of content within your parent and child panels to make sure things are properly arranged when viewed in-browser. Also, keep in mind that when using text or images in child panels, even though the Child Panel has a "Panel Position" option, you can fine-tune placement by adjusting content within the child panel State Button itself.
Since this widget takes over the page it's placed on, you will not see headers and footer applied by a master page. Use the "Header and Footer Settings" section in the Controller widget component to add custom class headers and footers designed to match the headers and footers used elsewhere on your site.
Commonly Asked Questions
Why doesn't your live preview work right in Safari?
Presentation Panels works great in Safari. Our live preview system uses an iframe, which has a strange quirk when viewed in Safari. When used in your own project, you will not have any issues.
When I use Presentation Panels, I can't see the header or footer I use throughout my site.
Since Presentation Panels is a full screen widget, it's designed to "take over" the page - so content such as a header or footer will be overridden by the widget. This is why we've added the header and footer options within the widget options. The best way to do it is to create state buttons that are designed to look exactly like your header and footer areas, and define the applied graphic styles in the widget panel.
Known Issues/Conflicts
This is a powerful widget that takes control of page positioning, and may conflict with other fullscreen or location-specific elements. We do not recommend combining it with Pushy Panes, Fullscreen Thumbnail Gallery, Media Pro, Versa Slide, Fullscreen Video Backgrounds, SHOW Video Backgrounds and scroll effects.