(NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information.)

The Flip Boxes shortcode lets you have boxes that have a front side and back side and that flip from one to the other when you mouse over the box.

You can have up to four columns of boxes. You can also add icons, control colors, etc.

Here's an example of two columns (i.e. two boxes).

Title Frontside

Lorem ipsum faucibus feugiat luctus ligula vivamus ac et, etiam egestas et per condimentum volutpat sagittis, porta metus dictum duis nec pretium felis.

Title Backside

Lorem ipsum faucibus feugiat luctus ligula vivamus ac et, etiam egestas et per condimentum volutpat sagittis, porta metus dictum duis nec pretium felis.

Title Frontside

Lorem ipsum faucibus feugiat luctus ligula vivamus ac et, etiam egestas et per condimentum volutpat sagittis, porta metus dictum duis nec pretium felis.

Title Backside

Lorem ipsum faucibus feugiat luctus ligula vivamus ac et, etiam egestas et per condimentum volutpat sagittis, porta metus dictum duis nec pretium felis.

 

Here's a partial look at the settings page.

flip-boxes-settings

 

 

Here's a sample shortcode.

 

These are the properties:

  • columns = a number between 1-4
  • title_front = title text for the front side of the box
  • title_back = title text for the back side of the box
  • text_front = text for content area of the front side of the box
  • border_color = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • border_radius = a number with px for pixels like 3px
  • border_size = a number with px for pixels like 1px
  • background_color_front = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • title_front_color = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • text_front_color = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • background_color_back = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • title_back_color = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • text_back_color = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • icon = the name of the font awesome icon (tablet), or you may add an image URL for a custom icon that you uploaded. If you do use this, ensure that there is no “image=” value
  • icon_color = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • circle = yes, no
  • circle_color = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • circle_border_color = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • icon_flip = horizontal, vertical (or nothing)
  • icon_rotate = 90, 180, 270
  • icon_spin = yes, no
  • image = this is for custom icon images, if you wish to use one then ensure that there is no “icon=” value. It is the URL path of the image that you want to appear, starting with http:// and usually ending on .jpg, .png or .gif
  • image_width = a number of pixels like 35 (but don't add px)
  • image_height =  a number of pixels like 35 (but don't add px)
  • animation_type = bounce, fade, flash, shake, slide
  • animation_direction = down, left, right, up
  • animation_speed = a number between 0.1 and 1
  • Content for the back side of the box is placed in between the open and closing shortcode tags