CONTENT FLIP BOX

SHOW A CONTENT BOX WITH TWO SIDES

Content Flip Box Features

  • Select from two different effects (simple or cube)
  • Select from different animation (transition) speed (simple effect)
  • Use font icon or image icon for front panel
  • Add link button to back panel
  • Trigger transition either by hover or click event
  • Use Google font for contents
  • Customize font and background colors
  • Apply custom borders to front and back panel
  • Add viewport animation to element
[TS_VCSC_Content_Export toggle_switch=”true” toggle_background=”#24dace” clipboard=”true”]

SIMPLE LAYOUT

SHOW A CONTENT BOX WITH TWO SIDES

Horizontal Flip

[TS-VCSC-Content-Flip flip_effect_style1=”vertical” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21941″ flip_border_type=”solid” front_background=”#f4ebde” animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip flip_effect_style1=”vertical” flip_effect_speed=”veryslow” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21964″ flip_border_type=”solid” front_background=”#d5efc6″ animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip flip_effect_style1=”vertical” flip_effect_speed=”veryfast” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21958″ flip_border_type=”solid” front_background=”#f7f7f7″ animations=”true” animation_view=”appear”]

Vertical Flip

[TS-VCSC-Content-Flip flip_effect_speed=”veryslow” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21929″ flip_border_type=”solid” front_background=”#f4ebde” animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21882″ flip_border_type=”solid” front_background=”#d5efc6″ animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip flip_effect_speed=”veryfast” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21826″ flip_border_type=”solid” front_background=”#f7f7f7″ animations=”true” animation_view=”appear”]

CUBE LAYOUT

SHOW A CONTENT BOX WITH TWO SIDES

Right Flip

[TS-VCSC-Content-Flip flip_style=”style2″ front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21941″ flip_border_type=”solid” front_background=”#f4ebde” animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip flip_style=”style2″ front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21964″ flip_border_type=”solid” front_background=”#d5efc6″ animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip flip_style=”style2″ front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21958″ flip_border_type=”solid” front_background=”#f7f7f7″ animations=”true” animation_view=”appear”]

Upwards Flip

[TS-VCSC-Content-Flip flip_style=”style2″ flip_effect_style2=”ts-flip-up” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21929″ flip_border_type=”solid” front_background=”#f4ebde” animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip flip_style=”style2″ flip_effect_style2=”ts-flip-up” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21882″ flip_border_type=”solid” front_background=”#d5efc6″ animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip flip_style=”style2″ flip_effect_style2=”ts-flip-up” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21826″ flip_border_type=”solid” front_background=”#f7f7f7″ animations=”true” animation_view=”appear”]