The Flip Box element helps you create animated boxes that flip to the other side, once the user hovers over them. JD Builder has all the options to style your flip box the way you want, all the options are again mentioned under the main General tab.
In the Front Box tab we have the following options:
- Box Graphic- Choose the graphic to displayed on the front of the flip box.
- Icon- If you have set Icon as your box graphic then, choose the desired icon for the element.
- Icon Size- Set the size of that icon in pixels.
- Image- If you have set Image as your box graphic then upload the image from the Media Manager.
- Width- Set the width of the image with respect to the box.
- Title- Add the box title here.
- Description Text- Add a description on the box.
- Content Horizontal Alignment- Set the content’s alignment with respect to the complete box whether left, right or center.
- Content Vertical Alignment- Set the content’s vertical alignment with respect to the complete box whether top, middle or bottom.
Next we have the Front Box Icon, Title & Description Styling tab that has the given options:
- Icon Color Options- If you have set the box graphic as icon then, set the icon’s color & background color.
- Icon Padding- Adjust the icon space with respect to its background.
- Rotate Icon- You can even set the icon to a particular angle.
- Icon Border Styling Options- Add border to the icons & style it according to the options given.
- Title Styling Options- Style the title by adding color & typography forms.
- Description Styling Options- Style the description by adding color & typography forms.
After the font box’s content styling we also have Front Box Styling options that are:
- Front Box Padding- Set the front box’s inner padding with respect to different screen sizes.
- Background- Choose the front box’s background from either color, image or a gradient. If nothing then keep it None!
- Box Border Styling Options- Style the front box’s border by adding color & settings its width and radius.
- Box Shadow- You can even set the front box shadow here.
Since its a flip box, you also need to enter the back box details under Back Box tab:
- Box Graphic- Choose the graphic to displayed on the back of the flip box.
- Icon- If you have set Icon as your box graphic then, choose the desired icon for the element.
- Icon Size- Set the size of that icon in pixels.
- Image- If you have set Image as your box graphic then upload the image from the Media Manager.
- Width- Set the width of the image with respect to the box.
- Title- Add the box title here.
- Description Text- Add a description on the box.
- Content Horizontal Alignment- Set the content’s alignment with respect to the complete box whether left, right or center.
- Content Vertical Alignment- Set the content’s vertical alignment with respect to the complete box whether top, middle or bottom.
- Button text- Enter the text on the button.
- Link- Add link on the button and choose to show it on a new window & add a nofollow tag.
Style the back box’s content under Back box Icon, Title & Description Styling tab that has the given options:
- Icon Color Options- If you have set the box graphic as icon then, set the icon’s color & background color.
- Icon Padding- Adjust the icon space with respect to its background.
- Rotate Icon- You can even set the icon to a particular angle.
- Icon Border Styling Options- Add border to the icons & style it according to the options given.
- Title Styling Options- Style the title by adding color & typography forms.
- Description Styling Options- Style the description by adding color & typography forms.
After the back box’s content styling also set the box style under Back Box Styling options that are:
- Back Box Padding- Set the back box inner padding with respect to different screen sizes.
- Background- Choose the back box’s background from either color, image or a gradient. If nothing then keep it None!
- Box Border Styling Options- Style the back box’s border by adding color & settings its width and radius.
- Button Spacing- Adjust the spacing between the button & the description.
Since we have a button on the back box, its styling has now been differentiated under the Button Options tab, that has the following options:
- Button Type- Select the button’s type Primary, Secondary or Link type.
- Button Size- Choose the size of the button small, medium or large.
- Button Alignment- Set its alignment left, right, center or block.
- Button Animation- You can even set the button’s animation from the different types available.
- Button Icon Styling Options- You can also set an icon along with the button and style it as per the options available.
- Button Color Options- Set the active & hover button colors.
- Button Typography- Style the button’s text typography to different fonts & font sizes via typography field.
- Button Border Styling options- Style the button’s border from its type to width to radius.
- Box Shadow- You can even set the back box shadow here.
Manage the overall setting of the flip box element under Settings tab that has these options:
- Height- Set the height of the complete box.
- Animation- Choose the animation you want to add to the element, is it Push, Slide, Zoom or Flip.
- Flip Direction- If you choose Flip, Push or Slide as your animation then set its direction left, right, up or down.
