[TS-VCSC-Spacer height=”20″]

HORIZONTAL STEPS

SHOW PROCESSES WITH HORIZONTAL STEPS

[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”40″]

Horizontal Steps Features:

[TS-VCSC-Spacer height=”20″][TS_VCSC_Fancy_List list_type=”image” marker_image=”http://www.mfdsgn.com/mf/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_check_blue.png”]
  • Define minimum width for step items
  • Overall width of all steps defined by column width
  • Use font icon or icon image for each step
  • Add viewport animation to 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)
  • Option to switch to RTL layout/direction
[/TS_VCSC_Fancy_List]
[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”20″]

STEPS EXAMPLES

SHOW PROCESSES WITH HORIZONTAL STEPS

[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”20″][TS_VCSC_Horizontal_Steps_Container min_width=”200″][TS_VCSC_Horizontal_Steps_Item step_radius=”ts-radius-none” header_hover_color=”rgba(0,0,0,0.25)” step_icon=”fa fa-lightbulb-o” icon_color_default=”#81d742″ icon_color_hover=”#1e73be” icon_back_default=”#ededed” icon_back_hover=”#d1d1d1″ step_animation=”ts-hover-css-shake” css3animations_name=”Shake” step_title=”Getting the Green Light …” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_color=”#6c6c6c”][/TS_VCSC_Horizontal_Steps_Item][TS_VCSC_Horizontal_Steps_Item step_radius=”ts-radius-none” header_hover_color=”rgba(0,0,0,0.25)” step_icon=”fa fa-cogs” icon_color_default=”#dd3333″ icon_color_hover=”#eeee22″ icon_back_default=”#eeee22″ icon_back_hover=”#dd3333″ step_animation=”ts-hover-css-bounce” css3animations_name=”Bounce” step_title=”Starting the Setup …” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_color=”#6c6c6c”][/TS_VCSC_Horizontal_Steps_Item][TS_VCSC_Horizontal_Steps_Item step_radius=”ts-radius-none” header_hover_color=”rgba(0,0,0,0.25)” step_icon=”fa fa-paper-plane-o” icon_color_default=”#1e73be” icon_color_hover=”#eeee22″ icon_back_default=”#81d742″ icon_back_hover=”#8224e3″ step_animation=”ts-hover-css-swing” css3animations_name=”Swing” step_title=”Moving Forward …” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_color=”#6c6c6c”][/TS_VCSC_Horizontal_Steps_Item][TS_VCSC_Horizontal_Steps_Item step_radius=”ts-radius-none” header_hover_color=”rgba(0,0,0,0.25)” step_icon=”fa fa-question” icon_color_default=”#ed6f6f” icon_color_hover=”#dd3333″ icon_back_default=”#eaeaea” icon_back_hover=”#219680″ step_animation=”ts-hover-css-rotateFull” css3animations_name=”Rotate Full” step_title=”Re-Evaluationg Goals …” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_color=”#6c6c6c”][/TS_VCSC_Horizontal_Steps_Item][TS_VCSC_Horizontal_Steps_Item step_radius=”ts-radius-none” header_hover_color=”rgba(0,0,0,0.25)” step_icon=”fa fa-flag-checkered” icon_color_default=”#dd9933″ icon_color_hover=”#dd3333″ step_animation=”ts-hover-css-flash” css3animations_name=”Flash” step_title=”Crossing the Finish Line …” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_color=”#6c6c6c”][/TS_VCSC_Horizontal_Steps_Item][/TS_VCSC_Horizontal_Steps_Container][TS-VCSC-Spacer height=”20″]
[TS-VCSC-Spacer height=”40″][TS_VCSC_Horizontal_Steps_Container min_width=”200″][TS_VCSC_Horizontal_Steps_Item icon_back_type=”icononly” step_radius=”ts-radius-full” header_hover_color=”rgba(0,0,0,0.25)” step_replace=”true” step_image=”21942″ step_animation=”ts-hover-css-shake” css3animations_name=”Shake” step_title=”Getting the Green Light …” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_color=”#6c6c6c”][/TS_VCSC_Horizontal_Steps_Item][TS_VCSC_Horizontal_Steps_Item icon_back_type=”icononly” step_radius=”ts-radius-full” header_hover_color=”rgba(0,0,0,0.25)” step_replace=”true” step_image=”21941″ step_animation=”ts-hover-css-bounce” css3animations_name=”Bounce” step_title=”Starting the Setup …” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_color=”#6c6c6c”][/TS_VCSC_Horizontal_Steps_Item][TS_VCSC_Horizontal_Steps_Item icon_back_type=”icononly” step_radius=”ts-radius-full” header_hover_color=”rgba(0,0,0,0.25)” step_replace=”true” step_image=”21940″ step_animation=”ts-hover-css-swing” css3animations_name=”Swing” step_title=”Moving Forward …” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_color=”#6c6c6c”][/TS_VCSC_Horizontal_Steps_Item][TS_VCSC_Horizontal_Steps_Item icon_back_type=”icononly” step_radius=”ts-radius-full” header_hover_color=”rgba(0,0,0,0.25)” step_replace=”true” step_image=”21938″ step_animation=”ts-hover-css-rotateFull” css3animations_name=”Rotate Full” step_title=”Re-Evaluationg Goals …” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_color=”#6c6c6c”][/TS_VCSC_Horizontal_Steps_Item][TS_VCSC_Horizontal_Steps_Item icon_back_type=”icononly” step_radius=”ts-radius-full” header_hover_color=”rgba(0,0,0,0.25)” step_replace=”true” step_image=”21939″ step_animation=”ts-hover-css-flash” css3animations_name=”Flash” step_title=”Crossing the Finish Line …” step_content=”TG9yZW0lMjBpcHN1bSUyMGRvbG9yJTIwc2l0JTIwYW1ldCUyQyUyMGNvbnNlY3RldHVyJTIwYWRpcGlzY2luZyUyMGVsaXQuJTIwQ3VyYWJpdHVyJTIwdmVsJTIwYXVjdG9yJTIwZWxpdC4lMjBRdWlzcXVlJTIwc2NlbGVyaXNxdWUlMjBtYXR0aXMlMjBtYWduYSUyQyUyMHV0JTIwdGluY2lkdW50JTIwbG9yZW0lMjBtb2xlc3RpZSUyMGF0Lg==” content_color=”#6c6c6c”][/TS_VCSC_Horizontal_Steps_Item][/TS_VCSC_Horizontal_Steps_Container][TS-VCSC-Spacer height=”40″]