Strict Standards: Only variables should be assigned by reference in /home/aotearoa/public_html/ on line 24

Past the Point - Joomla Template setup instructions - Step 6: Home Page


Step 6: Home Page

The common page modules are now setup - these are areas of the page that appear across the website.

If you look at the Home page, or one of the internal pages such as a content page - things still look a bit empty:

Home page looking a bit empty

The homepage is made up entirely of Joomla! modules that have been assigned to specific module positions.

If you refer to the module map you will see that these positions are:

  1. 'home-slider'
  2. 'home-row-1'
  3. 'home-row-2'

Let's deal with 'home-row-1' & 'home-row-2' first...


This is the position immediately underneath the slider area. Add a module here to display your slogan, or a greeting/welcome message for example.

For this example we have created a new 'Custom HTML' module, assigned it to the 'home-row-1' position, aswell as set the 'Show Title' setting to 'No', entered a line of text set to the 'Heading 2' style, and finally assigned it to only the home page related menu items:

Home page looking a bit empty

Refresh the frontend view of your website to see your new moduel:

Welcome message displayed on home page


These modules appear beneath the 'home-row-1' position and behave in a similar way to the 'footer' modules in that the space they take up is divided by the number of modules you have assigned to this position, for example if you assign 3 modules, they will each take up a third of the space available.

In this example we've simply created 3 'Custom HTML' modules and filled them with dummy content. We've left the 'Show Title' setting set to 'Show' as we want the titles to display above each box of content:

Example of home-row-2 module

Once you've added some modules to the 'home-row-2' position, refresh the frontend view of your website:

Frontend view of home page showing home-row-2 modules


In theory, this area can be used to display anything you want.

If you want to display content in this area, assign your module to the "home-slider" module position - it doesn't have to be a slider it can be any type of module you want.

These days most people seem to want some sort of image slider / rotator / carousel on their homepage, so we'll run through a quick example of setting up an image slider...

We've tried a lot of different image slider extensions available for Joomla! and our favourite is DJ-ImageSlider for ease of use and simplicity.

We'll assume you've installed the DJ-ImageSlider component and module, if you haven't please refer to the documentation on their website.

Use the DJ-ImageSlider category manager to create a new category that you can add some slides to.

Then add some slides to the category you've just created. In this example we've created 3 slides and added them to the 'Homepage' category:

Example slides for homepage

After creating your slides switch to the Module Manager and create a new 'DJ-ImageSlider' module with the following settings:

In the Details pane:

  • set 'Title' to whatever you want, e.g. 'Homepage Slider'
  • set 'Show Title' to 'Hide'
  • set 'Position' to 'home-slider'

In the Menu Assignment pane:

  • change 'Module Assignment' to 'Only on the pages selected' then check the Home links in the Menu Selection below.

In the Basic Options pane:

  • set 'Slider source' to 'Component'
  • set 'Slides category' to the category you created above for your homepage slides
  • set 'Slide Width' to 940
  • set 'Slide Height' to 250
  • set 'Visible Images' to 1

In the Advanced Options pane: (not expanded in screenshot)

  • set 'Navigation bar vertical position' to 100
  • set 'Navigation bar horizontal position' to 10

Home page slider module settings

All going well you should now see an image slider when you refresh your homepage on the frontend:

Home page with image slider