Update 2019/09/26: this is an unsupported customization and no longer displays properly on mobile with the most recent theme versions. Instead, we recommend creating a specific category for individual posts you want to stick up here, that contains just those 3 posts, and using the "Brunch Pro: Featured Posts" widget to display just that specific category.
Since the release of Brunch Pro one of the most common questions we get is how to add in static images that link to other content in the Home Top area. Out of the box, Brunch Pro and Cook'd Pro are designed to show the three most recent posts in the Home Top widget area.
This tutorial will show you how to add in static images that link to categories or pages so you can take your site from looking like this:
to looking like this:
The first step is to remove the Featured Posts widget or from the Home Top widget area and replace it with a text widget. In the text widget you should paste the code below.
<div class="one-third first"><a href="LINK_HERE"><img src="SRC_HERE" alt="ALT_TEXT_HERE"></a></div> <div class="one-third"><a href="LINK_HERE"><img src="SRC_HERE" alt="ALT_TEXT_HERE"></a></div> <div class="one-third"><a href="LINK_HERE"><img src="SRC_HERE" alt="ALT_TEXT_HERE"></a></div>
Once you have the code pasted in you'll need to replace the url you'd like the image to direct to (LINK HERE), the url to the image itself (SRC_HERE), and the Alt Text (ALT_TEXT_HERE) (Note: The alt text attribute displays an alternate text for an image if the image is not loaded).
To find the url to replace the SRC HERE in the html code for your image you'll want to make sure the image is uploaded to your media library and then when you click on the image the Attachment Details box will pop up and the image url can be viewed and copied.Once you have the links and alt text changed then your code will look something like this:
<div class="one-third first"><a href="http://feastdesignco.com/done-for-you/"><img src="http://staging.themedemo.flywheelsites.com/wp-content/uploads/2016/03/Done_For_You.jpg" alt="Done For You Services"></a></div> <div class="one-third"><a href="http://feastdesignco.com/services/"><img src="http://staging.themedemo.flywheelsites.com/wp-content/uploads/2016/03/Partnership.jpg" alt="Strategic Partnerships"></a></div> <div class="one-third"><a href="http://feastdesignco.com/shop/garnish/"><img src="http://staging.themedemo.flywheelsites.com/wp-content/uploads/2016/03/Garnish.jpg" alt="Garnish Course"></a></div>
