WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Minimum Pro Add Text Widget To Overlay Backstretch Image

The solution in this tutorial enables you to add a new widget area named Home Image Text Overlay which floats the HTML you add to a text widget over the backstretch image on the front page of the Minimum Pro theme by StudioPress.

Here’s what your content looks like when added to the new widget area :

Based on this question from a member of the Genesis community :

I’m using the Minimum Pro theme and I would like to add text with a button to overlay the backstretch image on the homepage. I have created a button in a text widget but I need to position it to be inside that backstretch image area and ultimately have some text as well.

Demo Video

Shows how the added CSS for media queries displays the widget text and button on smaller screens. This CSS also enables you to control the size of the image on any mobile device as well as the padding and margins.

Code Installation – Support Included #

There’s 3 steps :

Step 1 : From the download folder, upload the front-page.php file to the Minimum Pro theme folder overriding the default front-page.php file. Alternatively, copy the code between lines 39 – 51 and paste the code snippet into your existing front-page.php file. The added code is commented so you know where it starts and ends.

Step 2 : From the download folder, copy and paste the PHP from the functions.php file ( without the opening PHP tag ) to the end of the Minimum Pro themes functions.php file.

Step 3 : From the download folder, copy and paste the CSS from the style.css file to the end of the Minimum Pro themes style.css file and clear caching.

Demo HTML

You can then add some HTML to a text widget in the new Home Image Text Overlay widget area :

Register or login to access the download folder :

Register for full access

Reader Interactions

Comments

  1. Hi Brad,

    I installed your code on localhost, I found a free slider, & it looks good except for one minor issue. The slider image is loading before the backstretch image & I’d like it to load afterwards. Can you give me an idea how to adjust that? We aren’t going live until June 1 so I won’t have a link until then.

    Thanks,
    Lezly

    • You mean its loading above the backstretch image? Hard to help without being able to inspect the element. Send a screenshot please. Also note, support is provided for existing code in tutorials only.

  2. Brad, after uploading the files from your download, I now have the Home Image Text-Overlay widget showing, but I also have a “backstretch-text-overlay” widget showing. I suspect the person trying to help me get a text overlay set up before I followed your tutorial may have put that there and left it there, but want to check with you. If my hunch is correct that person may also have edited some css code that could make styling for smaller screens and in different browsers problematic. E.G. text is not centered in firefox, and almost off the top of the home image in safari, also black text there….

    • Hello Jacqueline. Do you have backup of the theme? What i can do is install the code in a fresh copy of the theme or a backup copy you provide. I did test this code right now and it does exactly as seen in the demo video.

    • Change this CSS rule 

      .home-image .widget {
    margin-left: 200px;
    padding-bottom: 150px;
    max-width: 600px;
    color: white;
}

      To this:

      .home-image .widget {
    margin: 0 auto;
    padding-bottom: 150px;
    max-width: 600px;
    color: white;
}

      You can the change the title by modifying this CSS rule :

      .home-image h1 {
    font-size: 60px;
}

  3. Good morning Brad,

    Ok, I had a look at all of that. Here are my observations.

    1) I need the cache for performance reasons
    2) I need it to work in Chrome, because most of the world uses Chrome
    3) I need my entire image to show

    Based on the above, it looks like I can’t practically get there from here, at least with a backstretch.
    As an alternative, I’d like to ask for my one tutorial for this month to be the following:

    a) in place of a backstretch image, put a static image there so the theme can make it responsive like it does on any page with an image. (for example, the flower on https://audacitydaily.com/about/)
    b) That image should scroll with the rest of the page.
    c) The original image should display 100% and be as big as the area currently occupied by the backstretch image.

    Thoughts?

    Thanks,
    Tom

    • Backstretch isn’t the problem. The problem is a coding error at your end and the use of multiple caching plugins which break the jQuery. This video screencast shows my code installed on your server producing exactly what the demo video shows.

      However, use this solution to add your image using CSS if you prefer not using backstretch. Update : The CSS solution sin’t as good as the jQuery so i suggest you stick with backstretch.

  4. Hi Brad,
    I’ve followed the instructions correctly I believe for https://wpsites.net/web-design/minimum-pro-add-text-widget-to-overlay-backstretch-image/, but now the backstretch image isn’t loading. Although the Home Image Text Overlay widget does exist.

    Note that in WordPress when I change the real-time “view” (bottom left corner of the Appearance section, adjacent to the “Hide Controls” button) clicking either of the non-desktop views, allows the test text I entered into the widget to become visible, although still not formatted correctly, but is not visible in the desktop view.

    I have purged my CDN and cleared cache.

    Also note, I can see the backstretch image in the real-time WordPress preview. However, after I save and go to a browser, the backstretch image does not appear.

    Thank you Brad,
    Tom

    • Hello Tom. Thanks for letting me know about the leave notice. I’ll retest the code locally and then fix your live site.

      Update : This is what i get :

      Also tested locally and it works fine.

      I did notice the image displaying after the footer on your installation so i installed the code in a fresh copy and activated it on your server.

      • Hi Brad,

        Thanks for working on this today! Couple of things…

        1) What did I do wrong when I tried to make it work?

        2) I noticed my entire list of CSS edits is gone, (Appearance>Customize>Additional CSS) so consequently the original details of formatting, fonts, etc that were on the site before are now gone. I’m backed up and can recover that way, unless you know of a different way.

        3) I thought the backstretch was going to be like your video example at https://www.youtube.com/watch?v=g45oient0-k
        where the backstretch stops doing the parallax thing and scrolls with the rest of the page.
        I need the image to scroll with the rest of the page because with the current backstretch parallax technique, I can’t control what portion of the image I use gets displayed. For example, the image of the clouds I have there now is supposed to show some land horizons at the bottom.

        So I need the original design back with fonts, formatting, etc, and the backstretch to scroll with the rest of the page.

        What are your thoughts?

        Thanks,

        Tom

        • 1. I spent some time trying to work that out but decided to install the code from this tutorial in a fresh copy of the Minimum Pro theme locally. When it worked, i renamed the child theme Minimum Pro Tom and installed it as a new child theme on your server.

          I can’t troubleshoot installation errors, 3rd part code additions/modifications because it could potentially take hours so what i do is offer a code guarantee so it works in a fresh copy of the theme it is tested in and i also include installation at no extra charge.

          2. I never added your CSS edits.

          3. See these solutions which all produce the result you want. https://wpsites.net/web-design/minimum-pro-add-text-widget-to-overlay-backstretch-image/#position-scroll

          Based on my testing on your live installation of the Minimum Pro Tom theme and my local installation, the code produces the same result as the demo video.

          Note : When i deactivated the 3 caching plugins you have installed, the code works fine in Chrome. Before this, it only worked in Firefox so that might explain why it appears to not be working as you would need to delete all 3 caches.

Leave a Reply