How to Configure the Flipping Boxes Widget

Stage 1

Drag a text box onto the canvas. It is important that a text box is used and not a rectangle, otherwise the widget may break.

Stage 2

Style your text box as desired. In this example we will use an image as a background fill.

Stage 3

Copy and paste the first text box that you created on the canvas, style the second text box as you wish. We have used another image for the second text box.

Stage 4

Navigate to the Graphic Styles panel, and with the first text box selected create a new graphic style. In this example we have called it 'front.'

Stage 5

For the second text box follow the same process as shown in Stage 4, but this time give it a different graphic style name. We have used 'back.'

Stage 6

Select the first text box, right click and select 'Bring To Front' under the Arrange tab.

Stage 7

Drag your first text box over and on top of text box two. The first text box should be appearing above the second text box on the canvas.

Stage 8

Navigate to your Library panel in Muse. Locate the Flipping Boxes widget and drag it onto your canvas. Ensure that when you place the Flipping Boxes widget, you place it in the top left hand corner of the text box, this is for positioning purposes. It may be easier to select both text boxes and the widget at this point, then right click and group them all together to make it easier to move them around the canvas.

Stage 9

Apply your graphic styles to the widget Options panel. In this example we used 'front' and 'back,' but enter whatever graphic styles you have chosen for your text boxes here.

Completed!

You're all done; when you preview your site in browser your flipping box should preview perfectly. You can change the animation duration and rollover style in the Flipping Boxes widget option panel.