Skip to content

Main Navigation

Version 3.1: Panel Flip

What is a panel flip?

A panel flip is similar to a panel, but with the added ability to flip to provide more information. Think of it as a business card where you have information on the front and back.

This is the front side of the panel


This is a panel flip. Click anywhere on the panel to flip to view the back side.

This is the back side of the panel


This is a panel flip. Click anywhere on the panel to flip to view the front side.

Creating a panel flip

Step 1:

On the page you are editing, click on the Snippets icon in the WYSIWYG Toolbar.

Step 2:

Select Panel Flip and then click Insert.

panel flip option

Step 3:

Add your content to the front and back panel. You can also adjust the color of both sides of the panel by swapping out the text in the Panel Colors section.

panel color options

Step 4:

Click Save to view changes.

Ways to style a panel flip

Add classes in the table properties of the panel.  

This is the Header of a Panel Flip


This panel color is "light-gray"

you can change the panel background color in the Panel Colors 

This is the Header of a Panel Flip


This panel color is "medium-gray"

you can change the panel background color in the Panel Colors 


Custom Class: width-half position-center

width-half turns the size of the normal panel into half of the size. Other width classes include width-quarter, width-third

position-center moves the panel to have a center align. Other position classes include position-left, position right

Custom Class: width-half position-center

width-half turns the size of the normal panel into half of the size. Other width classes include width-quarter, width-third

position-center moves the panel to have a center align. Other position classes include position-left, position right


view additional style options

Resources


Video Tutorials

(COMING SOON)


Layout Examples Library

(COMING SOON)

Last Updated: 3/1/22