Flip Box Shortcode

Ani­ma­ted flip boxes are sim­ply awe­so­me. We’ve never met anyo­ne who doesn’t love the­se bad boys. They are gre­at for grab­bing the users atten­ti­on and adding some inter­ac­tion with your con­tent. Avada’s flip boxes have ful­ly cus­to­miz­ab­le con­tent on the front and back side. They are ful­ly inte­gra­ted with the Font Awe­so­me icon set and icon opti­ons like spin, rota­te, flip. You can put a tit­le on the front and backside, add but­tons to your con­tent and the box height will extend based on the amount of con­tent you use. Cus­to­mi­ze the bor­der size, bor­der radi­us and have full con­trol over the front and backside colors. Oh yeah, and you can ani­ma­te them with CSS3 good­ness. The­se are an Ava­da favo­ri­te, and for good rea­son.

Fully Responsive

Avada’s respon­si­ve frame­work ensu­res your con­tent loo­ks gre­at on all screen sizes.

Perfect For All Sizes

No mat­ter the size of your screen or device, your site will look fan­tastic.
BUY AVADA NOW!

Premium Sliders

Ava­da inclu­des four pre­mi­um sli­ders that make your con­tent stand out!

Make Your Content Stand Out

Ava­da inclu­des the Lay­er Sli­der, Revo­lu­ti­on Sli­der, Fusi­on Sli­der and Elastic Sli­der.
BUY AVADA NOW!

Amazing Elements

Ava­da offers incredi­ble ele­ments that allow you to crea­te a beau­ti­ful site.

Build Something Beautiful

Dozens of well desi­gned short­codes loa­ded with opti­ons gives you per­fect free­dom.
BUY AVADA NOW!

Column Sizes

Flip boxes have their own column opti­on to set which allows the con­tent box to fill the column width from 1–6 colum­ns. They can also be used insi­de of our regu­lar column short­code to con­trol their pla­ce­ment on the page.

Column Sizes

Avada’s column opti­ons are inte­gra­ted into the flip boxes, making it easy to set 1–6 colum­ns. Con­tent boxes will always resi­ze accord­in­gly. It’s a beau­ti­ful thing.

Perfect For All Sizes

No mat­ter the size of your screen or device, your site will look fan­tastic.

Color Con­trol

Flip boxes allow you to con­trol the color of the back­grounds, tit­le text, body text, icons, icon cir­cles and bor­ders. Set colors indi­vi­du­al­ly in the short­code, or glo­bal­ly in our the­me opti­ons panel. Take con­trol of your colors with ease.

Control

Con­trol all the colors of each ele­ment you see.

Control Your Colors

From back­grounds to text colors to bor­ders. Take con­trol.

Your

Con­trol all the colors of each ele­ment you see.

Control Your Colors

From back­grounds to text colors to bor­ders. Take con­trol.

Colors

Con­trol all the colors of each ele­ment you see.

Control Your Colors

From back­grounds to text colors to bor­ders. Take con­trol.

Icon Haven

Font Awe­so­me Icons are tight­ly inte­gra­te into the flip boxes along with mul­ti­ple opti­ons; icon color, cir­cle color and bor­der, cir­cle show or hide, icon flip, rota­te, spin and ani­ma­te.

Awesome

Font Awe­so­me Icon inte­gra­ti­on is per­fect.

Control Your Icons

Chan­ge just about every aspect of the icon and cir­cle that con­tains it. Take Con­trol.

Icons

Font Awe­so­me Icon inte­gra­ti­on is per­fect.

Control Your Colors

Chan­ge just about every aspect of the icon and cir­cle that con­tains it. Take Con­trol.

Need Images? Check!

Ins­tead of using an icon, you can choo­se to use an image that will show up in the same area as the icon. The set­tings allow you to spe­ci­fy the exact image size so it dis­plays per­fect­ly in the box. Using an image ins­tead of an icon opens up a who­le new look for the flip boxes and gives addi­tio­nal crea­ti­ve uses.

Images Love Flip Boxes

Images can be used in place of icons.

A Whole New Look

Ins­tead of using icons, you can choo­se to use images. This opens up a who­le new look for the flip boxes and gives you more crea­ti­ve free­dom in crea­ting lay­outs.

Images Love Flip Boxes

Images can be used in place of icons.

A Whole New Look

Ins­tead of using icons, you can choo­se to use images. This opens up a who­le new look for the flip boxes and gives you more crea­ti­ve free­dom in crea­ting lay­outs.

Bor­der Con­trol

Flip boxes allow you to use bor­ders and set the bor­der width, color and radi­us. You can even set the bor­der pro­per­ties indi­vi­du­al­ly per box to make one box stand out from the others with fea­tured con­tent. Take con­trol of your bor­ders.

Control

Con­trol the bor­der size, color and radi­us.

Control Your Borders

From back­grounds to text colors to bor­ders. Take con­trol.

Your

Con­trol the bor­der size, color and radi­us.

Control Your Borders

From back­grounds to text colors to bor­ders. Take con­trol.

Borders

Con­trol the bor­der size, color and radi­us.

Control Your Borders

From back­grounds to text colors to bor­ders. Take con­trol.

Com­ple­te Set of Opti­ons

Every opti­on and descrip­ti­on inclu­ded with the alert short­code is lis­ted below.

  • colum­ns — Can be one of the­se values: 1, 2, 3, 4, 5, or 6. Sets the num­ber of colum­ns per row.
  • title_front ‑The cus­tom tit­le text for the front side of the flip box.
  • title_back — The cus­tom tit­le text for the back side of the flip box.
  • text_front — The cus­tom body text for the front side of the flip box.
  • border_color — Accepts a hex­code ( #000000 ). Sets the border’s color. Lea­ve blank for The­me Opti­on selec­tion.
  • border_radius — Accepts a pixel value that sets the border’s radi­us. For examp­le, 4px. Lea­ve blank for The­me Opti­on selec­tion.
  • border_size — Accepts a pixel value that sets the border’s size. For examp­le, 4px. Lea­ve blank for The­me Opti­on selec­tion.
  • background_color_front — Accepts a hex­code ( #000000 ). Sets the front side’s back­ground color. Lea­ve blank for The­me Opti­on selec­tion.
  • title_front_color — Accepts a hex­code ( #000000 ). Sets the front side’s tit­le color. Lea­ve blank for The­me Opti­on selec­tion.
  • text_front_color — Accepts a hex­code ( #000000 ). Sets the front side’s body text color. Lea­ve blank for The­me Opti­on selec­tion.
  • background_color_back — Accepts a hex­code ( #000000 ). Sets the back side’s back­ground color. Lea­ve blank for The­me Opti­on selec­tion.
  • title_back_color — Accepts a hex­code ( #000000 ). Sets the back side’s tit­le color. Lea­ve blank for The­me Opti­on selec­tion.
  • text_back_color — Accepts a hex­code ( #000000 ). Sets the back side’s body text color. Lea­ve blank for The­me Opti­on selec­tion.
  • icon — A font awe­so­me icon value. For examp­le, fa-glass.
  • icon_color — Accepts a hex­code ( #000000 ). Sets the icon’s color. Lea­ve blank for The­me Opti­on selec­tion.
  • cir­cle — Can be one of the­se values: yes, or no. Sets if the icon is cir­cu­lar or not.
  • circle_color — Accepts a hex­code ( #000000 ). Sets the icon’s back­ground color. Lea­ve blank for The­me Opti­on selec­tion.
  • circle_border_color — Accepts a hex­code ( #000000 ). Sets the icon’s bor­der color. Lea­ve blank for The­me Opti­on selec­tion.
  • icon_flip — Can be one of the­se values: none, hori­zon­tal, or ver­ti­cal. Sets the direc­tion whe­re the icon will flip.
  • icon_rotate — Can be one of the­se values: none, 90, 180, or 270. Sets the ang­le of the icon’s rota­ti­on.
  • icon_spin — Can be one of the­se values: yes, or no. This will enab­le or dis­able the icon’s spin­ning fea­ture.
  • image — The URL path of your cus­tom icon image, star­ting with http:// and usual­ly ending on .jpg, .png or .gif. Make sure the­re is no “icon=” value.
  • image_width — This para­me­ter is for cus­tom icon images. Accepts a nume­ri­cal value to set a cus­tom width in pixels. For examp­le, 35.
  • image_height — This para­me­ter is for cus­tom icon images. Accepts a nume­ri­cal value to set a cus­tom height in pixels. For examp­le, 35.
  • animation_type — Can be one of the­se values: none, boun­ce, fade, flash, shake, or sli­de. Sets the ani­ma­ti­on to use on the icon insi­de the box only.
  • animation_direction — Can be one of the­se values: down, right, left, or up. Sets the inco­m­ing direc­tion for the ani­ma­ti­on of the icon insi­de the box only.
  • animation_speed — Accepts a nume­ri­cal value from .1, which is the slo­west, to 1, which is the fas­test. This is only for the icon insi­de the box.
  • class — Add a cus­tom class to the wrap­ping HTML ele­ment for fur­ther css cus­to­miz­a­ti­on.
  • id — Add a cus­tom id to the wrap­ping HTML ele­ment for fur­ther css cus­to­miz­a­ti­on.

Join The 100,000+ Satisfied Avada Users!

BUY AVADA NOW!