• 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

Image Behind Header In Breakthrough Pro

The code in this download folder adds a hero image behind all site header elements in the Breakthrough Pro for Genesis.

The image can be added :

  • On the front page via the customize > Hero Image upload field when the hero text widget is active.
  • On any single page or post using ACF when the Unique Hero Image and Unique Hero Text contains overlaying content.

Demo Video

Shows the hero image and overlaying content behind the site header elements display the entry title over the image on single posts and pages and the hero text widget content over the front page hero image.

Tested using the Breakthrough Pro child theme by StudioPress.

Installation Steps

There’s 3 steps :

  1. # Copy & paste the PHP code from the functions.php file to the end of your Breakthrough Pro child themes functions file.
  2.  

  3. # Copy & paste the CSS from the style.css file to the end of your Breakthrough Pro child themes style sheet and clear caching.
  4.  

  5. # Using ACF, import the acf.json file.
  6.  

You can then add your hero image for the front page using the customizer with overlaying text added via a Custom HTML widget in the Hero Text widget area.

Hero images and text for single posts and pages are added via the Edit Post/Page screens using the ACF input fields as seen here.

Download Folder

Related Tutorials

  • Add Hero Image To Breakthrough Pro Child Theme by StudioPress

After Header Image Breakthrough Pro Theme Header Image

Reader Interactions

Comments

  1. Emily Journey says

    October 15, 2022 at 1:38 pm

    Thank you Brad! This is so helpful. Does this use two different headers? With and without a hero image?
    Emily

    Log in to Reply
    • Brad Dalton says

      October 15, 2022 at 1:46 pm

      I think you’ll need to use 2 logos as your white one will work when a hero image is added but it won’t display on a white background when there’s no hero image as the background is white by default. Or you could use 1 logo when the hero image is added and a dark text title when no image added.

      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.