WP SITES

3095 Coded Tutorials & 297 Plugins

Add Text & Button Over Full Width Image

—

by

Brad Dalton

This tutorial for beginners provides the PHP and CSS code which creates a widget over a full screen width image.

The code adds the image after the header and nav menu however you could change this simply by changing the genesis_after_header hook.

Here’s what the code produces on the front page only:

widget over image

  1. Here’s the HTML for button which you can paste into a text widget.
  2. The code also includes PHP which goes at the end of your child themes functions.php file.
  3. And CSS for your style sheet.

Related Tutorials

Was this helpful?

Yes
No
Thanks for your feedback!

2 responses to “Add Text & Button Over Full Width Image”

  1. Michael Borger Avatar
    Michael Borger

    Thanks for sharing, Brad. This looks very useful as a CTA. How would you use this for individual pages and posts instead? A Display Widgets plugin can easily be used on individual text widgets, but what about any modifications to the code in style.css or functions.php?

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Doesn’t get any easier as this is a very simple example.

      I’ve also linked to another method in the related tutorials.

      You can change the conditional tag in the code

      [code]
      is_front_page()
      [/code]

      Reply

Leave a Reply