Flip Box Element

Choose the Flip Box element to display content in an animated box that flips to the other side the users hover over them. 


Content Tab 

Front

Content

  1. Graphic Element - Select a graphic element for your font display. You can choose an Image or an Icon, or leave it None
  2. If you choose Image as your graphic element then you will be prompted to add an image. and set the Image Size. 
  3. If you choose the Icon as your graphic element then you will be prompted to add an icon. Choose to View the icon in Default, Stacked, or Framed display. Also, set the Shape of the icon either Circle or Square. 
  4. Title - Type in the title that will appear on the front of your flip box. 
  5. Description -  Type in the description that will appear on the front of your flip box. 

Background

Here you can choose the background for your flip box element. You can select either Classic or Gradient 

If you choose the Classic type of background 

  1. Color - Set a color as your background 
  2. Image - You can set an image as your background. Choose from the library
  3. Position - Set the positioning of the image. 
  4. Attachment - Set the attachment for the image, you can choose from Default, Scroll, or Fixed. Note: the Fixed Attachment will work on Desktop only
  5. Repeat - Choose if you wish your image to be repeated on the flip box. Select from  Default, No-repeat, Repeat, Repeat-x, or Repeat-y
  6. Size - Set the size of the image either Default, Auto, Cover, or Contain

If you choose the Gradient type of background

  1. Color -  Set a color as your background 
  2. Location - Set the location for the primary color 
  3. Second Color - Set the second color of the gradient
  4. Location - Set the location for the secondary color 
  5. Type - Choose the type of your gradient either Linear or Radial 
  6. Angle - Set the value for the gradient angle 

Back

The backside of the flip box element will contain the same elements as the front side. They are also divided into two tabs, the Content and Background tab. The graphic element will appear only on the front side of the flip box, but the backside will also contain exclusive elements 

  1. Button Text - Add a button to the backside of your flip box and customize the text 
  2. Link - Enter the URL to link the slides or the button
  3. Apply Link - Once you enter the URL, you can also specify where you want the link to be applied. It can either be Whole Slide or Button Only. 

Settings

  1. Height - Gain control over the height of the flip box. 
  2. Border Radius - Set the border radius for the flip box 
  3. Flip Effect - Choose an effect that will transition from the front and back side of the flip box. Select either Flip, Slide, Push, Zoom In, Zoom Out, Fade 
  4. Flip Direction - Select a flip direction either Up, Down, Left, or Right. 
  5. 3D Depth - Add a 3D depth to your flip box. Switch the handle on. 


Style Tab

Front  

  1. Padding - Add padding to the content area of the flip box
  2. Alignment - Set the alignment of the text either Left, Center, or Right 
  3. Vertical Position - Set the vertical position of the content either Top, Middle, or Bottom 
  4. Border Type - Set a border for the front side of the flip box 

Icon

  1. Spacing - Set the spacing between the icon and the content 
  2. Primary Color - Set the primary color for the icon 
  3. Secondary Color - Set the secondary color for the icon 
  4. Size - Determine the exact size of the icon 
  5. Padding - Set the padding around the icon 
  6. Rotate - Rotate the icon to any angle 

Title 

  1. Spacing - Set the spacing between the title and the description of the flip box 
  2. Color - Set the color for the title 
  3. Typography - Tweak the typography options for the title 

Description 

  1. Color - Set the color for the description 
  2. Typography - Tweak the typography options for the description 

Back

The Back side of the flip box will contain all the same elements besides the customization options for the graphic elements. What's exclusive to this section are the button customization options.

Button 

  1. Size - Set the size of the button 
  2. Typography - Tweak the typography options for the button's text 
  3. Text Color - Set the text color for the button 
  4. Background Color - Set the background color for the button 
  5. Border Color - Set the color for the button's border 
  6. Border Width - Take control over the button's border 
  7. Border Radius - Set the border radius for the button 

Set the settings for the Advanced Tab that is appropriate for the element. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.