american car

MOT's

Discount MOT's on Friday

Service

Expert Quality Servicing

Parts

Fully Guaranteed

Customs

Customization Work Undertaken

Step 2 – Adding module positions to your Joomla Template

Now we have got the basic framework of our new Joomla Template made, we can think about what we would like our website to look like, and how we want to show that information to our visitors.

For this example we are going to have a place for a big full width image slider at the top, below that a menu, then a row of modules for some image icons to advertise our specialities. We’ll then have our main content with a right side column. Under that we’ll have another row of modules, followed by a full width call to action and a footer. Lastly we’ll have a copyright notice to protect our work.

Template Wire Frame


**Tip – Take 5 minutes out to think about what you want the final Joomla Template to look like when it’s finished. Most website designers spend a lot of time in Photoshop designing mockups and visualisations before they start the actual website. As a minimum you should sketch out a simple wire-frame for your project. On this you can make notes of colors and ideas you want for each section of the website. For this project I just used Paint, my design looks as simple as this.


During this build I won’t install any additional plugins for image sliders etc., I’m sure you already have your favourites.

But, I will use the excellent dummy content plugin from Regular Labs to populate our template and make it look real.

As we add our module positions we’ll also add some more ‘wrappers’ so we can style them independently of the others. This will give a much more modern look to the Joomla Template we are creating. It will also allow us to have some sections full width, while others only extend to the template width set in the options.

When you have mastered adding a wrapper, a row and a module. You can repeat the same process for all additional elements of your new Joomla Template. It’s that simple, the only limitation is your own imagination.

So let’s crack on and add the main image slider position.

The first thing we will do is to remove the main banner row at the top as we will make our own.

Press the RED cross to delete a section or element from your Joomla Template

If you hover over the row click on the red cross in the green section in the top left corner of that section. This will delete that row and it’s contents. Click ‘ok’ on the conformation warning that pops up. This is the same process for any element you want to remove from Template Creator CK

Next we will add a new ‘wrapper’ and place it above the existing wrapper. You will see, on the left side a selection of elements available to us. Click on the wrapper element (1) and drag it to the position you require. The template will turn blue to indicate you are in the right place. Drop it there.

Add the wrapper for your slideshow to your Joomla Template

If you like, you can assign a different name for the wrapper, by default it is ‘wrapper 1’.

Next, click on the ‘single module’ from the left side (2) and drag it into the new ‘wrapper 1’, again the background will turn blue to indicate it is time to drop the module.

Add the slideshow module position to your Joomla Template

By default Template Creator CK assigns a new module position name for each new module position you create, but it is not very intuitive, so rename it to something memorable, we shall call this one ‘slideshow’. Now, Click on ‘save’ and in the top menu, Actions – Copy/Apply Changes.

Every Joomla Template module position has a unique name

Give your module position a memorable ID

A great feature to help speed things up when you make a Joomla Template with Template Creator CK is the ability to create and edit Joomla modules right from Template Creator's dashboard. Although, for this tutorial I have used the 'traditional' method to create those modules, let's see just how easy it is to do from Template Creator's Dashboard. How you chose to make your modules is up to you.

Once you have added your wrapper and module position, just click on the 'gears' icon in the orange toolbar.

Select the gears incon to add a module directly from the dashboard

In the Pop-Up that appears click on the green 'Create New' button, the options will change.

Click on the 'Create New' button to make a new Joomla module

Select an new module type, we are going to use a 'custom module' for the slideshow position. You'll proberbly use a slide show module instead. And click the green 'Create' Button.

Select your module type and click 'Create'

In the Pop-Up window the new module will now be visable to edit, note it's position has already been entered for you. Give it a name and edit it as you would normally.

Edit your new Joomla Module

As previously mentioned, in this Joomla Template I'll make, I am just going to place an image in this module to represent a slideshow in this module position. My code looks like this

The HTML code for my Joomla module

As always, save your work.

If you chose to make your modules in the 'traditional' way, close Template Creator CK and return to Joomla’s admin area, select Extensions – Modules – New and then ‘custom module’. For this example I will just insert an image to represent a slideshow. For your example, instead of selecting a custom module, install and select a slideshow module and adjust it’s settings as you wish. It will still appear in the same place in your new Joomla Template as it does in mine.

Create the slideshow module for your Joomla Template

For the new module I am just adding an image, you will most likely add a slideshow module to this position.

Add the HTML to your Joomla module

Remember to save your work!

There's now two easy ways to create the modules for the Joomla Template you are making. Just choose your favorite method!

Now, return to your homepage URL and check your work, mine now look like this. Yours should be similar if your following along.

This is what out slideshow module looks like without any CSS applied

You should now see your image/slideshow at the top of the page. At this stage you will have to either crop and resize your image as desired, or use CSS and the settings within Template Creator CK to add some styles.

Let’s return to the Template Creator CK control panel, and tweak some of the many CSS controls you have available to you.

The first thing we will do is to make the wrapper for the slideshow full width of the screen. In the grey tool bar for the wrapper 1 click the full width button. As usual, click save then apply the changes via the button in the top menu to see your work on the front end.

To gat a full width wrapper, click the square icon in the white toolbar

As you can see your image/slideshow now takes up all the width of the screen, but it's really too big. So, we can apply a max height and a few other tweaks to make it more sensibly sized.

Slideshow position now full width in our Joomla Template

To resize our slideshow module we will set a max height of 500px and center the image in the viewport.

This is easily done by assigning a module class to the module in the modules advances options tab. Don’t forget to add a space before it! I added the CSS class  'slideshow'. Alternetivly, you could use the selector that's automatically generated for you at the same time as you created the module. In this case it was 'block1', you will still need to add your CSS to the Custom CSS file as well.

Add a new CSS class to the module in your Joomla Template

Then return to Template Creator CK and open the custom CSS file from the ‘parameters’ tab in the top menu. Add any CSS you now need in the Pop-Up that opens. I added the following to control the way the slideshow module is styled.

Custom CSS to style your module

An alternative method would be to set a background image for the module position and style that via the CSS options panel, and then publish a module to that position with some text in it. We’ll have a look at that process when we work on the top module row.

Now, we need to repeat this process, adding module positions and styling them until we achieve the desired results. If you want to keep things simple, you can just use the settings from Template Creator CK’s options panel on the left hand side of the screen. For more complex layout and styling functions you will have to use the custom CSS file.

You can add as many wrappers, rows and module positions as you need. You can also add modules that will only be shown on certain screen sizes via the responsive menu tab from the top menu.

I’ll add all the desired module positions now, you can follow mine, or chose your own layout.

Watch this video to see the finished Joomla Template module layout I made for this Joomla Template.

Let’s take a look now at the next chapter, how to add a menu and the top row of modules below the menu.

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.