Steps Module

Best Practices

Overview

The steps module in Visual Composer is designed to highlight basic step-by-step instructions.  You can format the module as one to four columns. The first example below uses a two-column format. (Note that the module is responsive, so the two-column format changes to a single column in mobile views.)

The second example uses a single column, and it illustrates optional use of tab text in the highlighting of the step number (the word “Step” in this case).  Note that tab text is not available with multi-column formats.  An optional border separates steps.

Two-Column Steps Module
1
Step Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
2
Step Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Steps Module with Tab Text "Step"
Step
1
Step Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Step
2
Step Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Step
3
Step Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Guidance

  • Be consistent in look and feel if you use multiple step modules in a site.
  • Be brief.
    • Keep step titles within five to seven words.
    • Limit step descriptions to one or two sentences.
    • Link to details when necessary.

Page last reviewed: July 30, 2021
Content source: WCMS / Template Team