Process Steps

Parameters

  • size:small,default,large
  • number of steps:2,3,4,5
  • type:horizontal,vertical
  • per step : Title, Icon, Icon Color & Content
  • title(optional)
  • icon:(optional)
  • iconcolor(optional)
  • content:(optional)

Shortcode Option Panel

The Process Steps Shortcode Options Panel
The Process Steps Shortcode Options Panel

3 Process Steps with Small Size

  • Planning

    The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project.
  • Design

    The design stage typically involves moving the information outlined in the planning stage further into reality.
  • Development

    Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s).

Get the code

[process_steps type="horizontal" size="small" number="3"] [process_step title="Planning" icon="list-ol"] The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. [/process_step] [process_step title="Design" icon="pencil"] The design stage typically involves moving the information outlined in the planning stage further into reality. [/process_step] [process_step title="Development" icon="desktop"] Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s). [/process_step] [/process_steps]

Process Steps with Medium Size & Custom Icon Color

  • Planning

    The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project.
  • Design

    The design stage typically involves moving the information outlined in the planning stage further into reality.
  • Development

    Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s).

Get the code

[process_steps type="horizontal" size="default"] [process_step title="Planning" icon="list-ol" icon_color="#27ccc0"] The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. [/process_step] [process_step title="Design" icon="pencil" icon_color="#2ac4ea"] The design stage typically involves moving the information outlined in the planning stage further into reality. [/process_step] [process_step title="Development" icon="desktop" icon_color="#f6653c"] Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s). [/process_step] [/process_steps]

2 Process Steps with Large Size

  • Planning

    The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.
  • Design

    The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverables are a documented site structure and, more importantly, a visual representation.

Get the code

[process_steps type="horizontal" size="large" number="2"] [process_step title="Planning" icon="list-ol"] The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail. [/process_step] [process_step title="Design" icon="pencil"] The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverables are a documented site structure and, more importantly, a visual representation. [/process_step] [/process_steps]

Process Steps with Vertical

  • Planning

    The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.
  • Design

    The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverables are a documented site structure and, more importantly, a visual representation.
  • Development

    Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s). Keep code organized and commented, and refer constantly to the planning details as the full website takes shape.

Get the code

[process_steps type="vertical" size="large"] [process_step title="Planning" icon="list-ol"] The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail. [/process_step] [process_step title="Design" icon="pencil"] The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverables are a documented site structure and, more importantly, a visual representation. [/process_step] [process_step title="Development" icon="desktop"] Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s). Keep code organized and commented, and refer constantly to the planning details as the full website takes shape. [/process_step] [/process_steps]