These are the features we're going to change:
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.
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