Flip Box
Perfect for highlighting your content and attract customers’ attention with animated blocks that flips over on mouse hover.
How Flip Box Works
Flip Box of Magezon Page Builder is an animated box that flips over on mouse hover. On the front size, it acts as an info box, but when you hover the mouse over, it will flip with animated effects and show a call to action.
Flip Box element gives you full control over the look and behavior of a flip box. You can add separate title, description as well as customize background, border and colors for each side of the flip box. Fully control flip effect, flip duration and flip direction. Insert icons from Awesome 5 and Open Iconic libraries with custom colors and spin option. Add a call-to-action button on the backside and customize it with link, style, size, border and color.
Fully Responsive
No matter which device you're using, your Magento 2 site still looks perfect.
No Coding Skills
Create stunning page layouts in minutes with no coding skills required.
Perfect For Everyone
Magento 2 Page Builder allows you to create stunning page layouts in minutes with no coding skills required.
50+ Amazing Elements
Magezon Page Builder comes with 50+ elements to help you build any layout you can imagine.
Build Something Beautiful
Fine tune each element the way you want with various customization options.
Color Control
Flip Box element gives you freedom to customize colors for icon, icon circle, text, background and border.
Color Your Flip Box
Color your flip box the way you want.
Color Your Flip Box
Take control over colors of icon, icon circle, text, background and border.
Color Your Flip Box
Color your flip box the way you want.
Color Your Flip Box
Take control over colors of icon, icon circle, text, background and border.
Color Your Flip Box
Color your flip box the way you want.
Color Your Flip Box
Take control over colors of icon, icon circle, text, background and border.
Background Options
Besides choosing colors for background, you can add image background for your flip boxes. Separate background can be set for each side to make a complete distinction.
Background Images
Set image background for each side.
Reverse Background Images
Set image background for each side.
Background Images
Set image background for each side.
Reverse Background Images
Set image background for each side.
Flip Effects
Choose from either Classic style or 3D style for flip animation effects.
Classic Flip Effect
Choose classic effect for the flip box.
Classic Flip Backside
This is the backside of the flip box with classic flip effect.
3D Flip Effect
Choose 3D flip effect to make the box more outstanding.
3D Flip Backside
This is the backside of the flip box with 3D flip effect.
Direction Control
The flip boxes can be set to flip up, down, left or right based on your requirements and design.
Up
Box Flips Up
Up
Box Flips Up
Down
Box Flips Down
Down
Box Flips Down
Left
Box Flips Left
Left
Box Flips Left
Right
Box Flips Right
Right
Box Flips Right
Duration Control
It all depends on you to make your flip boxes flip slowly or fast by controlling the duration.
Less Duration
Duration Set to 0.4
A Quicker Flip Effect
This is a faster flip effect duration.
More Duration
Duration Set to 2.0
A Slower Flip Effect
This is a slower flip effect duration.
2 Icon Libraries
With Awesome 5 and Open Iconic icon libraries, you’ll have more choices of icon to add to the flip boxes. Customize icons with options such as icon color, icon spin option, icon circle, circle color, circle border color and thickness and circle background color.
Control Your Icons
Choose icons from Awesome 5 and Open Iconic libraries.
Control Your Icons
Customize icon and icon circle with multiple options.
Control Your Icons
Choose icons from Awesome 5 and Open Iconic libraries.
Control Your Icons
Customize icon and icon circle with multiple options.
Control Your Icons
Choose icons from Awesome 5 and Open Iconic libraries.
Control Your Icons
Customize icon and icon circle with multiple options.
Control Your Icons
Choose icons from Awesome 5 and Open Iconic libraries.
Control Your Icons
Customize icon and icon circle with multiple options.
Border Control
Fully control the border of each flip box with border color, width and radius.
Control Your Borders
Customize border color, width and radius.
Control Your Borders
Customize border color, width and radius.
Control Your Borders
Customize border color, width and radius.
Control Your Borders
Customize border color, width and radius.
Control Your Borders
Customize border color, width and radius.
Control Your Borders
Customize border color, width and radius.
Button Control
Flip Box element allows adding a button to the backside of a flipbox. The button has fully customizable options including: text, link, style, size, border (width, style and radius), colors and colors on hover for text, background and border. Also, you can keep button default width or set it to fill full width of the flip box.
Easily Customize Buttons
Easy to customize buttons with multiple options: button text, link, style, size, border, background and color.
Easily Customize Buttons
Easy to customize buttons with multiple options: button text, link, style, size, border, background and color.
Easily Customize Buttons
Easy to customize buttons with multiple options: button text, link, style, size, border, background and color.
Easily Customize Buttons
Easy to customize buttons with multiple options: button text, link, style, size, border, background and color.