• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

  • Themes
  • Feast Plugin
  • Blog
  • Support
  • Tutorials
  • Nav Social Menu

    • Email
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Feast Plugin
  • Support
  • Tutorials
  • Account
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Feast Plugin
    • Support
    • Tutorials
    • Account
    • Facebook
    • Instagram
    • Twitter
  • ×
    Home » How To Customize Your WordPress Themes » Brunch Pro Classic Tutorials

    Using Static Images in the Hero Area

    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="https://feastdesignco.com/done-for-you/"><img src="https://foodiepro.com/wp-content/uploads/2016/03/Done_For_You.jpg" alt="Done For You Services"></a></div>
    <div class="one-third"><a href="https://feastdesignco.com/services/"><img src="https://foodiepro.com/wp-content/uploads/2016/03/Partnership.jpg" alt="Strategic Partnerships"></a></div>
    <div class="one-third"><a href="https://feastdesignco.com/shop/garnish/"><img src="https://foodiepro.com/wp-content/uploads/2016/03/Garnish.jpg" alt="Garnish Course"></a></div>
    

    Primary Sidebar

    How To Customize Your WordPress Themes

    • How to Create Multiple Recipe Index Pages
    • How to Set a Favicon
    • Plugins to Install
    • How to Change the Header Size
    • How to Change the Background Color of the Genesis eNews Widgets
    • Font Size for Food Blogs
    • Why is troubleshooting so complex?
    • How to Launch Your Food Blog
    • Add a Before Entry Widget Area
    • Recipe Index: Content Configuration (Cravings Pro + Seasoned Pro)
    • How Do I Set Up My Navigation Menu?
    • Can I Use Multiple Recipe Index Pages?
    • How Do I Update the Theme Version? (without the Feast Plugin)
    • Remove Search Box from Navigation Menu
    • How to Add the Visual Category Page Index
    • Customization Library
    • Setup a secondary navigation menu
    • How to clear your cache
    • Troubleshoot Plugin Conflicts
    • How to Add the Featured Posts Category Index
    • Food Blog Home Page Pagination
    • Cravings Pro Theme: Setup Your Navigation Menu
    • Why we're not supporting Gutenberg Oversized Images
    • Install Theme, and Import Demo Content and Widgets
    • How to change change your footer
    • Seasoned Pro Classic Tutorials
    • Manually Disable Google Fonts
    • Image Alt Tags
    • Why we don't support the read more tag
    • Pinterest for Food Bloggers
    • How to Create Multiple Recipe Index Pages
    • WordPress Settings
    • Foodie Pro Classic Tutorials
    • Brunch Pro Classic Tutorials
      • How to Change the Header Size in Brunch Pro
      • How to Configure the Brunch Pro Classic Home Page
      • How to Enable the Grid Archive for the Blog Page
      • How to Configure the Brunch Pro Classic Recipe Index
      • How to Use the Customizer
      • How to Add a Header Logo to Brunch Pro Classic
      • Brunch Pro Plugin Conflict Resolution
      • How to Configure the Brunch Pro Footer Widgets
      • Using Google Fonts with Brunch Pro Classic
      • Using Static Images in the Hero Area
    • Cook'd Pro Classic Tutorials
    • Cravings Pro Classic Tutorials
    • All About Featured Images
    • FAQ for All Themes
    • Add Google Analytics Tracking Code
    • Customization Referrals
    • Genesis Child Themes
    • Enable SSL for HTTPS on your Food Blog
    • How to Start a Food Blog
    • Set Up Your WooCommerce Shop
    • The parent theme could not be found. You will need to install the parent theme, genesis, before you can use this child theme
    • Food Blog Theme Features Comparison
    • Translation + Multi Language Support
    • Use Inspect Element to troubleshoot styles

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes
    • Travel blogs
    • Knitting + DIY blogs

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Login
    • Your Account
    • Subscriptions
    • Downloads
    • Discounts and Coupons
    • Compatibility

    Company

    • Subscribe to newsletter
    • Privacy Policy
    • Refund policy
    • Terms & Conditions
    • Principles and Best Practices
    • Affiliates
    • Contact

    Copyright © 2023 · Feast Design Co.

    Results not typical or guaranteed. Our themes and plugins are just a small part of the overall effort involved in running a food blog. Nothing on this website shall constitute legal or financial advice, always consult a local lawyer and accountant. Accessing this website and all transactions herein are under the laws and jurisdiction of Toronto, Ontario, Canada.