In this tutorial I will show you how to build Call to Action banners and buttons for your WordPress website that will help you convert your visitors.
We will be using the GenerateBlocks plugin we previously downloaded to build these banners.
What is a Call to Action?
A Call to Action, or CTA in short, is a Marketing term referring to a phrase, sentence, graphic or image that is designed or written to elicit an immediate response from people who see it.
In digital marketing, a Call to Action could be an action text, banner or button on your website that is placed on the site to try and convince your visitors to take action on something specific.
CTA banners can be placed anywhere in your WordPress site. Some banners are prominent in the homepage and are then repeated across various areas of your website.
Usually these include call to action phrases for the main conversion you want from your visitors, such as a ‘Register Here Button’ for a subscription service, a ‘Start Here Button’ for a Tutorials site, or a ‘Contact Us Button’ for a brick-and-mortar shop or office.
In other cases, CTA banners or buttons can be specific to a certain page, such as a ‘Buy Here’ under a product review page, or a ‘Learn More button’ for a Software review page.
Call to Action Examples
There are different types of CTAs depending on the page and use case.
The main type of Call to Action examples in digital Marketing are usually action Buttons or Banners.
This is because a button or banner can be designed to stick out more prominently on a website and grabs the visitor’s attention.
Sometimes call to action phrases are used within the main content also. This is usually as an addition to the banners and would include a simple text link taking visitors to the desired landing page.
So, for example, if I place a button that says ‘click here for a discount’ on my website, that is a CTA button.
A banner asking visitors to subscribe by inputting their email are CTA banners.
If I include the phrase ‘read here‘, in the main body of an article, and I insert an anchor text to this text that leads to my conversion page, then that is a call-to-action text.
Here are some other Call to Action text examples, usually found on buttons:
- Click Here Button
- Read Here
- Check Us Out
- Find More
- Start Here Button
- Learn More Button
- Register Here Buttons
- See More Button
Below I also included a few Call-to-Action examples in the form of Banners, found at the top of the website’s homepage. This is usually referred to as ‘Above the Fold’ since a visitor can see it without having to scroll down.
It is best practice in digital Marketing, to have your main Call to Action banner above the fold.
As you can see each banner has a call-to-action button with an enticing action statement that is trying to convince the visitor to click on it.
Some sites go the extra mile with their CTA designs, using unique button ideas, call to action images, and optimized conversion sentences to increase the click-through-rate (CTR) as much as possible.
How to Create CTA Banners on WordPress
Whatever type of website you are building, I can guarantee that you will always benefit from a CTA banner on your website. It will not be a priority from the start, however eventually you will find that a Call-to-Action banner will help you convert visitors.
Whether you want visitors to subscribe to your email list, or to buy products or services from your website, a CTA will increase your conversion success.
In the next section I will explain how to create a CTA banner. We will be creating this as part of our GeneratePress Elements library, which means we can then re-use across various pages in our website.
I will also show you how to set up the display rules so your Call to Action banner shows up automatically on the specific category of Pages we want it in.
Creating the CTA Banner Element
This is how the CTA Banner I created looks.
I will now show you the step-by-step process I used to create this banner.
To start off, we need to create a new Element in GeneratePress. For this, go to Appearance > Element > Add New Element
The element we need to choose is a Block. Press CREATE.
Let’s start by putting in the name of the element in the Title section. I’ll call it CTA Banner.
From the element page go to the right hand sidebar, under Element Type we need to choose HOOK, and in Hook name we need to choose after_content since this block will be hooked onto the post after the content part.
This is the second Hook we are inserting after the content. If you recall the Author Box was also hooked after the content.
So, which one will show first after the content?
Well, you can decide this by adjusting the Priority settings in the Element options of GenerateBlocks.
If you go to the right-hand settings bar of the CTA banner Element page you’re in, you will see a sub-section named Priority just beneath the Hook name section. From here you set the priority of which Hook Element will show first.
For the Author box we had left the default Priority which was 10. Therefore, if we want the new CTA Banner Element to show up before the Author box Element we have to give it a Priority number that is lower than 10.
Tip: It is best practice to set priorities in multiples of 5 or 10 when you’re starting out with your site. The reason for this is that if you will be adding more elements in the same space later on and you need to adjust the priority, you will have the margin to adjust.
Say, for example that a year after you created your site you need to include 2 new CTA banners after the content. You want them both above the author box but below the original CTA.
Therefore, you need to have enough room in your Priority numbering to insert new Priority numbers for these new CTA banner elements, otherwise you will have to stay adjusting the priority levels for all your other previously created elements.
In this case, I will set the priority number for my CTA banner at 5.
CTA Banner First Block – Container
As I do in most cases when creating elements with GenerateBlocks, I will start with a Container block.
Click on the + sign at the right of this element page and we will choose our first block which will be a CONTAINER.
In the right-hand settings menu, under Layout, your Container settings should be FULL WIDTH.
The Inner Container setting should be set to CONTAINED WIDTH.
I will then set the Container Width to 800 for my CTA banner.
CTA Banner Second Block – Grid
The block within our container will be a Grid. Click on the + sign within the container block and choose the GRID option.
Choose a grid that shows 2 boxes.
We will now amend the left box to right box ratio to be 66%:33%.
To do this click on the left box and adjust the container width to 66% of the space and then click on the right box and adjust to 33% of the space.
Click on SAVE DRAFT.
On the left-hand side of the Grid we will include our Call to Action description and on the right-hand side we will include an image.
CTA Banner Third Block – Headline
Click on the left box in the grid and click on the + sign in the block.
Select HEADLINE.
Type in the text you want to include here. Example ‘Check out our YouTube Channel’.
Choose if you want this to be an H2, H3 or smaller.
As always, I like to set the styles, colors and padding after we finish adding all the blocks so we can better appreciate how they work together.
CTA Banner 4th Block – Div Headline
Next, we will include the call-to-action text, i.e., what wording will convince visitors to click through.
This will be done in a separate block below the previous Headline so that I can change the style and colors differently.
Click on the ellipsis (the three dots in the block pop-up) and select INSERT AFTER.
Click on the + button and choose HEADLINE; and make it a Div.
Type the Call-to-action phrase, for example in my case I will write: You can Find detailed over the shoulder video guides to build and style your WP website.
CTA Banner 5th Block – Button
The final block for the left-hand side of the grid will be a Button which takes my visitors to my YouTube channel.
Once again, I’m going to click on the ellipsis in the block pop-up and select INSERT AFTER.
Click on the + button and press BROWSE ALL. From here I’ll choose the blue BUTTONS icon.
Note: Be careful when choosing buttons since there are 2 types. There’s one from GenerateBlocks (in blue) and another one is the default WP buttons block (in black). Make sure you choose the blue GenerateBlocks icon as this allows much more styling options.
Type in the action text you want to show on your CTA button. In my case I will write Go to YouTube.
Now I will copy and paste my YouTube Channel URL into the input box under the button (you will notice an input box underneath the button that says Paste URL or type to search)
You can insert any URL you want for your Call-to-action buttons.
So, for example if you want visitors to go on a particular landing page within your site, just insert the URL of that landing page.
This is how my CTA Banner is looking for now.
CTA Banner final Block – Image
Next up, I will insert an image on the right-hand side of the Grid block.
To do this, click on the right box in the grid and click on the + sign in the block.
Search for and Select IMAGE. Then click on MEDIA LIBRARY and choose the image you need.
Alternatively, if you haven’t yet added the image to your WordPress media library, you can upload it from here by clicking on the UPLOAD option.
Tip: Always remember to adjust the image sizes to your needs. In this case, for example I adjusted the image size to 50% of what it originally was.
Reason being that when I upload it in my WP Media Library it will not be bigger in size than it needs to. If you recall smaller images means less load resources needed which in turn means faster website.
Click on SAVE DRAFT.
At this point all the blocks needed for our CTA banner have been inserted.
Now we need to style them to make the whole thing look good. Before we do that, however, we need to set up the display options.
We need to do this before styling because to see the effects of our styling changes we need to publish the banner element and view it on our website. So, we must set where it will show on our website before.
Setting Display Rules for our CTA Banner
To set the display rules for our CTA banner we will have to first create a Tag specifically for certain pages where we want out CTA banner to show up.
For those of you who missed my Tagging Tutorial, you can find it here.
To create the Tag, open you WordPress dashboard in a different tab (right click WordPress Logo and open in separate tab) and go to Pages > Tags
Give this tag a name. In my case I will name it YouTube Banner and press the ADD NEW TAG button at bottom of screen.
With this Tag in place, we can easily choose it as an option when we create a Page where we want to show our Call-to-Action banner.
Let’s get back to our CTA element page now and set the Display rules using this new tag.
Scroll down and under Location select PAGE TAG. Now in the right input box choose the new tag we created, which in my case I named YouTube Banner.
NB: if you don’t see the new tag in the dropdown, it could be that you need to refresh the page. Before doing so, however make sure you save the draft and refresh the page.
Time to Publish our CTA Banner Element and see how it looks.
Before checking it out, however we first need to set this new tag on one of our pages.
Open your WP dashboard in a new tab and go to Pages.
Pick a page that is published already and click on EDIT.
Go to the right-hand settings and in the Add new Tag box type the name of the new tag, which for mine is YouTube Banner.
Note that you can have more than one tag inputted in the Add New Tag box of your pages.
Now hit the PUBLISH button. And press PUBLISH again.
Let’s open our website in a separate tab on the internet browser and go to our published page where we just added this tag. You should find the newly created CTA Banner of the bottom of the page.
Most probably the styling is still off. This is how mine looked the first time I hit publish.
Styling the CTA Banner
In the next part we will play around with the styling, including the colors, spacing and so on.
Tip: Remember to routinely click the ‘Update’ button after adjusting settings so that you can check how they look on the Post page opened in a separate tab.
Go back to the CTA Banner Element we just created and click on the LIST VIEW (found in the top-left of screen) so that the left side bar is showing within the screen.
If you followed my exact steps for creating the Call-to-Action banner, in your List view you should have the following Blocks.
Here are the settings I placed for my CTA Banner.
For the main outer container, that is, the first item in the list view above I will adjust:
- Spacing > Padding: 20 for Top, Right, Bottom and Left. Remember that by clicking on the right circle icon all 4 numbers move in the same direction.
- Spacing > Margin: 20 for Top, 50 for right and left margins.
- Colors > Background Color: go to Colors and choose the Background color you want.
- Border Color: choose a color for border we will be setting in next step.
- For the Border around container: go to Spacing > Border size. Set all four numbers to 3.
- Border Radius: all 4 sides set to around 8.
- Click UPDATE.
Tip: When adjusting your colors make sure that a good contrast is set between the background colors and the Text color. For banners I like to have darker background colors and then set my Text color to white.
For the left container block within the grid (i.e., the container holding the written content, or third item in the list view above), I will adjust.
- First Headline Block: Spacing > Set Bottom Margin to 10
- Change text alignment to CENTER from the Block pop-up
- Second Headline Block: Spacing > set Bottom Margin to 20
- Change text alignment to CENTER from Block pop-up
- Button container (6th item in view list): Center alignment from the Block pop-up options.
- Tick on the FILL HORIZONTAL SPACE option.
- Button Block (7th item in view list): Change background color and text color for both Normal and Hover options.
For the right container block (i.e. the container holding the picture) the settings are:
- Vertical Alignment; CENTER
- Spacing > Padding: 20 for all 4 sides.
For the image block (last block in view list) the settings are:
- Styles: choose ROUNDED option
Go ahead and hit the UPDATE button. Let’s see how it looks now.
Wow, that really pops out for the visitor to notice. Pity I still don’t have a YouTube channel LOL.
Call to Action Banner Done. What Next?
Now that we have created the Call-to-Action banner and our other shared features, such as the Author Box and the Hero Header, it’s time to start setting up the essential Pages of our website.
These include the Homepage, the Contact Us Page, the Who are We page and so on.
In the next tutorial I will show you how to build your homepage.
Remember to check out also my other WordPress Tutorials if you missed any of the previous lessons.
