I turned to my good friend, Google, for help, and I found an answer on Joomla Stack Exchange channel that helped a lot (Thanks Sir Rene Korss!).
BREAKING DOWN THE WONDER OF THE ONE-PAGE SITEThe concept is to
- place several modules on the home page, with different displays,
- then create hyperlinks that, when enhanced with a sprinkling of java script, scroll to those modules smoothly.
By carrying out the following steps, we can make any Joomla template, behave like a one-page theme:
1. Create a module chromeA module chrome is the shell (usually with div, span or paragraph tags), surrounding each module. While there are default module chromes within the system folder inside templates, your new template probably has its own, that make the modules display how the template creator wants them to. It's quite easy to make your own custom module chrome, but the point here is to use a referable value in the initial tag's id, that you can call up later.
See an example below:
- Create a file called modules.php in the folder
- Add the following code to the file:
2. Create your modulesSet up all the modules that will act as sections for the one-page theme. For example, let's assume that your proposed links are Home, About us, Our Services, and Contact us. Home section is the part of that the site visitor sees upon opening the site for the first time, so that's taken care of. You need to create modules for the other links, namely, About us, Our Services, and Contact us. Set them to show on the Home page, under your menu assignments.
Very important: Ensure that in each module, the module chrome you created in step 1 is selected. You can select a module chrome type under 'Advanced' tab, from the list tagged, Module Style.
3. Create the hyperlink menusGo to Menus, and create external links, with the URL specified as the module names e.g. slot-22.
ADDING A LITTLE EXTRA
- its preferable that you create your module chrome inside the systems folder, instead of inside the particular template folder. This is for occasions in which you have to change the template - the code should still work regardless of the change.
- If its not in the template already, consider adding an arrow that leads back to the top of the page, at the right hand side corner of the screen.
Want to check already-made one page Joomla! templates? Check out this collection at Evohosting.co.uk