Shortcode - Features

This tutorial explains, how to create feature blocks as show in demo.

image

Use below sample code to create features as shown in demo.

Disable CKEditor editor and select Full HTML as input format.

But we recommend to create and use a new text input format like Full HTML but without CKEditor editor as explained here: Create a new Text Format without CKEditor

image

Let us first create a row.
Feature should be placed within a div of class features.

<div class="features">
	-- Your feature Here --
</div>

Responsive Features Column

You can place any number of feature columns (one / two / three / four).

Let's create 3 columns for three feature.
Create three div of class feature.

<div class="features">
  <div class="feature">
    my feature One
  </div> <!--/ End feature One -->
  
  <div class="feature">
    my feature Two
  </div> <!--/ End feature Two -->
  
  <div class="feature">
    my feature Three
  </div> <!--/ End feature Three -->
</div>

Create 4 column features

<div class="features">
  <div class="feature">
    my feature One
  </div> <!--/ End feature One -->
  
  <div class="feature">
    my feature Two
  </div> <!--/ End feature Two -->
  
  <div class="feature">
    my feature Three
  </div> <!--/ End feature Three -->
	
  <div class="feature">
    my feature four
  </div> <!--/ End feature four -->
</div>
Use below sample code to create feature block as shown in demo.

<div class="features">
	<div class="feature">
		<div class="feature-icon"><img src="/images/icons/scholarship.svg" /></div>
		<h3>Skilled Teachers</h3>
		<p>Lorem ipsum is a great example for demo text and this is widely used.</p>
		<a href="#" class="link-button">Read more</a>
	</div><!--/feature -->
	<div class="feature">
		<div class="feature-icon"><img src="/images/icons/book3.svg" /></div>
		<h3>Affordable Courses</h3>
		<p>Lorem ipsum is a great example for demo text and this is widely used.</p>
		<a href="#" class="link-button">Read more</a>
	</div><!--/feature -->
	<div class="feature">
		<div class="feature-icon"><img src="/images/icons/book4.svg" /></div>
		<h3>Central Library</h3>
		<p>Lorem ipsum is a great example for demo text and this is widely used.</p>
		<a href="#" class="link-button">Read more</a>
	</div><!--/feature -->
</div><!--/features -->

In above code, correct the image path. We have used .svg images, but you can use any image format (png / jpg).

You can also use gont icons instead of feature icons.

Custom Shortcodes up Notice