1. Home
  2. Docs
  3. Image Elements
  4. Flip Box

Flip Box SA Element

Flip Box is a responsive Elementor Addons Element that lets you add a box to the screen that will flip through the items within the box. Flip Box element for the Elementor builder combines the power of “Info Box” & “Call to Action” block altogether. This element is the best and easiest solution for those who want to demonstrate images in a superb way on their site! Here in this tutorial, you’re going to learn how to use the Flip Box element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Flip Box Element

»Content

 

Flipbox Settings

⇒Flipbox Type: Set the flip box type to customize the effect on your own preference using the options.

⇒Icon Type: Set the icon type either as the icon or as the image for both the front and backside of the flip. You can also select None if you want nothing at all in your flip box.

⇒Icon: Select an icon from the list according to your needs or preference.

⇒Flipbox Image: Upload the flip box image for both the front and backside, if you choose the icon type as image.

⇒Image Resizer: You can resize the image in the flip box very flexibly. Here, using this option, you’ll be allowed to resize the image manually which will automatically adjust with your content.

⇒Image Size: Customize the fixed size of the flip image from our pre-defined size type.

 

Flipbox Content

⇒Content Alignment: Set the flip box content alignment either left, right or center.

⇒Vertical Alignment: Set the vertical alignment of the flip box content either top, middle or bottom.

⇒Front Content:

→Front Title: Type your flip box front title here.

→Front Text: Type your flip box front text here.

⇒Back Content:

→Back Title: Type your flip box back title here.

→Front Text: Type your flip box back text here.

 

Link

⇒Link Type: Set the link type here.

⇒Link: This is where you can add your Desire link or URL so that your selected part can get alive by linking to other pages. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link

⇒Button Text: Input the button text if you select your link type as a button.

⇒Button Icon: If you want to add an icon within the button, then select the icon you want from the list.

⇒Icon Position: Set the icon position either before or after the button text.

 


»Style

 

Flipbox Style

⇒Background Type: Set the background type either Classic or Gradient for both Front BG & Back BG of the flip box. And then customize the flip box style according to your preference.

 

Image/Icon Style

⇒Image Type: Set the image type either circle or radius. If you choose radius, customize the border-radius value manually.

⇒Border Type: When you select the icon type as an icon, you can customize the icon for both the front and back flip box. Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the icon for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the icon border.

⇒Padding: Set the padding value for the top, right, bottom and left around the icon for different dimensions. You can link the values together or customize them individually.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the icon for different dimensions.

 

Color & Typography

⇒Icon Style

→Color: Add a custom color to the icon if you add one in the flip box.

→Typography: Set the typography options for the titles.

 

⇒Title Style

→Color: Add a custom color to the title text of the flip box.

→Padding: Set the padding value for the top, right, bottom and left around the title for different dimensions. You can link the values together or customize them individually.

→Typography: Set the typography options for the title text.

 

⇒Content Style

→Color: Add a custom color to the content of the flip box.

→Padding: Set the padding value for the top, right, bottom and left around the content text for different dimensions. You can link the values together or customize them individually.

→Typography: Set the typography options for the content text.

 

Button

⇒Margin: Set the margin value for the top, right, bottom and left around the button for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the button for different dimensions. You can link the values together or customize them individually.

⇒Color: Customize the button text color for Normal & Hover view.

⇒Background Color: Customize the button text background color for Normal & Hover view.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the button for different dimensions.

⇒Typography: Set the typography options for the button text.


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Flip Box Element.


Was this article helpful to you? Yes No

How can we help?