On my post titled Overlaying text on background image in Minimum Pro, Emily asked in the comments,
How would I add a widget, not just text, to the image? I don’t want the text to overlay the entire image, I only want it on the left side, in a box form, where people can subscribe to the newsletter or view a schedule.
I like the way this looks: http://www.goodlifefitness.com/
I’d like to add something like that to my minimum pro theme: http://demo.commit2bfit.ca
In this article I provide details on how a widget area can be added below header into which we are going to place a Genesis eNews Extended plugin's (optional) widget so the opt-in form appears at the left.
Register a widget area and show its contents below header
Add the following at the end in Minimum Pro's functions.php:
Great post again! How does this behave responsively on a mobile?
The same manner in which Minimum Pro behaves with its background image.
iPad Landscape: http://i.imgur.com/GFW6x5r.png
iPad Portrait: http://i.imgur.com/4acr0Et.png
iPhone Landscape: http://i.imgur.com/jgd2y33.png
iPhone Portrait: http://i.imgur.com/O4avPU7.png
Note that the background image will not be truly behaving responsively. That is to be expected because the backstretch in the theme is applied to the body element. If you want the image to behave in a responsive manner at lower widths, study my earlier post http://www.sridharkatakam.com/add-widget-section-responsive-background-image-header-minimum-pro/ and the current one and mix them logically.
OMG YOU’RE AMAZING. THANK YOU!!!!
What if I just wanted simple text to lay over this in a similar fashion?
http://www.sridharkatakam.com/overlaying-text-background-image-minimum-pro-using-genesis-extender/
http://www.sridharkatakam.com/add-widget-section-responsive-background-image-header-minimum-pro/
http://www.sridharkatakam.com/overlaying-text-background-image-minimum-pro/
http://www.sridharkatakam.com/overlaying-text-background-image-minimum-pro-part-2/
Hi! Thanks for this. Will these codes only work on Minimum Pro? 🙂
This article was written for Minimum Pro. That does not mean that you can not learn the essence of what’s shared and apply it to other themes. Certainly possible. If you would like this to be done for some other theme, you can always contact me. See http://www.sridharkatakam.com/services/.
Great post. How would I add the widget area assuming I already replaced the background image with a responsive slider (http://www.sridharkatakam.com/how-to-replace-background-image-in-minimum-pro-with-responsive-slider/).
Thanks.
Like this? -> http://websitesetuppro.com/demos/minimum-pro/
Yes.
Follow http://www.sridharkatakam.com/overlay-opt-form-genesis-responsive-slider-minimum-pro/
Worked beautifully. Thanks for taking the time to share your knowledge. Much appreciated.
[…] how the ideas in my How to replace background image in Minimum Pro with responsive slider and How to overlay an opt-in form on background image below header in Minimum Pro posts can be […]
Sridhar,
Thank you so much for this. One problem that I’m having is that the tagline gets pushed down. I’m not sure why it does that. I tried messing around with the background image size, to see if that was the problem but it doesn’t seem to be the problem. I would like the tagline divider to show without having to scroll down extensively. Thanks again.
Worked perfectly. I would love to have 2 widget areas overlay the home background image, any pointers?
Sridhar
Is this tutorial still current? I’ve tried this on a new install of Minimum Pro and I’m not having any luck. The widget area appears fine, but when I add the eNews widget I get nothing and when I add the CSS the page goes wonky. Thoughts?
http://workdemo.wpengine.com/