DIY Joomla! 3 One-Page site

- August 12, 2017

I have always been fascinated by the fluidity one can find with one-page web themes. While common in Wordpress, one-page web templates were not the usual in Joomla!. I put the task of understanding them, and replicating such in Joomla, on my bucketlist last year, but I did not have cause to actually do either until recently when a client asked for it.
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 SITE

The 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.

Joomla! already has functionality for modules, and each template has varied types and position names. The twist here is to be able to call the module IDs within the designated hyperlink.
By carrying out the following steps, we can make any Joomla template, behave like a one-page theme:

1. Create a module chrome

A 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

yoursitedirectory/templates/yourchosentemplate/html

Add the following code to the file:

<?php
/**
Additional template module chrome(s)
**/
defined('_JEXEC') or die;

/*
 * one page layout (output module content in one page layout)
 */
 function modChrome_onepager($module, &$params, &$attribs)
{ ?>
<div id="slot-<?php echo $module->id; ?>">
    <!-- Module content here -->
<?php  echo $module->content; ?>
<span style="margin-bottom: 5px;">&nbsp;</span>
</div>
<?php } ?>

As illustrated above, the chrome is named modChrome_onepager, the div tag is the first tag within it, and its id uses a referable value, in this case, it calls the current module's id (module->id). I added the word, 'slot-' to the name, but you can use any value or format. Add any other optional frills to the module chrome.

2. Create your modules

Set 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 menus

Go to Menus, and create external links, with the URL specified as the module names e.g. slot-22.

Add the Javascript magic

The script to use is from Paulund.co.uk and it allows a smooth scroll between the hyperlinks.

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

Search This Blog

Decades: Chunks of Time