{"id":32,"date":"2021-01-10T18:51:38","date_gmt":"2021-01-10T18:51:38","guid":{"rendered":"https:\/\/oxilabdemos.com\/flipbox\/docs\/using-flip-box\/add-customize-the-flip-box\/"},"modified":"2021-01-30T20:40:19","modified_gmt":"2021-01-30T20:40:19","slug":"add-customize-the-flip-box","status":"publish","type":"docs","link":"https:\/\/oxilabdemos.com\/flipbox\/docs\/using-flip-box\/add-customize-the-flip-box\/","title":{"rendered":"Add & Customize the Flip Box"},"content":{"rendered":"

 <\/p>\n

After confirming the layout, you can start customizing your Flip Box images. Add your own content and the image and customize it in your own way. Also, you can keep the design as it is. It’s up to you!<\/strong><\/em><\/p>\n

\n

 <\/p>\n

Here in this tutorial, you’re going to learn how to edit a pre-built layout and customize it in your own way. So let’s get started:<\/p>\n

 <\/p>\n

 <\/p>\n

Add New Flip Boxes<\/h2>\n
\n

To add a new flip box image item, click on the Add New Flip Boxes (+) <\/span><\/strong>b<\/span>utton. After clicking that button, you\u2019ll find a Hover Modification Form to upload the flip image and add info.<\/p>\n

Add both front-end and backend image for the flip box effects.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

Here\u00a0 in the flip box form, you can add both of the front and backend flip images and their title, icon, info, button, and link<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

Edit\/Delete the Flip Image<\/h2>\n
\n

After selecting a layout and creating flip boxes, you can see the live preview at the bottom side of the editor page. When you hover over the image’s body, you’ll find the edit and the delete button. See the image below,<\/em><\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

By selecting the Edit<\/strong> icon, you’ll find the flip modification form. Here you can customize the flip box images. And by clicking the delete button, you can remove the unnecessary image.<\/p>\n

 <\/p>\n

 <\/p>\n

Flip box Rearrange<\/h2>\n
\n

Made a mistake ordering the images? No worries! We have the lightest drag & drop rearrange tool. Just click on the button, and reorder your images manually as you wish.<\/em><\/p>\n

\"\"<\/a><\/p>\n

<\/h2>\n

General Settings<\/h2>\n
\n

After adding and customizing the responsive tab items successfully, you can customize the styles more precisely as we’ve added a maximum customization panel for you. At the first of this panel, you can find the “General Settings” section along with 2 sub-sections. Now, let’s see how to edit this section:<\/em><\/p>\n

 <\/p>\n

General Settings:<\/strong> First sub-section is the General Settings section. Here you can set some basic components for the tabs. Here below, these are shortly explained:<\/p>\n

\"\"<\/a><\/p>\n