Creating a Call To Action

In this tutorial, we will take a closer look at how you can create elements on your page that prompt visitors to take action and delve deeper into your site.

Learning outcomes

1. Creating a Call to Action (CTA) using a Cover block.
2. Modifying a CTA pattern.
3. Identifying the anatomy of a CTA.

Comprehension questions

1. What is the advantage of using the first person?
2. How do you obtain people’s email addresses if you want them to subscribe to your newsletter?

Transcript

Hi, and welcome to Learn WordPress. When visitors come to your site, you generally want them to do something specific – to sign up for a newsletter, to buy a product, to engage with more content on your site, to join an event etc. In these situations, you have to prompt a response from a visitor, and the best way to do that, is with a call to action. A call to action is an element on your site that asks people to take a specific action, there is usually a clickable button or signup section involved.

Let me show you how I created this call to action using a Cover block. Add a Cover block, select an image from your Media Library, select the parent block and then change the alignment to full width. And place the text top left and toggle full height. Now we can go ahead and add a Heading block with your relevant heading. Then I will select my heading, make it bold and choose a custom size of 80 pixels. To keep my paragraph content to the left, I’m going to add a Columns block and select three equal columns. And then I will add the content to the left column and select a custom size of 27 pixels.

Lastly, I will add a donate Buttons block. I’ll make the text bold, choose a white background and black text and change the border radius to 100 pixels to give it that rounded effect; and also change the size to large. Then I will make sure to select the parent block again to change the opacity of the Cover block to 20 pixels followed by moving the focal point picker to the left for better mobile view. Now we can view the call to action from the front end on a desktop and mobile.

In the next example, I’m going to show you how I created this call to action using a pattern. To start, I made my way to the wordpress.org website and clicked on Patterns. And in the search block I typed in call to action and here you can browse through all the different patterns. And I found the one I was looking for on the second page and then I just copied and then pasted it into my page. And now we can edit the pattern.

Firstly, I will replace the image with an image from my Media Library. Then I will select the left column and use the movers or arrows and send that to the right. Then I will replace the heading, select the button and then open my sidebar settings and change the style to outline. And there we have a modified call to action pattern.

To end off, it will be helpful to look at the building blocks or anatomy of a call to action I created. So let’s go ahead and open up the list view and here we will notice that I’ve added a Columns block with two equal columns, and in the left column, I firstly added a heading then a paragraph and then another paragraph – Subscribe to our newsletter – followed by a form which I added using a forms plugin and then some social icons. And in the right column, I’ve added an image and if we open up the sidebar settings, we will notice I’ve added a 10 pixel border around my image and if I select the right column, you will also notice I’ve aligned the image to the middle.

The last thing to mention is that I selected a custom background colour for my Columns block. So you of course have the option to build a call to action from scratch, or to modify a pattern to suit your needs. You also have the option to use a plugin to add a variety of call to action elements to your site.

So go ahead and search through the Plugin Directory to find the right plugin that meets your requirements. Visit Learn WordPress for more tutorials and training material.