Flipping Boxes

http://www.muse-themes.com/products/flipping-boxes

The Flipping Boxes Widget is a fantastic tool for bringing life, movement, and interactivity to your website design. Ordinary elements created with the text tool are modified to "flip" on rollover, in a transition style of your choice. Create unique experiences and call-to-action opportunities by placing prices, options, images, links, social media icons, FAQ's, trivia, and more on a flipping box.

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.0
  • Supported Devices: Desktop

Release Log

  • 1.0: Adds collapsible panel functionality and support for responsive Muse




Setup

  • Drag the widget from the library and drop into your project in Design mode.
  • The widget can be placed off canvas and out of the way. Once you've created a flipping box, it's a good idea to organize the widget component with the box. More on this later.
  • Unlike many of our other widgets that utilize state buttons or rectangles, this widget works with text boxes. To begin making a flipping box, create a text box using the Text tool. This box will become the background for the flipping box. Don't type text into this box. You can add a color fill or image fill, just like a rectangle box or state button.
  • If you would like text on the front side of the flipping box, create a new text box. Input your text and style as you like.
  • Using the standard Selection tool, select the new text box and right-click it. Select "Cut". You can now paste the text box inside of the text box you made previously by double-clicking it to pull up the text cursor. Now right-click > paste.
  • This process will place the newer text box (containing text) inside of the older text box background. If you click on the inner text box, you will see the states panel in the upper left corner of Muse design mode say "Inline". This indicates that the element you've selected is inside the parent text box. With the parent (first) text box selected, you can add line breaks to control the vertical position of the text box within. You can also use the text alignment function to align inline elements left, right, or center.
  • Keep in mind that every flipping box you create will need a front and back side. What was created in the steps above represents one side of a flipping box.
  • Once you've created a front or back half, you will need to apply a graphic style to it. You can name the graphic style anything you like, but keep in mind that you will want to stay organized. Something like "box1_front" works well.
  • Open the widget option panel and define the graphic style in the "Front Graphic Style Name" or "Back Graphic Style Name" field.
  • Now that you've created a front (or back) side of a flipping box, you will simply repeat the steps above to create the opposite side. It is important that front and back sides use the exact same width and height dimensions. An easy way to do this is by duplicating the first side as a template for the opposite side.
  • Once the front and back sides are made and defined in the widget option panel, you will want to organize your elements. Start by placing the flipping box back side where you would like it. Now drag the front side on top of the back side. Make sure that the front side is on a layer above the back side by right-clicking the element and using the Arrange command to move it to the front. Next, place the widget component on top of the flipping box elements (again making sure that it's on a layer above the box elements. We like to place it in the corner. This creates a neat, organized package for your single flipping box.
  • If you're creating mulitple flipping boxes, staying organized as described above will keep your design page neat and clean.
  • The widget option panel provides transition style and speed settings. These can be mixed and matched on the same page.
  • Preview the page in browser to see the flipping boxes in action.
  • Create as many flipping boxes as you like.
  • We suggest watching the tutorial video above, since the process is likely more easily understood that way.

Be sure to set the Resizing option in Muse to "none" for all flipping boxes. Flipping boxes work fine in responsive sites, though it's not ideal to have the boxes themselves resize.


Commonly Asked Questions

No commonly asked questions


Known Issues/Conflicts

No known issues or conflicts


Additional Info Links