Today’s topic is,
Installing a free Joomla theme/template and exploring the layout and its usage
Yes, you are thinking right!!
I’ll show you from where you have to download this free theme and Install onto a test Joomla website. I’ll also show you how to explore the layout demonstrated by the creator of the clever theme. Clever is a Free Joomla Template under GNU/GPL Free to download software for Joomla 3.0.
Downloading a free Joomla template
There are thousands of free Joomla templates available online for free. You can download them – they will be as a ready to use package. You’ll just need to download and install and your site is applied with the new design and styles that you always desired.
By default Joomla comes with 2 cool, simple site theme:
Keeping aside those, I’ll download a free Joomla template for this tutorial. Which will be a free Premium Responsive Joomla template with premium designs and styles. Easy interface and Module positioning. You can download it from the creators website – I don’t want to mess up with copyrights the creator has on them.
Once you have downloaded the free template follow the steps as seen below:
Step1: Copy the downloaded template from downloads to a safer place into any of your safer drives.
Step2: Do not extract the zip file – when you install the template, Joomla itself will extract to the desired directory. Make sure that you do not rename the zip file as there will be many dependencies with the template name.
Step3: Logging to your already created test Joomla! site using the below interface. If you haven’t created one – Please visit my previous tutorial Installing Joomla 3.1 with XAMPP.
Step4: Once logged in – You should see a screen as seen below.
Step5: Click on the Extensions link on the top most menu link and you will see few more links dropping down.
Step6: Click on Extension Manager from the drop-down. By default the page you see is the template or module installation page.
Step7: Click on the browse button, a pop up screen will be shown asking you the path where the downloaded Clever Joomla template is copied to. Browse the drive and select the template. Once done, click on the open button.
Step8: Once the path to the Template is chosen – next, it will take back to your administrator page – where you’ll see a Upload & Install button in blue color. Click on that button and your template will be installed.
Once installation is completed – you’ll be seeing the small preview and short description as well as few links supporting the templates. Please see below screenshot.
Not finished yet!
We have just installed our favorite template. That doesn’t make your website show the new template. We have couple of steps to perform. After which – we’ll see our new template running live on your website.
As the next step – Click on the Extensions menu and then Template manager. You’ll see that your new theme/template has been listed along with the default Joomla templates.
Wait… I’ll make you happier than this.
What you have to do is – Click on the Star icon onto the right side of your theme name. See the screenshot below. Once done, the star turns Yellow. That says that your new template is been set as your default theme.
Done with that? Click on the preview website link on the top left corner.
It will take you to the website front-end where you should see your new template been displayed.
How do you feel now? Happier than before? Great!!
Now that, we’re done with the successful installation of our new Joomla! theme – I’ll move ahead and demonstrate the Layout and module positions the Clear template provides us.
Layout and module positions
Looking at the above layout demonstration – I feel its very simple and self explaining template. Every position says it own roles and responsibilities.
I’ll start with the top most positioning.
Position name: Top
According to the creator of this template – we can use this position for adding our quick contact details with a link. So that people who want to reach you can just look up the screen and get done their job.
Position name: Menu
The name itself says it. This position is exclusively made for the menu items to reside within. You can create a list of Navigation menus to fit in there.
The good thing of this template is that – It comes with stylish jQuery drop-down menu – which eases your job while you want to create multiple sub-level menus nested under the parent menus.
Position name: Breadcrumbs
People who are new to this word, watch out. Breadcrumb is a dedicated space where it store the path within your website all the way from the start to the end..
Example: Say, you have 3 main menu
Home and About pages usually won’t have sub-menus underneath them. But Services Page would definitely have few underneath!!
Say Services has 3 more sub-menus
- Graphic designing
- Web development
- Web Hosting
Again say Graphic designing has few sub-menu underneath it.
- Website design
- Flex/banner design
- Corporate visiting card designing
- Brochure designing
So, if any user want to see contents pertaining to Brochure designing – he can’t directly come to that particular page unless he has bookmarked that page or has the URL of the same.
An average user comes to the Brochure designing page like this:
- First click will be on Services main page
- Next, will click on Graphic designing
- Next, the last click will be on the Brochure designing
So, what do the Breadcrumbs do here?
Breadcrumb plays its assigned role by keeping track of the user traveled path to reach his destiny and it displays the path in textual format.
Taking the above example – You should see the breadcrumb as shown below
You are here: Services -> Graphic designing -> Brochure designing
Hope you understood well!
Position name: User1
Here you can put-up some important information’s that you want your user to catch up quickly apart from the contact details like:
- Your top selling products
- Best offers for the season
- Discounts on purchasing any of your product
The above are just numbers – you can put anything in there what you feel your user might want to look at quickly.
Position name: Content
Although, not show/highlighted demonstration Image above- It will be the Main content area, where your main content will take its place. What ever content you put in your home page, About us page or Contact page – everything will be displayed here upon visit to that particular page by your visitor.
Along with the main content area, it been accompanied by tow sidebars which are very much useful to show up additional details related to your main page or your website.
Position name: Position left
The position itself says that its aligned towards the left of your website. You can use it for:
- Secondary menu – which contains few useful links to help the visiting user.
Position name: Position Right
The position itself says that its aligned towards the Right of your website. You can use it for:
- Notifications – which contains notifications pertaining to any notifications related to the Products you sell or if an new updates or patches available for the same.
- Up coming releases – You can put contents related to your new products those are waiting to be released to create mass and publicity.
Position name: User2
Again here, you can create some more important information’s that you want your user to catch up later part of their visit to your website like:
- What the user can do next, guide him/her to purchase by giving them some cool offers.
- Show the visitor how much you care about them as well as the product once purchased etc.
Position name: Copyright
Hope you all know this – Every website should/would contain this information. You can add yours here.
Position name: Footer Menu
Position itself says again its role. It ways it can hold the menu items that comes to the footer section like:
- Terms and conditions
- Affiliate website links any
So guys, we have ended up with the tutorial on “Installing a free joomla theme“.
As the tutorial name says – It has covered all the main keywords in it:
- Installing free Joomla template
- Exploring the Joomla template layout and module positions
- Also studied how to utilize the new Joomla template to its full advantage.
Thank you for coming along with the tutorial”Installing a free joomla theme”!!
Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.