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.
- Building in the WCMSSee key tips and guidelines for working with alert modules in the WCMS.
- TP4 UX Best Practices [PPT - 14 MB]For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.
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.