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

Export Page Content

[vc_row full_width="stretch_row_content" margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1578144985459{margin-bottom: 0px !important;background-color: #ecebe9 !important;}"][vc_column][TS-VCSC-Spacer height="20"][vc_column_text]
<h1 style="text-align: center;">CONTENT FLIP BOX</h1>
<h3 style="text-align: center;">SHOW A CONTENT BOX WITH TWO SIDES</h3>
[/vc_column_text][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row][vc_column width="1/2"][TS-VCSC-Spacer height="40"][vc_column_text]
<h2>Content Flip Box Features</h2>
[/vc_column_text][TS-VCSC-Spacer height="20"][TS_VCSC_Fancy_List list_type="image" marker_image="https://www.composium.krautcoding.com/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_arrow_blue.png"]
<ul>
 	<li>Select from two different effects (simple or cube)</li>
 	<li>Select from different animation (transition) speed (simple effect)</li>
 	<li>Use font icon or image icon for front panel</li>
 	<li>Add link button to back panel</li>
 	<li>Trigger transition either by hover or click event</li>
 	<li>Use Google font for contents</li>
 	<li>Customize font and background colors</li>
 	<li>Apply custom borders to front and back panel</li>
 	<li>Add viewport animation to element</li>
</ul>
[/TS_VCSC_Fancy_List][TS-VCSC-Spacer height="20"][TS_VCSC_Content_Export toggle_switch="true" toggle_background="#24dace" clipboard="true"][TS-VCSC-Spacer height="40"][/vc_column][vc_column width="1/2"][TS-VCSC-Spacer height="40"][vc_single_image image="22463" img_size="large" alignment="center" css_animation="fadeInRight"][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row full_width="stretch_row_content" margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1578145011628{margin-bottom: 0px !important;background-color: #ecebe9 !important;}"][vc_column][TS-VCSC-Spacer height="20"][vc_column_text]
<h1 style="text-align: center;">SIMPLE LAYOUT</h1>
<h3 style="text-align: center;">SHOW A CONTENT BOX WITH TWO SIDES</h3>
[/vc_column_text][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row margin_top="0" padding_left="40" padding_right="40" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1479676083984{margin-bottom: 0px !important;}"][vc_column][TS-VCSC-Spacer height="40"][vc_text_separator title="Horizontal Flip"][vc_row_inner][vc_column_inner width="1/3"][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"][/vc_column_inner][vc_column_inner width="1/3"][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"][/vc_column_inner][vc_column_inner width="1/3"][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"][/vc_column_inner][/vc_row_inner][TS-VCSC-Spacer height="40"][vc_text_separator title="Vertical Flip"][vc_row_inner][vc_column_inner width="1/3"][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"][/vc_column_inner][vc_column_inner width="1/3"][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"][/vc_column_inner][vc_column_inner width="1/3"][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"][/vc_column_inner][/vc_row_inner][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row full_width="stretch_row_content" margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1578145024083{margin-bottom: 0px !important;background-color: #ecebe9 !important;}"][vc_column][TS-VCSC-Spacer height="20"][vc_column_text]
<h1 style="text-align: center;">CUBE LAYOUT</h1>
<h3 style="text-align: center;">SHOW A CONTENT BOX WITH TWO SIDES</h3>
[/vc_column_text][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row margin_top="0" padding_left="40" padding_right="40" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1479676083984{margin-bottom: 0px !important;}"][vc_column][TS-VCSC-Spacer height="40"][vc_text_separator title="Right Flip"][vc_row_inner][vc_column_inner width="1/3"][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"][/vc_column_inner][vc_column_inner width="1/3"][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"][/vc_column_inner][vc_column_inner width="1/3"][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"][/vc_column_inner][/vc_row_inner][TS-VCSC-Spacer height="40"][vc_text_separator title="Upwards Flip"][vc_row_inner][vc_column_inner width="1/3"][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"][/vc_column_inner][vc_column_inner width="1/3"][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"][/vc_column_inner][vc_column_inner width="1/3"][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"][/vc_column_inner][/vc_row_inner][TS-VCSC-Spacer height="40"][/vc_column][/vc_row]

Copy

SIMPLE LAYOUT

SHOW A CONTENT BOX WITH TWO SIDES

Horizontal Flip

This is the back message.