Sunder is a large format gallery that may just become your go-to solution when a bold statement is needed.
This Design Series widget showcases a handful of images in dramatic fashion. Use this gallery to show off photos, art, products and more. Hover-state info panels are great for quick info bits or links to other pages on your site. Separate desktop, tablet and phone layouts ensure your gallery looks great on all screens.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Release Log
1.0: Initial Release
Setup
NOTE:
Sunder Gallery is a Design Widget. Design Widgets are native Muse widgets (Slideshows, Compositions, Galleries, etc) that have been pre-styled and packaged by our design team. The setup instructions below are not intended to show you how to use native Muse widgets, but instead provide a few tips for using this pre-styled arrangement.
WHAT'S INCLUDED IN THE .ZIP FILE:
You will notice upon unzipping the .zip file that in addition to the Sunder Gallery .mulib file, there is a .muse file included in the package. We've included the demo file to provide an example of a typical usage of Sunder Gallery. A good understanding of stock Muse Composition widgets will help greatly. The tips below should help you to get started.
If you're having trouble locating the widget in your Library, look above the Toolbox widgets, in the "Galleries" section.
THE LIBRARY FOLDER
When you open the Big Box Menu library folder, you will see that there are three separate widgets within:
Desktop Layout: This layout was arranged with the desktop in mind. Best for breakpoints 960px and larger.
Phone Layout: This layout was arranged with phones and mobile devices in mind. Best for breakpoints between 300-600px.
Tablet Layout: This layout was arranged with tablets in mind. Best for breakpoints between 700-800px.
ADDING SUNDER GALLERY TO YOUR SITE OR PAGE
Drag and drop the widget into your project.
If you're using this widget on a new site, it is a good idea to set up breakpoints before placing the widget.
Always drop the preferred layout into an appropriately sized breakpoint. Use the layout guidelines above for a general guide for desktop, phone, and tablet breakpoint ranges.
Keep in mind that you don't have to use the gallery on every breakpoint. For example, if this gallery feels appropriate for the desktop and tablet sizes, but not mobile, feel free to not add it to the mobile breakpoint range.
Since the layouts are built specifically for desktop, phone and teblet, each layout has been set to be seen on the breakpoint it is added to. Show and hide options are available by right-clicking on the gallery composition.
EDITING IMAGES AND TEXT
Desktop Layout:
Select a trigger. The triggers are the white thumbnail areas.
When you click on the thumbnail area, it will trigger the corresponding target.
The target is the large full-composition image you see surrounding the trigger thumbnail.
To edit the target image, you must move the trigger slightly to access the target underneath the trigger.
Select the trigger and drag it a bit in any direction.
Imagine the thumbnails in a grid. As you move a single thumbnail out of the way, you are uncovering the corresponding target image underneath.
Click on the area underneath. This is the target.
With the target selected, click on the orange "Fill" button in the top menu. This will open a dropdown where you are able to select a new image.
Click the image name to replace with your own image.
Repeat this process for each trigger and target combination.
When moving trigger elements, be sure to replace them exactly where they were previously. The X and Y coordinates are useful for ensuring pixel-perfect placement.
Phone and Tablet Layouts:
Simply select an image or text element to update it. For images, select on the image and then click on the "Fill" button in the top menu to replace it. For text, edit the text as you would any other text in Muse.