Multi-Step Layout Styles

There are multiple Layouts for displaying the steps. The step tab position, text alignment, step section width, timeline types, and timeline title can also be set in this section. The different layouts are listed below:  
  • Box Layout: The layout in which step titles are displayed in rectangular boxes, which are available in two different layouts horizontal and vertical.
  • Arrow Layout: The layout in which step titles are displayed in the arrow-shaped box. It can also be displayed in two different styles vertical and horizontal.
  • Timeline Layout: In this layout, the step titles are horizontally aligned in the form of a timeline.
  • Accordion Layout: The layout will be displayed as an accordion.

How to set different Layout Styles

The layouts for displaying the steps are displayed in the settings. To select a layout for step checkout,
    1. Navigate to Display Settings.
    2. The layouts are displayed as image thumbnails, outlining their basic structure. Click on any layout to select it.
    3. Save Changes to apply the selected layout to the checkout form.
  • For the Horizontal Layouts, Tab position (left, right & center) can be set from the options.</br/>
  • For the Vertical Layouts, Tab position (left, right & center), Text Alignment (left, right & center) can be set. Other than this options Step Section Width & Step Content Width can be set either in percentage or in any other valid CSS units.
  • For the Time Line Layouts, Time Line types ( Normal, Two End Closed with Icon, Two End Open Without Icon, Two End Closed Without Icon)  are available to choose from. Time Line Title can be placed in two different positions: Below Index or Above Index.