How to use Flipbox block by Zoloblocks

This documentation provides comprehensive insights into the Flipbox Block developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Flipbox block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Flipbox block.
3. After on the right side, Click on the Block. Then the Flipbox block details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences. Filpbox has two parts Front and Back.

General Section

Go to Basic > General

Front Section

This section provides control to set the position on the front side,

1. Show Icon: Enable the switcher to show the Icon.
2. Show Title: Enable this switcher to show the Title.
3. Show Description: Enable the switcher to show the description.

Back Section

4. Show Icon: Enable this switcher will allow you to show the Icon.
5. Show. Title: Enable the switcher to show the title.
6. Show Description: Enable this to show the description.
7. Show Button: Enable this to show the Button.
8. Show Button Icon: Enable this to show the Icon of the Button.

Flipbox Content

Go to Basic > Flipbox Content

Front Section

This section provides control to change the layout of the front side of the flip box content,

1. Selected Side > Front
2. Icon Type > Icon
3. Select Icon: Select the icon from the icon library.
4. Title: Set the title for the content.
5. Description: Set the description for the content.

Back Section

6. Selected Side > Back
7. Icon Type > Icon
8. Selected Icon: Select the icon from the icon library.
9. Title: Set the title for the backside.

10. Description: Set the description for the back content.
11. Button Text: Set the text for the button.
12. URL: Set the URL for the button.
13. Selected Icon: Set the icon for the button.
    

General Settings Section

Go to Basic > General Settings

This section provides control to set the flip box,

1. Flip Effect: Select any effect you like to show on the flip box (e.g. Left, Slide, Push, Zoom, etc.)
2. Easing Type: Select the easing type (e.g. Ease out, Ease-in-out, Linear, Custom).
3. Duration ( ms ): Set the animation duration for the flip box.
4. Trigger Type: Set the Trigger type for flipping ( Click. Hover ).

Items Section

Go to Style > Items

This section provides control to customize the items of the flip box, The changes will appear front and back sides.

1. Height: Set the height of the flip box.
2. Padding: Set padding for the flip box.
3. Border Radius: Set the border-radius.

Front Side

4. Selected Side: Select the side Front to customize the of the flip.
5. Border: Set the border.
6. Alignment: Set align of the content ( Left, Center, Right).
7. Vertical Alignment: Set the align the content in vertically ( Flex Start, Center, Flex End, Space Between ).
8. Background: Set the background on the front side of the flip.

Back Side

4. Selected Side: Select the Backside to customize the back side of the flip.

9. Border: Set the border.
10. Alignment: Set align of the content ( Left, Center, Right).
11. Vertical Alignment: Set align the content vertically ( Flex Start, Center, Flex End, Space Between ).
12. Background: Set the background on the back side of the flip.

Icon/Image Section

Go to Style > Icon/Image

Front Side

This section provides controls for the icon/image section,

1. Selected Side: Select the size for the Icon.
2. Size: Set the size for the Icon.
3. Border: Set the border for the icon.
4. Border Radius: Set the radius for the border.

5. Padding: Set padding for the icon.
6. Color: Set the color for the icon.
7. Background: Set the background for the color.

Back Side

1. Selected Side: Select the Backside for the Icon.

8. Size: Set the size for the back icon.
9. Border: Set the border of the icon.
10. Border Radius: Set the radius for the border.

11. Padding: Set the padding for the back Icon.
12. Color: Set the color for the icon.
13. Background: Set the background for the icon.

Title Section

Go to Style > Title

Front Side

This section provides control for the Title,

1. Selected Side: Select the front side for the Title.
2. Typography: Set typography for the Title.
3. Color: Set the color for the title.
4. Margin: Set margin for the Title.

Back Side

5. Typography: Set typography for the Title.
6. Color: Set color for the title.
7. Margin: Set margin for it.

Description Section

Go to Style > Description

Front Side

1. Selected Side: Select the Front side for customizing the description.
2. Typography: Set the typography for the description.
3. Color: Set color for it.

Back Side

1. Selected Side: Select the Backside for customizing the description.

4. Typography: Set the typography for the description.
5. Color: Set color for it.

Button Section

Go to Style > Button

Back Side

1. Selected Side: Select the back side for the button.
2. Typography: Set the typography for the button.
3. Color: Set color for it.

4. Hover Color: Set the hover color for the Button Typography.

5. Border: Set the border for the button.
6. Border Radius: Set the border radius for the button.
7. Padding: Set the padding for the button.

Normal State for Button

8. Background: Set the background for the button, It works in a normal state.

Hover State for Button

9. Background: Set the background for the button, The changes appear on mouse hover.

Extra Tab Controls

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial for more info. Check the Demo Page.

Thanks for being with us!