Have you ever struggled with making your Adobe Muse site look more customized? Many of the default Muse widgets are limited. This article offers a series of Muse Power User Tips to help you create more advanced Muse sites by combining QooQee widgets with default Muse widgets. As an extra bonus, our premium users will have access to a downloadable Muse file that contains all of the elements (fully styled) described in this article.
Slideshows
It’s easy to make advanced slideshows by combining default Muse slideshows and QooQee widgets.
Responsive Width Slideshows
Default Muse slideshows are not responsive. However, with the Responsive Slideshow widget, you can easily give any slideshow responsive width:
Simply create your slideshow, then place the Responsive Slideshow widget on the page. Open the widget option panel and enter the size of your largest breakpoint.
Responsive Width + Height Slideshows
To create this effect, you need to use the fullscreen slideshow and the Other Page widget.
First, place the Other Page widget on the page where you want your slideshow to appear.
Create a new page, give it a simple name, such as ‘fullscreen’, with no spaces or special characters.
On the new page, place a fullscreen slideshow. Customize it.
Go back to the page where you placed the Other Page widget. Open the widget option panel and enter the name of the page where you placed your fullscreen slideshow. In this example, it is ‘fullscreen’. Specify the height that you want the slideshow to take up.
Preview the site in the browser to see the slideshow.
Custom Slideshow Tooltips
Many slideshows that you find on the web have ‘tooltips’.
These are usually little circles at the bottom of the slideshow that signify how many slides there are and which slide you are currently on. Muse doesn’t have them by default, but there’s a way to create them.
First, grab the Thumbnails slideshow from the Widget panel.
Move the Thumbnails Container to where you want the tooltips to appear. Then, double click on a thumbnail and change it to the desired tooltip size. In this sample, I made them 15 pixels. Add a radius of 100 to make it a circle.
Double click on the thumbnail to select the image. Drag it out of view. Now you can add your own fill color and style the tooltip.
Self-panning Slideshows
Self-panning slideshows are great for when you want to show off a constant stream of images. This can be used for showing off photos, logos, testimonials, and more.
To create one, grab the Flex widget. Add your slides. Open the Main widget option panel and enter the following settings.
Then use the Click Blind widget and give it the following Style Name ‘CAMediaSlider’. This makes it so that the Flex lightbox doesn't open.
Add Icons Inside Slideshow Captions
To add icons you must first create a rectangle and add your image as a background fill. Cut your image (⌘X). Go to the caption, double click on it so the moving cursor appears. Then paste your image into the text frame. You can move your image by using the arrow keys.
Compositions
Composition widgets are very flexible. They can be used for nesting maps, videos, forms, and other content. You can use text, images, or a combination of both as your triggers.
You can also use them to create lightboxes/pop-up windows. This is a good option for when you want to feature additional content.
By default, Compositions aren’t responsive. You can make it responsive simply by adding the Responsive Composition widget. To use the widget, enter the size of your largest breakpoint in the widget option panel. You also have options for making the next/prev/close buttons responsive.
Images
You can enable image panning effects, hover effects, and control icon colors entirely in Muse.
Image Panning
Image panning, as a hover effect, can be easily done by changing the position of an image between the normal and rollover state.
First, create a rectangle. Add an image as a background fill by clicking on ‘fill’ and then ‘add file’. Select a position for your image.
Then go to the Rollover state and change the position.
Open ‘transition’ and check the box beside ‘Fade’. This makes the transition smoother. Specify the amount of time that you want the effect to take place.
State Button Hover Effect
State Buttons and the Responsive Height widget can be combined to enable a unique hover effect on images in which text and/or images can appear on hover.
First, create a rectangle and add your image as a background fill. Select your image, click on ‘Hyperlinks’, beside Tooltips type in RH followed by the percentage that you want the image to take up. If you wanted the image to take up 50% of the browser height, you would type RH50.
Grab a state button. Clear it of all styling and contents.
Now you can customize it. Add any fill, text, or images that you want to appear on hover. In the normal state, set the opacity to 0. On the rollover state, set the opacity to 100% (or to whichever opacity you want).Select the state button and give it the same responsive height that you gave the image. Place it over the image and make sure that it is the same width. Finally, place the Responsive Height widget on the page.
Change Icon Colors
In Muse, there’s a special trick to instantly change the color of your icons without opening Photoshop or Illustrator. Please note that this only works for PNG icon files.
Create a rectangle and add your image as a background fill. Set the fitting to ‘scale to fit’.
Open the ‘Effects’ panel and click on the ‘glow’ icon. Check the box beside ‘glow’ and then set the ‘opacity’ to ‘100’ and the ‘blur’ to ‘250’. Check the box beside ‘inner glow’.
Now, you can instantly change the icon color in Muse by changing the glow color.
Other Power Tips
Videos: Responsive Width + Height
By using the Fullscreen Video widget and the Other Page widget, you can create fully responsive videos. The process is exactly the same as the process for a fully responsive slideshow (described above) except we use the Fullscreen Video Widget.
Create a Menu with the Multi-Level Accordion
The Multi-Level Accordion can be used as a menu. This is a good option for categorizing your links.
First, create the multi-level accordion.
After setting up your accordion. Link each tab to a page. Pin it to the upper left or right of your page.
To create a side menu look, create a rectangle that is about 1400 pixels tall and the same width of your accordion. Place it behind your accordion. Pin the rectangle to the same corner of the page where you pinned your accordion. Now you have a custom sidebar navigation.
Use CC Libraries to store reusable assets
A quick way to work is to save Muse objects to your CC Libraries so that you can easily reuse them. This is especially useful for elements that are used often such as buttons or social media icons.
To do this select your object. Then open the CC Libraries Panel. Click on the plus icon ‘Add Content’. Now your object is saved to the CC Library Panel and you can drag and drop it onto the page as necessary. This video explains how to use the library panel in full detail.
Sample File
To help you get started, we’ve created a Muse file for our Ultimate Pass users that has all of the elements described in this post. Users can access this download by going to Account > Downloads.
Widgets Mentioned
