Hello, my friend! In this tutorial, I’ll show you how to create a Call to action – CTA on top of WordPress website without using any plugin at all. This can be easily achieved with a little bit of HTML, CSS, and jQuery – and you’ll learn how to do it right now – just follow this tutorial.

Preview

I’ve just released the new premium Extra child theme named Extralight. I needed a way to get user’s attention to check it out. So, I managed to create this CTA on top of WordPress website.

I don’t like to increase the number of plugins that I use. So, every new feature I want on my website I study hard to achieve without the need for extra plugins.

The Elegant Themes website uses this neat feature to grab user’s focus on what they want.

For this tutorial, I’ll use the WordPress with the Extra theme. But, the idea also works for the Divi theme and every other WordPress theme. You just need to know where to add your HTML (on the head of the document), the CSS and the jQuery code.

So, without further delay, let me show how to create a CTA on top of WordPress with no plugins.

How to create a CTA on top of WordPress

HTML

First of all, you need to create the CTA bar on top of everything. So, let’s put the HTML code inside the < head > of the website.

Go to Extra > Theme Options > Integration > Add code to the < head > of your blog:

<div class="cta-bar">
<p>It's just like Divi. But, with Extra awesomeness.
<span><a href="https://blog.youdivi.com/documentation/extralight/" class="add your class here">I want to speed up my design workflow</a></span><p>
<span class="close">x</span>
</div>

Don’t forget to add your own style to the buttons. Learn how to add button style with CSS here.

Nice. Almost done. Now you need to style with CSS this HTML code to make sure it will stay on top of everything else.

Side note: use colors that attract users attention. Or, similar colors to better integrate your website design.

CSS

You’ll create 2 CSS classes: one to style the CTA on top and the other to style the close “X” button – so it doesn’t get around when people don’t want to see this message.

Add the CSS code below inside Extra > Theme Options > Custom CSS:

/* -- CTA bar top -- */
.cta-bar {
position: relative;
z-index: 99;
font-weight: 700;
padding: 15px;
color: #fff;
background: #002984;
text-align: center;
}
.cta-bar p {
margin-bottom: 0 !important;
}
.close {
position: absolute;
top: 0;
right: 15px;
cursor: pointer;
font-size: 20px;
color: #fff;
}

Important: the style of the button is based on Google’s Material design trend. Click here to learn about material design button.

Now, the only thing you need to do is add the jQuery code to activate the slide up effect when the user clicks on the close button.

jQuery

Finally, you need to add the following inside the head or footer part of your WordPress website.

Go to Extra > Theme Options > Integration > Add code to the < head > of your blog:

<script>
jQuery(document).ready(function( $ ){
$('.close').click(function(){
$('div.cta-bar').slideUp();
});
});
</script>

What the following code is saying is simple. Get the element with the .close class and every time a user clicks on it all the div content with the class .cta-bar will slide up.

It’s pretty simple, right? Everything is hard… until you learn how to do it. Then, it’s easy and you focus on your next challenge.

Conclusion

Have you learned how to create a CTA on top of WordPress without any plugins at all?

Please, send me an email or leave a comment. Your feedback is very important to me.

Also, check my premium Extra Child Themes.

See ya!