How To Create Our Process Content

Please follow below steps to create process content.

Step 1

We will put every thing in center. So, start with a div region with class center.

<div class="center">

</div>

Step 2

Add title.

<div class="center">
	<h3 class="title3">OUR PROCESS</h3>
</div>

Step 3

Add some description.

<div class="center">
	<h3 class="title3">OUR PROCESS</h3>
	This Drupal Theme Contain Everything that You Need for Grow Your Business Stand Out From the Crowd With Our Template
</div>

Step 4

Create 2/3/4/5 columns using column shortcode. In this case we are going to create 5 columns.

<div class="center">
	<h3 class="title3">OUR PROCESS</h3>
	This Drupal Theme Contain Everything that You Need for Grow Your Business Stand Out From the Crowd With Our Template
	<div class="one_five">

	</div>
	
	<div class="one_five">

	</div>
	
	<div class="one_five">

	</div>
	
	<div class="one_five">

	</div>
	
	<div class="one_five_last">

	</div>
</div>

Step 5

Add icon to each column with class circle-icon. Please refer to Font Icon tutorial for icon tutorial.

<div class="center">
	<h3 class="title3">OUR PROCESS</h3>
	This Drupal Theme Contain Everything that You Need for Grow Your Business Stand Out From the Crowd With Our Template
	<div class="one_five">
		<i class="fa-comments fa-2x circle-icon"></i>
	</div>
	
	<div class="one_five">
		<i class="fa-align-center fa-2x circle-icon"></i>
	</div>
	
	<div class="one_five">
		<i class="fa-sun-o fa-2x circle-icon"></i>
	</div>
	
	<div class="one_five">
		<i class="fa-code fa-2x circle-icon"></i>
	</div>
	
	<div class="one_five_last">
		<i class="fa-rocket fa-2x circle-icon"></i>
	</div>
</div>

Step 6

Add some text to each process. Put text just after icon code.

<div class="center">
	<h3 class="title3">OUR PROCESS</h3>
	This Drupal Theme Contain Everything that You Need for Grow Your Business Stand Out From the Crowd With Our Template
	<div class="one_five">
		<i class="fa-comments fa-2x circle-icon"></i>
		Discussion
	</div>
	
	<div class="one_five">
		<i class="fa-align-center fa-2x circle-icon"></i>
		Sketch
	</div>
	
	<div class="one_five">
		<i class="fa-sun-o fa-2x circle-icon"></i>
		Design
	</div>
	
	<div class="one_five">
		<i class="fa-code fa-2x circle-icon"></i>
		Develop
	</div>
	
	<div class="one_five_last">
		<i class="fa-rocket fa-2x circle-icon"></i>
		Launch
	</div>
</div>

Step 7

This step is optional if you want to add some animation effect to each process item. To add an animation effect when the content comes in view, just add an animation class to each process item. In below code I have added bounce from left effect. Please refer to animated content tutorial for more animation effect.

<div class="center">
	<h3 class="title3">OUR PROCESS</h3>
	This Drupal Theme Contain Everything that You Need for Grow Your Business Stand Out From the Crowd With Our Template
	<div class="one_five bounce-left">
		<i class="fa-comments fa-2x circle-icon"></i>
		Discussion
	</div>
	
	<div class="one_five bounce-left">
		<i class="fa-align-center fa-2x circle-icon"></i>
		Sketch
	</div>
	
	<div class="one_five bounce-left">
		<i class="fa-sun-o fa-2x circle-icon"></i>
		Design
	</div>
	
	<div class="one_five bounce-left">
		<i class="fa-code fa-2x circle-icon"></i>
		Develop
	</div>
	
	<div class="one_five_last bounce-left">
		<i class="fa-rocket fa-2x circle-icon"></i>
		Launch
	</div>
</div>