Flip Box

Flip box is a box that flips over when you hover on it. This makes the section look more dynamic and fascinating to visitors. You can customize the look and behavior of every flip box differently in the same section.

To use this element, follow these steps.

• Select Add New Element from column
• An elements list modal will open
• From there select Flip Box element

Here you’ll find three tabs - General, Styles, & Advanced.These tabs will help you to modify the element in your own way. You can add images, edit settings, apply animations etc. The details are given below.

General

The general tab holds the basic settings of flip box element. You can do the following changes here:

• Title- Write the heading text in this field. This heading will represent the whole content in one sentence giving the visitor the idea of the whole content.
• Content- You need to insert the displaying text in this field. You can also modify them a little bit. You can style the text using bold, italic format, yellow highlighter and many other things like using tables, text alignment, use order list etc.
• HTML tag- html tags are the size of heading font set according to the html code. There are 6 tags set for title size. H1-H6 is the ideal size set for heading size. H1 represents the highest size and as the number increases, the font size decreases.
• Enable Content Image - Enabling content image will allow you to insert image in the content field. You can set image both in front and back of the flipbox.
• Enable Background - Enabling this field will allow you to set a background both in front and back side of the flipbox. You can a solid color, gradient effect or images.
• Enable Button - You can insert button in the back of the flip box slide. This option is open in the purpose in case anyone feel the need to use a button. You can modify the button in your own way sing color, image, gradient effect, hover effect etc.
• Enable Height - You can set the height of the flip box using this field. You can set the height in pixe, em, rem and vh..
• Width - You can set the width of the image using the scroll bar provided in this field. You can set in pixel.
• Border Type- There is a border option for image. You can set borders for images as there are 4 types available - solid, double, dotted, and dashed.
• Border Color- Set the color of the border matching with the image.
• Border Radius- Border radius gives the corners of a border a round shape. If you want you can make the sharp corners a smooth round shape.
• Flip Box Effect - For flippling, there are 6 effects available - Flip, slide, push, zoom in, zoom out and fade. Select any of these design will make your slides act like it.
• Flip Box Direction - You can decide the flipping effect direction too. There are four option provided - left, right, up, and down.
• 3D Depth - With 3D depth, you can give your flip box a 3D effect. This will make the box look popping up from flat surface and floating in thin air.

Styles Tab

Styles tab will help you to style up the flip box element. Here you’ll find two editing fields - Front and Back. The editing options are described in details below.

• Image Width - You can set the width of the image using the scroll bar provided in this field. You can set in pixel or percentage.
• Padding- Padding allows you set space between the contents inside the column. If you find it necessary, you can use it.
• Position- With the help of position field, you can set the position of image, icon, and content. For image or icon there are three positions available- left, top, right. For content, there are also three positions available- top, center and bottom.
• Color - A few color picker is provided for different operations. You’ll find color setting options for title, body text, and background.
• Spacing- This scroll bar will help you to set the space between contents and images. And it is available both in pixel and percentage.
• Font - Font option will help you to change the font of text. There are thousands of google font provided in a dropdown option. You can go for any of them.
• Weight- You can select the weight of specific fonts from the provided field. The higher the number of font weight you set, the bold your text will look.
• Size - You can control the size of both text and shape. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
• Transform- This field will help you to change the capitalize of the text. All you need to do is to select from the dropdown option.
• Style- This field will allow you to set the font style. You can set normal, italic or oblique.
• Decoration- You can decorate the text by selecting overline, underline or strikethrough.
• Line Height - Line height option will help you to set the height of each and every line. This will insert space between the lines.
• Letter Spacing -Letter spacing option will help you to set space between each and every letter. This will help you to avoid the collision between the letters.
• Text Shadow - Text shadow effect will help you to add a shadow under the digit or text to give a 3D look. You can even blur the effect to show your text clearly.

In the back side of the flip box, button option is available. To edit and decorate a button, you’ll find the following settings.

• Color - A few color picker is provided for different operations. You’ll find color setting options for text, name, designation and background.
• Padding- Padding allows you set space between the contents inside the column. If you find it necessary, you can use it.
• Font - Font option will help you to change the font of text. There are thousands of google font provided in a dropdown option. You can go for any of them.
• Weight- You can select the weight of specific fonts from the provided field. The higher the number of font weight you set, the bold your text will look.
• Size - You can control the size of both text and shape. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
• Transform- This field will help you to change the capitalize of the text. All you need to do is to select from the dropdown option.
• Style- This field will allow you to set the font style. You can set normal, italic or oblique.
• Decoration- You can decorate the text by selecting overline, underline or strikethrough.
• Line Height - Line height option will help you to set the height of each and every line. This will insert space between the lines.
• Letter Spacing -Letter spacing option will help you to set space between each and every letter. This will help you to avoid the collision between the letters.
• Text Shadow - Text shadow effect will help you to add a shadow under the digit or text to give a 3D look. You can even blur the effect to show your text clearly.
• Image - To insert an image select the image from media manager. You can upload, an image and use it too. Moreover, you can use icons too from media manager. And if you want to use images from Google, just use the unsplash tab from media manager.
• Border Type- There is a border option for image. You can set borders for images as there are 4 types available - solid, double, dotted, and dashed.
• Border Radius- Border radius gives the corners of a border a round shape. If you want you can make the sharp corners a smooth
• Box Shadow - A box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.

Advanced Tab

The advanced tab has the advanced level of settings. You can edit them if you find it necessary or just leave it just the way it is. Here you’ll find six fields : Element styles, Background, Border & Box Shadow, Animation, Custom CSS, and Identifier. These fields are described below in details.

• Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
• Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
• Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
• Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
• Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
• Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.