Media Pro Gallery - Custom Filtering Buttons

Stage 1

First, drag the Media Pro Gallery onto your Muse canvas.


Stage 2

To make your Media Pro Gallery full width, browser-responsive, drag the corners of the gallery to the side of the canvas to make it 100% width.


Stage 3

Open the Collections panel and add any 'Collection Title' that you want to use. In this tutorial we will be using 'Pictures.'


Stage 4

Create a new text box / rectangle on your canvas, this will be your custom button. In this example we have set up a text box and positioned the text in the center with a stroke applied to the exterior.


Stage 5

Navigate to the Graphic Styles panel inside Muse and assign your new button a graphic style. In this tutorial we have called it 'pictures.'


Stage 6

Go into the Collections panel, in the 'Collection Button Style' field, put the name of your graphic style.


Stage 7

Add your content into the collection by using the file browser to find your images. You can also insert video using the URL fields.

Stage 8

In the Layout panel, set the 'Custom "All" Button Style' to 'Custom.' We have also set the 'Header Background Color' to transparent, but this is just a styling preference.


Stage 9

Copy and paste the 'Pictures' button that you just created, rename the text inside as desired. We have chosen 'All.' With the new button selected, navigate to the Graphic Style panel and create a new graphic style. You can call this whatever you want; we are going to call it 'all.'

Repeat Stages 6-9 to add the relevant photos to this new collection.


Completed!

Your custom buttons will now work perfectly! Remember that you can style these buttons however you want; the rest of the gallery may also be styles with the other options in the panels for this widget.


Require a video run through? Check this out