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]