Flipbox

Flipbox is a creative UI widget which flips itself to display content of the other side.

Using flipbox makes content look more dynamic and creative in terms of UX too. We have provided two different options, Individual for single flipbox and carousal for sequence of them. Individual allows you to add different behaviour 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.

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 widgets panel.

After placing the widget 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

Style

Select your preferred layout for flipbox here. We provide two different styles, a simple and a modern one.

Author

Text space to add author name of the original quote to display out.

Content

Kind of main course, A text area to add the quote text.

Alignment

Align quote content text in left, centre, right or justified manner from here.

2. Style

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

View The Style Tab Article

Content

Typography

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

Text Color

A color picker to assign suitable color to the text.

Author Color

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

Color (Style-2)

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

Padding

Put-in some inner space to an element.

Margin

Put-in some outer space to an element.

Background

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.

Box Shadow

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

3. Advanced

Advanced Tab Options are common across all the widgets. 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?