american car

MOT's

Discount MOT's on Friday

Service

Expert Quality Servicing

Parts

Fully Guaranteed

Customs

Customization Work Undertaken

Step 8 – Adding the Footer Modules to your Joomla Template

Although there are no rules set in concrete, the footer is the place to add some final information for the web-page. Maps, Menus, Addresses, Contact Forms, Logos and Website Terms and Conditions are all common footer contents.

Of course, what you choose to add to this section is up to you, but in this tutorial I’ll add a location map and the business address details to the two module positions I previously created in the Joomla Template I am making. If you need to add more columns/module positions, to the footer section to be able to use more modules then go right ahead, click on the number icon in the green toolbar and add up to 5 module positions to your Joomla Template. Or, you can drag and drop a new row completely, either above or below your current content. Remember, the background will turn blue when you can drop those new positions into place.

Adding a Google Map to our Joomla Template

The bad news is that Google Maps has started to charge for its API usage, so if you need to use a Google Maps plugin you will have to open a Google Maps account and give them your credit card details. There is a free API quota which is reasonable for a small website with only a few visitors. But if you have many visitors, your credit card could take a beating. Be warned. There are of course other options and mapping software available, so choose your favorite.

Luckily, it is possible to still use Google Maps, if you must, for free by embedding the iframe they give you to use, you won’t get full functionality with location pins or other functionality this way, but it should be OK for many people.

First, create a custom module and assign it to one of the previously created footer positions. I am going to set it to the right side of the page so I’ll use the footer-2 module position I created earlier. Add some text to the module, for testing, and click save. Go to the front end and you should see your module there.

Adding a module position to the footer in your Joomla Template

Next, head on over to Google Maps and find your location, zoom in as close as you need. Open the tab on the left side and select ‘share – embed a map – click, copy HTML’. Go back you your custom module click the source code button and paste the code between a pair of div tags. You will notice that in the iframe code there are width and height attributes. We will adjust these to suit once we have our address module active.

Click ‘save and close’ go to the front end and check your work, it should look like this.

Joomla Template with Google maps in footer

We’ll come back and style this module after we have finished the contact info in the next module.

Adding Contact Information

It sounds obvious, but adding contact info is important for any business. We’ll be adding our address, phone numbers, email our website URL and some social media icons. Open a new custom module and set its position to footer-1 so it will appear on the left hand side. Add the necessary HTML in the editor. Mine looks like this.

HTML for the contact us module in our Joomla Template

Notice I have set the ‘title to show’ in this module, as well as the Google Map module.

Save your work and reload the front page. Mine now looks like this, yours should be similar.

Contact Us module without CSS styling in our Joomla Template

We now need to start adding some CSS styles to make things look better. I’ll set some via the options for that module position in Template Creator CK’s dashboard. Some will be by adding a class to the HTML in the custom module, for the Font Awesome icons, and then CSS to the custom CSS file. As before, use your browsers console/inspect feature to play around with the CSS until you are happy with what you see. Then you can transplant these choices to the Joomla Template you are making.

All I added to the custom CSS file to style the Font Awesome icons is:

(.contact-us .fa {padding-right: 10px;})

My updated HTML for the Contact Us custom module now looks like this.

Updated contact us HTML

You can set the CSS styles for almost every part of every item via the option panel, I have set the styling for the contact us module in the ‘module contents’ tab in Template Creator CK's options panel.

Set the CSS in Template Creator's options panel

Reload the front end and check your styling for the Contact Us module.  If everything has gone according to plan your module should look like mine.

Finished CSS styles for the contact us module in our Joomla Template

We now need to adjust the size of the Google map to match our address info. Return to the Google Maps module and adjust the width and height settings to match. Be aware, that this iframe is not responsive in the true sense of the word. I changed the styling code within the iframe to this:

width="100%" height="350" style="border: 0;" max-width="600"

By giving it a width of 100% it should fill the screen without overflow on small screens, while having a maximum width on larger screens as necessary. In this example, it works fine, but you may get different results.

Save your work, and reload the front end. I have also added a little padding around the modules via the options panel to give some spacing around the footer modules.

We've nearly finished making out Joomla Template now, continue on to find out how to add the final section. 

Create your Joomla templates with Template Creator CK
image

The Boss

John Doe

image

The Mechanic

Jane Doe

image

The Salesman

Fred Stone

image

The Receptionist

Wilma Stone

FOR THIS WEEK ONLY !



GET A WHOPPING 50% OFF A FULL SERVICE

Contact Us

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

0800 123 456
https://www.agarage.com

Location Map

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