WordPress: How to overlay text / widget div on top of a revolution slider

I’m not sure how you’re planning to get your static headline onto the page. You could hard code it in there as I am about to show you below or you could create a custom field. If you decide to take that route, I find that Advanced Custom Fields is really easy to use.

<?php
    $revslider = get_post_meta($id, "qode_revolution-slider", true);
    if (!empty($revslider)){ ?>
      <div class="q_slider"><div class="q_slider_inner">
       <h1 class="static-headline">Your awesome text goes here</h1>
    <?php echo do_shortcode($revslider); ?>
  </div></div>
<?php
 

Add the following CSS to your site to position it in the correct place:

.q_slider_inner { position: relative; }
.static-headline {
  position: absolute;
  bottom: 5%;
  left: 2%;
  color: #fff;
  z-index: 21;
 }

You’ll need to play around with the percentages to get the headline exactly where you need it but I recommend using % over px values since you want this to be responsive.

I hope this helps.

Leave a Comment