Using Static Images in the Hero Area

Since the release of Brunch Pro (formerly Dear) 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>


Still need help? Contact Us Contact Us