american car


Discount MOT's on Friday


Expert Quality Servicing


Fully Guaranteed


Customization Work Undertaken

Step 7 – Adding a Call to Action Button Row to your Joomla Template

A ‘call to action’ button is a must have on ALL websites, it’s a good way to encourage your visitors to take the next step, and become a paying client. As this is a Joomla Template for a Garage / Auto Shop, well encourage our visitor to click the button to contact us, by offering them a discount in some form.

We need to ‘insert’ an extra ‘wrapper’ into the Joomla Template we’ve already made. This is as simple as dragging and dropping the necessary items into the Joomla Template we are making, and naming them. Then, all we need to do is add a custom module for that position and style it accordingly.

In the video below I’ll do that, watch it to find out how simple it is to do.

We’ve now added the structure to our Joomla Template and added a new module that is set to the CTA module position. I also set the containing wrapper to full width and centered the content, but I did not set any margins at this point, we can do that later.

Adding a button in Joomla is simple, but the default buttons are a little boring! This would be a good time to use google and search for an interesting button style that would suit your website. There’s also a fair sized ‘chunk’ of custom CSS needed to style that button, but it should only be a case of copy/paste. You could, of course, style your own unique button styles specifically for your project.

I’ve chosen to use a button from Button Optimizer for my Joomla Template CTA. I’ll copy the CSS into my custom CSS file and the html code into my custom module.

CTA button CSS for your Joomla Template

**Tip – You may have to change the button ‘class’ selector in the CSS and HTML to avoid conflicts with other buttons on your website. Example ‘button to cta-btn’. This is a good idea if you have many different button styles to use, give each a unique CSS class and style them individually.

Joomla Template CTA HTML

At this stage our CTA section should look something like this, with no margins, padding or background.

So let’s add those and make our Joomla Template look stunning. First, we need to decide what background we want to use, this will depend on what text we want to add around our button. As we want this section to ‘stand out’ it’s a good idea to think about the contrasts between the button color, its background and the surrounding text color. This website offers a tool to check this. Always aim for a 'green' result.

Check website contrasts for your visitors

I’m going to set the background to nearly black, the text will be white and the button is red. While in Template Creator CK’s dashboard, I'll also add some padding. A red dashed border and some margins. I can do this all from the options panel on the left-hand side of the dashboard.

**Tip – To see your changes, it’s sometimes necessary to clear your browsers cache. Hit F12, then right click your reload button and select the option to clean the cache on reload.

To style the text in the custom module I added a class to the main div of it in the custom module, and added a little extra CSS to the custom CSS file in just the same way as before.

I added a <span> tag in the bottom sentence so I could add some focused CSS to style the '50% OFF' part of the sentence.  

As always, save, apply and check. If all has gone according to plan your CTA should look something like mine.

Joomla Template CTA

Things are looking good. In the next chapter we'll make a footer section for our Joomla Template.

Create your Joomla templates with Template Creator CK

The Boss

John Doe


The Mechanic

Jane Doe


The Salesman

Fred Stone


The Receptionist

Wilma Stone



Contact Us

A Garage Ltd.,
Any Street,
Any Town,
Any State,
Any Post Code,

0800 123 456

Location Map

Copyright © 2021 Joomla Template Maker. All Rights Reserved.
Joomla! is Free Software released under the GNU General Public License.