Work Process
We use box shortcode to build work process with some special classes:
[box class='' title='' border='circle|square|none' background='yes|no' align='top-left|top-right|left|center|right' icon/image='FONT AWESOME/NUMBER' link='' ]Content here[/box]
Class: work-process-style01, work-process-style02, work-process-style03, first-item, last-item
Example
Style 01
[row][col lg_col="3" md_col="3" sm_col="6" xs_col="12"][box title="Brainstroming" border="none" background="no" align="center" type="image" image="http://statics.drupalexp.com/zap/work-process1.png" class="work-process-style01 first-item"][/box][/col]
[col lg_col="3" md_col="3" sm_col="6" xs_col="12"][box title="CONCEPT Protoype" border="none" background="no" align="center" type="image" image="http://statics.drupalexp.com/zap/work-process2.png" class="work-process-style01"][/box][/col]
[col lg_col="3" md_col="3" sm_col="6" xs_col="12"][box title="DESIGN LAYOUT" border="none" background="no" align="center" type="image" image="http://statics.drupalexp.com/zap/work-process3.png" class="work-process-style01"][/box][/col]
[col lg_col="3" md_col="3" sm_col="6" xs_col="12"][box title="DEVELOPMENT" border="none" background="no" align="center" type="image" image="http://statics.drupalexp.com/zap/work-process4.png" class="work-process-style01 last-item"][/box][/col][/row]
Style 02
[row][col lg_col="3" md_col="3" sm_col="6" xs_col="12"][box title="01" border="circle" background="yes" align="center" type="icon" icon="fa fa-lightbulb-o" class="work-process-style02 first-item"]Brainstorming[/box][/col]
[col lg_col="3" md_col="3" sm_col="6" xs_col="12"][box title="02" border="circle" background="yes" align="center" type="icon" icon="fa fa-pencil" class="work-process-style02"]Concept Prototype[/box][/col]
[col lg_col="3" md_col="3" sm_col="6" xs_col="12"][box title="03" border="circle" background="yes" align="center" type="icon" icon="fa fa-paper-plane-o" class="work-process-style02"]Design Layout[/box][/col]
[col lg_col="3" md_col="3" sm_col="6" xs_col="12"][box title="04" border="circle" background="yes" align="center" type="icon" icon="fa fa-cube" class="work-process-style02 last-item"]Development[/box][/col][/row]
Style 03
[row][col lg_col="3" md_col="3" sm_col="6" xs_col="12" class="pd-md0"][box title="01" border="square" background="no" align="center" type="icon" icon="fa fa-anchor" class="work-process-style03 first-item"]GET PLAN[/box][/col]
[col lg_col="3" md_col="3" sm_col="6" xs_col="12" class="pd-md0"][box title="02" border="square" background="no" align="center" type="icon" icon="fa fa-sliders" class="work-process-style03"]DEVELOPMENT[/box][/col]
[col lg_col="3" md_col="3" sm_col="6" xs_col="12" class="pd-md0"][box title="03" border="square" background="no" align="center" type="icon" icon="fa fa-search" class="work-process-style03"]TESTING[/box][/col]
[col lg_col="3" md_col="3" sm_col="6" xs_col="12" class="pd-md0"][box title="04" border="square" background="no" align="center" type="icon" icon="fa fa-paper-plane" class="work-process-style03 last-item"]LAUNCHING[/box][/col][/row]
You can reference to link to view how shortcode display