Animation & Feature Elements

[title type=”special-h4″]Centered Icon Box + Flip X Animation[/title]

[spacer]

[row margin_top=”0px” margin_bottom=”0px”]

[column size=”col-4″]

[icon_box icon=”hb-moon-bubble-dots-3″ icon_position=”top” title=”Live Support” align=”center” animation=”flip-x” animation_delay=”0″ icon_color=”#c0392b”]

Curabitur luctus lacus et lectus dictum ornare. Interdum est. Nulla massa id ad. Nullam quis euismod lorem lectus dictum.

[button title=”Let’s chat” link=”#” new_tab=”no” color=”third-dark”]
[/icon_box]

[/column]

[column size=”col-4″]

[icon_box icon=”hb-moon-users-2″ icon_position=”top” title=”Professional Support” align=”center” animation=”flip-x” animation_delay=”300″ icon_color=”#2980b9″]

Curabitur luctus lacus et lectus dictum ornare. Interdum est. Nulla massa id ad. Nullam quis euismod lorem lectus dictum.

[button title=”Find out more” link=”#” new_tab=”no” color=”third-dark”]
[/icon_box]

[/column]
[column size=”col-4″]

[icon_box icon=”hb-moon-phone-6″ icon_position=”top” title=”Call Us” align=”center” animation=”flip-x” animation_delay=”600″ icon_color=”#2c3e50″]

Curabitur luctus lacus et lectus dictum ornare. Interdum est. Nulla massa id ad. Nullam quis euismod lorem lectus dictum.

[button title=”Give us a call” link=”#” new_tab=”no” color=”third-dark”]
[/icon_box]

[/column]
[/row]

[title type=”special-h4″]Left Icon Box + Flip Y Animation[/title]

[spacer height=”20px”]

[row margin_top=”0px” margin_bottom=”0px”]

[column size=”col-4″]

[icon_box icon=”hb-moon-bubble-dots-3″ icon_position=”left” title=”Live Support” align=”left” animation=”flip-y” animation_delay=”0″ icon_color=”#c0392b”]

Curabitur luctus lacus et lectus dictum ornare. Interdum est. Nulla massa id ad. Nullam quis euismod lorem lectus dictum.

[button title=”Let’s chat” link=”#” new_tab=”no” color=”third-dark”]
[/icon_box]

[/column]

[column size=”col-4″]

[icon_box icon=”hb-moon-users-2″ icon_position=”left” title=”Professional Support” align=”left” animation=”flip-y” animation_delay=”300″ icon_color=”#2980b9″]

Curabitur luctus lacus et lectus dictum ornare. Interdum est. Nulla massa id ad. Nullam quis euismod lorem lectus dictum.

[button title=”Find out more” link=”#” new_tab=”no” color=”third-dark”]
[/icon_box]

[/column]
[column size=”col-4″]

[icon_box icon=”hb-moon-phone-6″ icon_position=”left” title=”Call Us” align=”left” animation=”flip-y” animation_delay=”600″ icon_color=”#2c3e50″]

Curabitur luctus lacus et lectus dictum ornare. Interdum est. Nulla massa id ad. Nullam quis euismod lorem lectus dictum.

[button title=”Give us a call” link=”#” new_tab=”no” color=”third-dark”]
[/icon_box]

[/column]
[/row]

[title type=”special-h4″]Icon Feature + Bottom To Top Animation[/title]
[spacer height=”20px”]

[row]

[column size=”col-3″]
[icon_feature icon=”hb-moon-eye-2″ icon_position=”center” border=”yes” title=”Retina Ready” animation=”bottom-to-top”]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[column size=”col-3″]
[icon_feature icon=”hb-moon-brain” icon_position=”center” border=”yes” title=”Smart Framework” animation=”bottom-to-top” animation_delay=”300″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[column size=”col-3″]
[icon_feature icon=”hb-moon-palette” icon_position=”center” border=”yes” title=”Completely Customizable” animation=”bottom-to-top” animation_delay=”600″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[column size=”col-3″]
[icon_feature icon=”hb-moon-gift” icon_position=”center” border=”yes” title=”Packed With Features” animation=”bottom-to-top” animation_delay=”900″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[/row]

[spacer]

[title type=”special-h4″]Alternative Icon Feature + Top To Bottom Animation[/title]
[spacer height=”20px”]

[row]

[column size=”col-3″]
[icon_feature icon=”hb-moon-eye-2″ border=”no” icon_position=”center” title=”Retina Ready” animation=”top-to-bottom”]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[column size=”col-3″]
[icon_feature icon=”hb-moon-brain” border=”no” icon_position=”center” title=”Smart Framework” animation=”top-to-bottom” animation_delay=”300″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[column size=”col-3″]
[icon_feature icon=”hb-moon-palette” border=”no” icon_position=”center” title=”Completely Customizable” animation=”top-to-bottom” animation_delay=”600″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[column size=”col-3″]
[icon_feature icon=”hb-moon-gift” border=”no” icon_position=”center” title=”Packed With Features” animation=”top-to-bottom” animation_delay=”900″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[/row]

[spacer]

[title type=”special-h4″]Left Icon Feature + Left To Right Animation[/title]
[spacer height=”20px”]

[row]

[column size=”col-3″]
[icon_feature icon=”hb-moon-eye-2″ border=”no” icon_position=”left” title=”Retina Ready” animation=”left-to-right”]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[column size=”col-3″]
[icon_feature icon=”hb-moon-brain” border=”no” icon_position=”left” title=”Smart Framework” animation=”left-to-right” animation_delay=”300″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[column size=”col-3″]
[icon_feature icon=”hb-moon-palette” border=”no” icon_position=”left” title=”Fully Customizable” animation=”left-to-right” animation_delay=”600″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[column size=”col-3″]
[icon_feature icon=”hb-moon-gift” border=”no” icon_position=”left” title=”Packed With Features” animation=”left-to-right” animation_delay=”900″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[/row]

[spacer]

[title type=”special-h4″]Alternative Right Icon Feature + Right To Left Animation[/title]
[spacer height=”20px”]

[row]

[column size=”col-4″]
[icon_feature icon=”hb-moon-brain” border=”yes” icon_position=”right” title=”Smart Framework” animation=”right-to-left” animation_delay=”600″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[column size=”col-4″]
[icon_feature icon=”hb-moon-palette” border=”yes” icon_position=”right” title=”Fully Customizable” animation=”right-to-left” animation_delay=”300″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[column size=”col-4″]
[icon_feature icon=”hb-moon-gift” border=”yes” icon_position=”right” title=”Tons Of Features” animation=”right-to-left” animation_delay=”0″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]
[/column]

[/row]

[spacer]

[title type=”special-h4″]Left Custom Icon Feature + Scale Up Animation[/title]
[spacer height=”20px”]

[row][column size=”col-4″][icon_feature icon=”hb-moon-brain” icon_position=”left” border=”yes” title=”Incredibly Flexible” image=”1274″ animation=”scale-up” animation_delay=”0″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature][/column][column size=”col-4″][icon_feature icon_position=”left” border=”yes” title=”Ultra Responsive” image=”1275″ animation=”scale-up” icon=”hb-moon-brain” animation_delay=”200″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature][/column][column size=”col-4″][icon_feature icon_position=”left” border=”yes” title=”11 Predefined Skins” image=”1276″ animation=”scale-up” icon=”hb-moon-brain” animation_delay=”400″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature][/column][/row]

[spacer]

[title type=”special-h4″]Icon Column + Helix Animation[/title]
[spacer height=”20px”]

[row][column size=”col-3″][icon_column icon=”hb-moon-brain” align=”left” title=”Smart Framework” animation=”helix” animation_delay=”0″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.

Take the tour[/icon_column][/column][column size=”col-3″][icon_column icon=”hb-moon-shield” align=”left” title=”Secure Solution” animation=”helix” animation_delay=”200″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.

Take the tour[/icon_column][/column][column size=”col-3″][icon_column icon=”hb-moon-users-2″ align=”left” title=”Impress Customers” animation=”helix” animation_delay=”400″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.

Take the tour[/icon_column][/column][column size=”col-3″][icon_column icon=”hb-moon-chart” align=”left” title=”Improve Business” animation=”helix” animation_delay=”600″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.

Take the tour[/icon_column][/column][/row]

[title type=”special-h4-left”]Get the code[/title]
[title type=”subtitle-h6″]Paste in Text Editor[/title]
[content_box type=”without-header” color=”#FFFFFF” class=”pre-text”]

[icon_box icon=”hb-moon-bubble-dots-3″ icon_position=”top” title=”Live Support” align=”center” animation=”flip-x” animation_delay=”0″ icon_color=”#c0392b”]
Curabitur luctus lacus et lectus dictum ornare. Interdum est. Nulla massa id ad. Nullam quis euismod lorem lectus dictum.
[button title=”Let’s chat” link=”#” new_tab=”no” color=”third-dark”]
[/icon_box]

[icon_feature icon=”hb-moon-eye-2″ icon_position=”center” border=”yes” title=”Retina Ready” animation=”bottom-to-top”]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.[/icon_feature]

[icon_column icon=”hb-moon-brain” align=”left” title=”Smart Framework” animation=”helix” animation_delay=”0″]Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.

Take the tour[/icon_column]

[/content_box]
[info_message style=”info”]You can also use this shortcode via Visual Composer – Drag & Drop Page Builder.[/info_message]