• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Add Text & Button Over Full Width Image

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

  • Title Over Full Width Featured Image
  • Add Background Image to Widget Via Customize
  • Display Widget Text Content Over Image In Genesis
  • Add Call To Action Widget In Any StudioPress Theme

Reader Interactions

Comments

  1. Michael Borger says

    September 10, 2014 at 1:09 am

    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?

    Log in to Reply
    • Brad Dalton says

      September 10, 2014 at 9:02 am

      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

      is_front_page()
      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems