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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Add Image After Header Using Customizer

This tutorial for a client and members is a more complicated version of the previous post about how to add a image after the header in the Ambiance Pro themes index.php file.

This version extends further by using Backstretch jQuery and the flexibility of the customiser as you can see in the following image:

back-stretch

This solution is better because it stretches the image according to the screen size and enables you to try different images simply by adding and removing them in the customizer.

Tested on the Ambiance Pro themes index.php file which is used for the front page.

There’s 6 steps that you need to take to complete this tutorial:

  1. Load the jQuery script directly from the index.php file and hook in the div class.
  2. Add a new .js file to the js folder specifically for the front page image as we’re using a different class.
  3. Add a default image to your child themes images folder.
  4. Add the customize.php file to your child themes lib folder.
  5. Load the new customize.php file from functions.php
  6. Add some basic CSS to your child themes style.css file

1st step

Register for full access

Related Templates & Code

  • Genesis Page Templates for Background Images
  • Hero Image Behind Site Header & Menu With Text Overlay In Genesis Sample Theme

After Header Image Ambiance Pro Theme

Reader Interactions

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.