These are the features we're going to change:


blob1477659212136.png



So, these are widgets - to modify them we'll go to Appearance > Widgets - Below Content Features

You'll see 3 text widgets - they all work the same way - let's open one and look at the HTML inside.

blob1477659330099.png


Let's also paste this HTML so it's easier for you:

 

<a href="http://themedemo.commercegurus.com/economist/services/"><span class="sr-only">Our Services</span></a>

<span class="footer-picture" style="background-image: url('http://themedemo.commercegurus.com/economist/wp-content/uploads/sites/2/2016/10/economist_below_feature_01.jpg');"></span>

<div class="footer-text">
<h3 class="footer-title">Our Services</h3>
<p class="footer-subtitle">Discover more</p>
</div>

 


Let's break it up into pieces and explain each piece.

  • The a href part is the link to a page. Replace whats between the "" with a link to your own page or post.
  • The sr-only part is not actually displayed on screen - it is for accessibility but should reflect the content.
  • The background-image: url('') part is the image. You can upload your own in the Media section and replace this path.
  • The footer-title part is the Title displayed on screen
  • The footer-subtitle part is displayed when the user hovers over a feature