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

WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Reduce Height of Essence Pro Hero Image Excluding Front Page

This tutorial shows you how to modify the height of the header hero image on all pages excluding the front page.

Here’s a example showing the default header hero height on the left and a much smaller hero image on all inner pages :

Header Hero Image Inner Pages
Default Height
Header Hero Image Front Page
Modified Height

Demo Video #

Shows the reduced height of the header hero image on all inner pages including single posts and single pages.

Installation Steps

There’s 2 steps :

# Step 1 : Copy & paste the following PHP code to the end of your child themes functions.php file.

Should look something like this :

Step 1

# Step 2 : Copy & paste the following CSS to the end of the Essence Pro themes style.css file and clear caching.

Register for full access

Essence Pro Theme

Reader Interactions

Comments

  1. David Bega says

    May 4, 2023 at 3:33 pm

    Hi Brad,
    Do this fix work on mobile as well? Does it not distort the image on mobile when increasing image height?

    Log in to Reply
    • Brad Dalton says

      May 4, 2023 at 3:57 pm

      I think it works pretty well but give it a try otherwise you can use different sized image for mobiles screens. https://wpsites.net/genesis-tutorials/replace-default-header-hero-with-different-image-on-mobiles-essence-pro/

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.