Horizontal Steps

[TS-VCSC-Spacer height=”20″][TS_VCSC_Fancy_List list_type=”image” list_marker=”disc” list_order=”decimal” order_start1=”0″ order_start2=”1″ marker_image=”http://tekanewascripts.com/composium/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_arrow_blue.png” marker_icon=”ts-awesome-adjust” list_position=”outside” marker_position=”center” marker_margin=”0″ marker_color=”#000000″ marker_size=”12″ content_color=”#000000″ content_size=”14″ line_height=”18″ content_margin=”5″ content_intend=”0″ frame_position=”bottom” frame_thick=”1″ frame_color=”#cccccc” frame_padding=”5″ margin_top=”0″ margin_bottom=”0″]

  • Define maximum width for step items
  • Overall width of all steps defined by column width
  • Use font icon or icon image for each step
  • Add different CSS3 hover animation to icon for each step
  • Define default and hover color for icon and background for each step
  • Define title and text color for each step individually
  • Add link to another site with optional link button
  • Element fully responsive and will “break out” into additional lines/rows if necessary (based on column width and minimum step width)

[/TS_VCSC_Fancy_List]

[TS-VCSC-Spacer height=”20″][TS-VCSC-Divider divider_type=”ts-divider-lines” divider_border_type=”solid” divider_border_thick=”2″ divider_text_border=”#eeeeee” divider_image_border=”#eeeeee” divider_icon_border=”#eeeeee” divider_border_color=”#eeeeee” divider_top_border=”#eeeeee” divider_border_width=”100″ divider_text_position=”center” divider_text_content=”Horizontal Steps with Font Icons” divider_image_position=”center” divider_image_repeat=”1″ divider_icon_position=”center” divider_icon_content=”ts-awesome-glass” divider_icon_color=”#cccccc” divider_icon_repeat=”1″ divider_border_background=”#f2f2f2″ margin_top=”20″ margin_bottom=”20″][TS-VCSC-Spacer height=”20″][TS_VCSC_Horizontal_Steps_Container min_width=”200″ icon_size=”75″ icon_max=”100″ margin_top=”0″ margin_bottom=”0″][TS_VCSC_Horizontal_Steps_Item step_icon=”ts-awesome-lightbulb-o” icon_color_default=”#81d742″ icon_color_hover=”#1e73be” icon_back_default=”#ededed” icon_back_hover=”#d1d1d1″ step_title=”Getting the Green Light …” title_color=”#4e4e4d” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_align=”center” content_color=”#6c6c6c” button_show=”false” button_text=”Read More” button_style=”ts-dual-buttons-color-default” button_hover=”ts-dual-buttons-preview-default ts-dual-buttons-hover-default” step_animation=”ts-hover-css-shake” css3animations_name=”Shake”][TS_VCSC_Horizontal_Steps_Item step_icon=”ts-awesome-gears” icon_color_default=”#dd3333″ icon_color_hover=”#eeee22″ icon_back_default=”#eeee22″ icon_back_hover=”#dd3333″ step_title=”Starting the Setup …” title_color=”#4e4e4d” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_align=”center” content_color=”#6c6c6c” button_show=”false” button_text=”Read More” button_style=”ts-dual-buttons-color-default” button_hover=”ts-dual-buttons-preview-default ts-dual-buttons-hover-default” step_animation=”ts-hover-css-bounce” css3animations_name=”Bounce”][TS_VCSC_Horizontal_Steps_Item step_icon=”ts-awesome-plane” icon_color_default=”#1e73be” icon_color_hover=”#eeee22″ icon_back_default=”#81d742″ icon_back_hover=”#8224e3″ step_title=”Moving Forward …” title_color=”#4e4e4d” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_align=”center” content_color=”#6c6c6c” button_show=”false” button_text=”Read More” button_style=”ts-dual-buttons-color-default” button_hover=”ts-dual-buttons-preview-default ts-dual-buttons-hover-default” step_animation=”ts-hover-css-swing” css3animations_name=”Swing”][TS_VCSC_Horizontal_Steps_Item step_icon=”ts-awesome-question-circle” icon_color_default=”#8224e3″ icon_color_hover=”#dd3333″ icon_back_default=”#eaeaea” icon_back_hover=”#219680″ step_title=”Re-Evaluationg Goals …” title_color=”#4e4e4d” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_align=”center” content_color=”#6c6c6c” button_show=”false” button_text=”Read More” button_style=”ts-dual-buttons-color-default” button_hover=”ts-dual-buttons-preview-default ts-dual-buttons-hover-default” step_animation=”ts-hover-css-rotateFull” css3animations_name=”Rotate Full”][TS_VCSC_Horizontal_Steps_Item step_icon=”ts-awesome-flag” icon_color_default=”#dd9933″ icon_color_hover=”#dd3333″ icon_back_default=”#ffffff” icon_back_hover=”#ededed” step_title=”Crossing the Finish Line …” title_color=”#4e4e4d” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_align=”center” content_color=”#6c6c6c” button_show=”false” button_text=”Read More” button_style=”ts-dual-buttons-color-default” button_hover=”ts-dual-buttons-preview-default ts-dual-buttons-hover-default” step_animation=”ts-hover-css-flash” css3animations_name=”Flash”][/TS_VCSC_Horizontal_Steps_Container]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Divider divider_type=”ts-divider-lines” divider_border_type=”solid” divider_border_thick=”2″ divider_text_border=”#eeeeee” divider_image_border=”#eeeeee” divider_icon_border=”#eeeeee” divider_border_color=”#eeeeee” divider_top_border=”#eeeeee” divider_border_width=”100″ divider_text_position=”center” divider_text_content=”Horizontal Steps with Image Icons” divider_image_position=”center” divider_image_repeat=”1″ divider_icon_position=”center” divider_icon_content=”ts-awesome-glass” divider_icon_color=”#cccccc” divider_icon_repeat=”1″ divider_border_background=”#f2f2f2″ margin_top=”20″ margin_bottom=”20″][TS-VCSC-Spacer height=”20″][TS_VCSC_Horizontal_Steps_Container min_width=”200″ icon_size=”75″ icon_max=”100″ margin_top=”0″ margin_bottom=”0″][TS_VCSC_Horizontal_Steps_Item step_icon=”ts-awesome-lightbulb-o” icon_color_default=”#81d742″ icon_color_hover=”#1e73be” icon_back_default=”#ededed” icon_back_hover=”#d1d1d1″ step_title=”Getting the Green Light …” title_color=”#4e4e4d” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_align=”center” content_color=”#6c6c6c” button_show=”false” button_text=”Read More” button_style=”ts-dual-buttons-color-default” button_hover=”ts-dual-buttons-preview-default ts-dual-buttons-hover-default” step_animation=”ts-hover-css-shake” css3animations_name=”Shake” step_replace=”true” step_image=”16336″][TS_VCSC_Horizontal_Steps_Item step_icon=”ts-awesome-gears” icon_color_default=”#dd3333″ icon_color_hover=”#eeee22″ icon_back_default=”#eeee22″ icon_back_hover=”#dd3333″ step_title=”Starting the Setup …” title_color=”#4e4e4d” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_align=”center” content_color=”#6c6c6c” button_show=”false” button_text=”Read More” button_style=”ts-dual-buttons-color-default” button_hover=”ts-dual-buttons-preview-default ts-dual-buttons-hover-default” step_animation=”ts-hover-css-bounce” css3animations_name=”Bounce” step_replace=”true” step_image=”16334″][TS_VCSC_Horizontal_Steps_Item step_icon=”ts-awesome-plane” icon_color_default=”#1e73be” icon_color_hover=”#eeee22″ icon_back_default=”#81d742″ icon_back_hover=”#8224e3″ step_title=”Moving Forward …” title_color=”#4e4e4d” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_align=”center” content_color=”#6c6c6c” button_show=”false” button_text=”Read More” button_style=”ts-dual-buttons-color-default” button_hover=”ts-dual-buttons-preview-default ts-dual-buttons-hover-default” step_animation=”ts-hover-css-swing” css3animations_name=”Swing” step_replace=”true” step_image=”16301″][TS_VCSC_Horizontal_Steps_Item step_icon=”ts-awesome-question-circle” icon_color_default=”#8224e3″ icon_color_hover=”#dd3333″ icon_back_default=”#eaeaea” icon_back_hover=”#219680″ step_title=”Re-Evaluationg Goals …” title_color=”#4e4e4d” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_align=”center” content_color=”#6c6c6c” button_show=”false” button_text=”Read More” button_style=”ts-dual-buttons-color-default” button_hover=”ts-dual-buttons-preview-default ts-dual-buttons-hover-default” step_animation=”ts-hover-css-rotateFull” css3animations_name=”Rotate Full” step_replace=”true” step_image=”16255″][TS_VCSC_Horizontal_Steps_Item step_icon=”ts-awesome-flag” icon_color_default=”#dd9933″ icon_color_hover=”#dd3333″ icon_back_default=”#ffffff” icon_back_hover=”#ededed” step_title=”Crossing the Finish Line …” title_color=”#4e4e4d” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_align=”center” content_color=”#6c6c6c” button_show=”false” button_text=”Read More” button_style=”ts-dual-buttons-color-default” button_hover=”ts-dual-buttons-preview-default ts-dual-buttons-hover-default” step_animation=”ts-hover-css-flash” css3animations_name=”Flash” step_replace=”true” step_image=”16293″][/TS_VCSC_Horizontal_Steps_Container]