Flipbox

Flipbox

Flipbox is a creative UI block that flips itself to display the content of the other side.

Using flipbox makes the content look more dynamic and creative in terms of UX too. We have provided two different options, Individual for single flipbox and carousal for a sequence of them. The individual allows you to add different behavior to each flipbox and carousal saves you from adding the same option for multiple boxes over and over again.

Pro tip
Use flipbox and make your self a digital business card right there.

How to use the Flipbox block of The Plus Addons For Gutenberg

The Flipbox block comes with multiple functions. Let’s understand how to use this block in the tutorial below.

Configuration for Flipbox

Flipbox has two sides to write content.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Flipbox into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Flipbox after “/” sign, eg.“/Flipbox”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content

Select Layout

Select your preferred layout for flipbox here. We provide two different layouts, you can select between Individual and Carousel.

Flip Type

Select your preferred flip type for flipbox here. We provide two different types, a Horizontal and a Vertical one.

Box Height

Specify the Box height here. Use the slider to set your height.

Front Side

Main Title

Set the Title Text for Front Side.

Icon Type

You can select Icon or Custom Icon Image using this option.

Back Side

Description

Set the Description Text for Back Side.

Button

Option to set extra button after description.

Style

Style list to give a button some looks.

Button Text

Text input for the button text.

Button Link

A target URL to send the user on button click.

2. Style

The Style tab is used for customizing the appearance of all the flipbox get components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Front Icon

Layout

A select box to choose the shape of an icon.

Icon Size

Set the size of the icon from here.

Icon Width

Set width of the icon from here.

Icon Color

A color picker to assign a suitable color to the icon.

Background

Apply a suitable background like color/ gradient to the icon.

Front Title

Typography

Assign a size, weight, spacing and much more to fonts.

Color

A color picker to assign a suitable color to the text.

Above Space

An input to set the spacing between box top and title.

Below Space

An input to set the spacing between box bottom and title.

Back Description

Typography

Assign a size, weight, spacing and much more to fonts.

Color

A color picker to assign a suitable color to the text.

Back Button

Typography

Assign a size, weight, spacing and much more to fonts.

Color

A color picker to assign a suitable color to the text.

Above Space

An input to set the spacing between box top and title.

Below Space

An input to set the spacing between box bottom and title.

Background Options

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Background

Apply suitable background like color/ gradient to an element.

Image Overlay Color

A color picker to assign a suitable color to the background image.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.