Add Flipbox in your Gutenberg Block
1. How to add Flipbox Block #
To add the “Flipbox Block” click on the Gutenberg Editor block inserter plus icon(+) and then find Flipbox Box from the search option. Just click on the Block and it will be activated.
After selecting the block you need to fill up your desired text and configure the style.
2. General Settings #
The general settings tab has a layout preset, an icon/ image, a title, a description, and a button settings option. These panel settings are as bellows
- Presets: Select from a pre-defined preset which style you like.
- Settings: Set Flip direction, Transaction, Max width and height, media to content spacing.
- Front Side Settings: Set front side media, icon size, title, content and alignment.
- Back Side Settings: Set front side media, icon size, title, content and alignment.
3. Styles Settings #
From the Styles settings tab, you can set all possible styles like typography, color, margin, background and other style settings.
Flipbox Front Side Style
- Front Side Style: Set item padding, title color, title margin, description color and description margin.
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set default border or hover border with different border styles also can set border-radius.
- Shadow: You can set box shadow for normal and hover style.
Flipbox Back Side Style
- Back Side Style: Set item padding, title color, title margin, description color and description margin.
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set default border or hover border with different border styles also can set border-radius.
- Shadow: You can set box shadow for normal and hover style.
Media Style Settings #
Both Front and Back Side media settings are same
- Front Side Media Style: Set Icon color, Background color, Mergin, Padding and Border.
- Typography: Set font family, font size, font weight and line height.
4. Advanced Settings #
From the advanced settings tab, you can control the wrapper style.
- Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set default border or hover border with different border styles also can set border-radius.
- Shadow: You can set box shadow for normal and hover style.
5. Final Outcome #
Following these basic steps and more customizing, you can style your Flipbox block and your want and get your outcome.
