WP SITES

Log in

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

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

Was This Tutorial Helpful?

Free

$0

Access only to all free tutorials per month.

Tutorial Request

Includes code guarantee and coding support.

Subscribe

Monthly

$75

Access to 10 premium tutorials per month.

Tutorial Request

Includes code guarantee and coding support.

Subscribe

Yearly

$500

Access to 15 premium tutorials per month.

Monthly Tutorial Request

Includes code guarantee and priority coding support.

Subscribe