Crafting an Interactive Features Page

Displaying your product's features is crucial to sales. This article teaches you how to craft a features page using visuals that will improve conversions.

Displaying your product's features is crucial to sales. This article teaches you how to craft a features page using visuals that will improve conversions. By combining the quality of design, graphics, and copy, you improve your ability to showcase the features of your product. In this article, Solodev will show you how to create a visual features page.

Below is the HTML, CSS, and JavaScript required.

Step 1 - features.html

Add the HTML below to your web page

<main>
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <h2 class="ct-section-header">BIG DATA WITH WEBCORPCO<span class="ct-section-header__separator" role="separator"><img alt="Separator" src="https://www.solodev.com/assets/design/separator.png"></span></h2>
        <p class="text-center">WebCorpCo is all about making sure your marketing stack is in alignment with your company as well as the customers you serve. There is no 'one size fits all' approach to marketing. Every business is unique, customers are unique, and your marketing should be as well.</p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row ct-choice-box__row">
      <div class="col-md-6">
        <a class="ct-choice-box business" href="/"><span class="inner"><img alt="Big Data" src="https://www.solodev.com/assets/design/pic1.jpg"> <span class="ct-choice-box__header">Big Data</span></span></a>
      </div>
      <div class="col-md-6">
        <a class="ct-choice-box residents" href="/"><span class="inner"><img alt="Pattern Analysis" src="https://www.solodev.com/assets/design/pic2.jpg"> <span class="ct-choice-box__header">Pattern Analysis</span></span></a>
      </div>
    </div>
    <div class="row ct-choice-box__row">
      <div class="col-md-6">
        <a class="ct-choice-box living" href="/"><span class="inner"><img alt="Data Mining" src="https://www.solodev.com/assets/design/pic3.jpg"> <span class="ct-choice-box__header">Data Mining</span></span></a>
      </div>
      <div class="col-md-6">
        <a class="ct-choice-box living" href="/"><span class="inner"><img alt="Realtime Insights" src="https://www.solodev.com/assets/design/pic4.jpg"> <span class="ct-choice-box__header">Realtime Insight</span></span></a>
      </div>
    </div>
  </div>
  <section class="container ct-isotope-gallery__container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <h2 class="ct-section-header">we can help<span class="ct-section-header__separator" role="separator"><img alt="Separator" src="https://www.solodev.com/assets/design/separator.png"></span></h2>
        <p class="text-center">Programming not required. WebCorpCo enables marketers to manage their entire stack in one place without needing the ability to program as all code is automatically written by webcorpco.</p>
      </div>
    </div>
    <div class="ct-isotope-gallery">
      <div class="row">
        <div class="col-md-6">
          <div class="ct-isotope-item ct-isotope-item--medium">
            <div class="ct-isotope-item__inner accent">
              <div class="ct-isotope-item__media">
                <img alt="Big Data" src="https://www.solodev.com/assets/design/pic1.jpg">
                <div class="ct-isotope-item__title">
                  <div class="outer">
                    <div class="inner">
                      <span>Big Data</span>
                    </div>
                  </div>
                  <div class="ct-isotope-item__arrow">
                    <img alt="Arrow" src="https://www.solodev.com/assets/design/isotope-arrow.png">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="ct-isotope-item ct-isotope-item--small">
            <div class="ct-isotope-item__inner yellow">
              <div class="ct-isotope-item__media">
                <img alt="Business Intelligence" src="https://www.solodev.com/assets/design/pic2.jpg">
              </div>
              <div class="ct-isotope-item__title">
                <div class="outer">
                  <div class="inner">
                    <span>Business Intelligence</span>
                  </div>
                </div>
              </div>
              <div class="ct-isotope-item__arrow">
                <img alt="Arrow" src="https://www.solodev.com/assets/design/isotope-arrow.png">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="ct-isotope-item ct-isotope-item--big" style="height: 400px;">
            <div class="ct-isotope-item__inner darkblue">
              <div class="ct-isotope-item__media">
                lt;img alt="Data Mining" src="https://www.solodev.com/assets/design/pic3.jpg" style="height: 400px; padding-bottom: 10px;">
              </div>
            </div>
          </div>
          <div class="ct-isotope-item__title" style="height: 50%;">
            <div class="outer">
              <div class="inner">
                <span>Data Mining</span>
              </div>
            </div>
          </div>
          <div class="ct-isotope-item__arrow">
            <img alt="Arrow" src="https://www.solodev.com/assets/design/isotope-arrow.png" style="margin-right: 20px;">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="ct-isotope-item ct-isotope-item--medium">
            <div class="ct-isotope-item__inner dark">
              <div class="ct-isotope-item__media">
                <img alt="Data Visualization" src="https://www.solodev.com/assets/design/pic6.jpg">
              </div>
              <div class="ct-isotope-item__title">
                <div class="outer">
                  <div class="inner">
                    <span>Data Visualization</span>
                  </div>
                </div>
              </div>
              <div class="ct-isotope-item__arrow">
                <img alt="Arrow" src="https://www.solodev.com/assets/design/isotope-arrow.png">
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="ct-isotope-item ct-isotope-item--small">
            <div class="ct-isotope-item__inner blue">
              <div class="ct-isotope-item__media">
                <img alt="Global Availability" src="https://www.solodev.com/assets/design/pic2.jpg">
              </div>
              <div class="ct-isotope-item__title">
                <div class="outer">
                  <div class="inner">
                    <span>Global Availability</span>
                  </div>
                </div>
              </div>
              <div class="ct-isotope-item__arrow">
                <img alt="Arrow" src="https://www.solodev.com/assets/design/isotope-arrow.png">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

Note: Aside from wrapping individual elements with the standard bootstrap grid, two crucial components to the above HTML are the "ct-isotope-item" and the "ct-choice-box" classes. With these classes, the CSS performs some scaling upon hover which gives the interactive features their unique look.

Step 2 - features.css

Download the CSS below and include it in your web page

features.css

Step 3 - Add the includes below to your web page

<link rel="stylesheet" href="features.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

In this article, Solodev showed you how to create a responsive interactive features page using visuals to show off the benefits of your product or service rather than simple text.

Download from Github

Share on Facebook Tweet It