Sridhar Katakam

Genesis and WordPress Tutorials

How to overlay a widget area on top of responsive image on the homepage in Minimum Pro

by 5 Comments

This tutorial is a combination of Setting up a responsive image in place of background in Minimum Pro and How to overlay a widget area on top of background image in Minimum Pro tutorials tested in the current latest Minimum Pro, 3.2.1.

We shall replace the built-in Backstretch functionality with a regular embedded inline image (still selectable via the customizer) on Minimum Pro's front page, register a custom widget area and overlay it on top of the main home image. At smaller widths the widget area will be set to appear beneath the image.

minimum-pro-widget-area-overlay-responsive-image

Step 1

Add the following in child theme's functions.php:

// Register Home Image Overlay widget area
genesis_register_widget_area(
	array(
		'id'          => 'home-image-overlay',
		'name'        => __( 'Home Image Overlay', 'minimum' ),
		'description' => __( 'Widgets placed here will appear on top of home image.', 'minimum' ),
	)
);

Step 2

In front-page.php

a) comment out or delete

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hey Sridhar,
    I have used this tutorial and it’s not working for some reason.
    I have done the following through your tutorials on Minimum Pro:

    Moved primary nav below the header. Worked perfectly.
    Fixed genesis blog template. Worked perfectly.
    Tried adding a resposive image with overlay widget in place of Backstretch.

    Now image sits on top of page with homepage scrolling behind. Primary nav has moved as well.
    Here is URL: http://312.888.mwp.accessdomain.com/

    Just FYI i am using genesis design pallette pro too, cleared hard cache, and all i know to do.

    Thanks for your help and fantastic tutorials.

    Reply

    • Try this:

      Change

      add_action( 'genesis_after_header', 'sk_home_image', 9 );

      to

      add_action( 'genesis_after_header', 'sk_home_image', 11 );

      and move it immediately above

      add_action( 'genesis_after_header', 'minimum_site_tagline', 11 );
      Reply

  • Sridhar,

    I was wrong. http://312.888.mwp.accessdomain.com/

    I cant get the widget area to appear in the center of the image. Widget appears at bottom of page . And there is a white space between image and minimum site tagline. If i fix the CSS through inspector, i can get it fto work.

    Any thoughts?

    Reply

    • And there is a white space between image and minimum site tagline.

      body.gppro-custom .site-tagline is getting a top margin of 100px via Genesis Palette Pro. Remove that.

      Also you might want to change top margin for .main-image from 104px to 108px.

      I cant get the widget area to appear in the center of the image.

      It is indeed exactly centered. It does not appear so because the main image is most probably taller than the viewport. Play with the top value of .home-image-overlay. Change it from 50% to 34% and see.

      Reply
    • >