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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Hero Image Behind Site Header & Menu With Unique Text Overlay In Genesis Sample Theme

This tutorial provides the code which enables you to display a unique hero image with unique overlaying text on any page/post using the Genesis Sample child theme by StudioPress.

If the hero image or hero text is empty, the default image added via the customizer with default content added to the Hero Text widget is displayed.

Demo Video

Shows the custom fields added to the Single post/page Edit screen enabling you to add a unique hero image and different overlaying text to any single post or page. Otherwise, the default text added to the Hero Text widget is displayed along with the default hero image added via the customizer.

Tested using the latest version of the Genesis Sample child theme by StudioPress however should work in any version of the sample theme.

Installation Steps

There’s 4 steps :

  1. # Install the ACF plugin ( Free or Premium version ) and import the file named acf-73032.json using Custom Fields > Tools > Import file.
  2.  
    Step 1

  3. # Copy & paste the PHP code from the functions.php file to the end of your Sample themes functions file
  4.  

    Step 2

  5. # Copy & paste the CSS from the style.css file to the end of your Sample themes style sheet and clear caching.
  6.  

    Step 3

  7. # Upload the file named hero.js to your Sample theme folder
  8.  

    Step 4

You can then follow this step to populate the Hero Text widget.

Download Folder

WordPress Custom Fields

If you prefer not to use a custom fields plugin like ACF, you can use the custom fields native to WordPress with the custom field name ( key ) for the text hero_text and the name for the image unique_hero.

Related Tutorials

  • Hero Image On Every Page Type – Genesis
  • Hero Image Behind Site Header & Menu On Front Page In Genesis Sample Theme
  • Hero Image Behind Site Header & Menu With Text Overlay In Genesis Sample Theme

After Header Image Custom Fields Header Image

Reader Interactions

Comments

  1. Boris Margolin says

    October 8, 2021 at 3:26 pm

    Is there a way to exclude the hero on certain pages?

    Log in to Reply
    • Brad Dalton says

      October 8, 2021 at 3:47 pm

      You can add a conditional tag to stop the code executing on any page id to the add_hero_image_inline_css function.

      Log in to Reply
      • Boris Margolin says

        October 8, 2021 at 4:09 pm

        actually meant to not add anything at all (so no hero).

        I just put the conditional in execute_if_widget_active and it did what I wanted.

        THANKS!!

        Log in to Reply
        • Boris Margolin says

          October 13, 2021 at 6:23 pm

          as a way to improve my this I also added a conditional to check for a body class:
          function execute_if_widget_active() {
          $body_css_classes = get_body_class();

          if ( in_array( ‘no-hero’, $body_css_classes ) ) {
          $no_hero=true;

          } else {
          $no_hero=false;

          }
          So now I just test for the custom body class and not have to go back into functions to add pages.

          again thanks for the solution and the code.

          Log in to Reply
          • Brad Dalton says

            October 13, 2021 at 6:29 pm

            Or, you could add a switch in the backend. Something like this https://wpsites.net/web-design/academy-pro-checkbox-to-remove-hero-section-on-inner-pages/

  2. Peter Spiess says

    June 17, 2020 at 9:49 am

    ok, i added this variable to hero js and it works

    $( ‘.wp-custom-logo .title-area img’ ).attr( ‘src’, “Link to the logo ” );

    but I’m not sure it’s really the best way.

    Log in to Reply
    • Brad Dalton says

      June 17, 2020 at 11:00 am

      Hello Peter. I like it otherwise you can use CSS. It does exactly what you want right?

      Log in to Reply
      • Peter Spiess says

        June 19, 2020 at 6:01 am

        Yeah, right.

        With CSS I also tried the following:

        filter: invert(1) – works perfectly black and white. Difficult with colors or multicolored logos.

        What works: content: url();

        Embedding the logo as ‘background’ and then colorizing it with background-color: ; works but I can’t use the custom-logo class.

        But I’m not sure if using the logo as background is the right way.

        Anyway at the moment I have a solution.

        Thanks!

        Log in to Reply
        • Brad Dalton says

          June 19, 2020 at 6:06 am

          Also note, I have been working for 2 days on multiple solutions using different methods for changing the logo on scroll based on your question “but I’m not sure it’s really the best way”.

          I’ve finished the code and will publish the tutorial soon.

          Log in to Reply
          • Peter Spiess says

            June 19, 2020 at 6:15 am

            Great! Thanks a lot, I am curious what your tests have shown and which solution you find best.

          • Brad Dalton says

            June 19, 2020 at 7:51 am

            2.5 days work. Here it is https://wpsites.net/web-design/3-ways-to-change-logo-on-scroll-using-jquery-in-genesis-sample-theme/

          • Brad Dalton says

            June 29, 2020 at 3:34 am

            Peter, please note, there’s a $75 charge on tutorial requests https://wpsites.net/terms-of-service/#additional-tutorial-requests

  3. Peter Spiess says

    June 15, 2020 at 10:16 am

    Link to the page in question on your site
    ____________________________________________

    https://project-space.modular4web.ch/hero/

    Link to the tutorial which contains the code on wpsites.net
    ________________________________________________________________

    https://wpsites.net/web-design/hero-image-behind-site-header-menu-with-unique-text-overlay-in-genesis-sample-theme/

    Describe what you need help with
    ______________________________________

    I use the Genesis Sample Theme with the code snippets «Hero Image Behind Site Header & Menu On Front Page In Genesis Sample Theme»

    (works perfectly)

    Under Costomizer, Website Information, Logo I have added the standard logo:

    The standard logo fits all pages except Home:

    For Home I work with the following code snippet:

    https://wpsites.net/web-design/template-for-custom-logo-different-menu/

    (Perfectly solved with the picture ID)

    _________________________________

    When I scroll, the site header (white, position: sticky;) appears and the set custom logo “sflogo-light” is no longer visible (white on white).

    My request:
    – The custom logo should only be visible when the page is loaded.

    – When I scroll down, the custom logo (white) should be hidden,

    – and the default (standard) logo (on white site header) will be visible.

    I am not sure how to proceed and would be very happy about your support.

    Kind regards / Peter Spiess

    Log in to Reply
    • Brad Dalton says

      June 15, 2020 at 10:22 am

      So you want to change something on scroll? You can use the .white selector class added to the site-container div via the hero.js to make changes on scroll.

      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.