How to Improve Your Joomla! Site Design
Joomla! is often paralleled to point-and-click presentation software, such as Impress or PowerPoint, in terms of ease of use. Granted, Joomla! makes it extremely easy to build a site having no knowledge of its internal working, or even what HTML is. However, in order to build a stunning site you need a bit more than that. It’s the tricks in the web builder’s bag which determine his success, both in customer satisfaction and financial terms.
Some of the fundamental techniques for creating compelling sites is your ability to master the use of modules. Often overlooked, modules are the most practical way to integrate diverse content on a single page. Leveraging their use from mere content bearers to integral parts of your content can transform your site from boring to intriguing. The following technique has proved itself again and again in a vast array of site genres. I call it the “Faux module positions†technique.
One of the lesser known facts about modules is that the module position names are not set in stone. Even though the default template’s available positions are the ones you will see in the module editor page, the field itself is a combo box, not a drop down list. This means that if you click on the text – not the arrow pointing downwards – you can type in your own module position name. In the following example, I have created a mod_custom (“Custom HTMLâ€) module instance and assign it to the imaginary module position “foobarâ€.
But wait! Isn’t the template supposed to load and display only the positions it does know about? Well, yes, it is… but this is the point of this technique. If you create such a module it will not be displayed unless you specifically “spawn†it inside some other content. The easiest way to do so is using the “Content – Load Module†plug-in. Just edit any article and insert the magic text “{loadposition foobar}†(without the quotes). When you see the result in your site, you’ll notice that this magic text is replaced by the output of the specific module or modules, if more than one module is assigned to this position.
Creative ideas with faux module positions
Theory is nice, but I know that the reason you’re reading this is to apply it on real world sites. In the following few paragraphs I will describe four practical uses of this technique, already tested on live sites. What’s best, slight variations of them can be employed in order to achieve scores of stunning effects on your site. Just be creative!
In-line advertisements
Inserting ads within the article text will significantly improve your CTR. In your quest to ad revenue you may find a useful ally in JoomlaSpan’s ClickSafe Google AdSense module. This module makes it rudimentary to set up your Google AdSense ad blocks. You can simply set up your ad module’s parameters, assign it a unique faux module position, e.g. “articleadsâ€, then add the magic directive {loadposition articleads} just below the “read more†separator. Works wonders!
Adding an on-line, third party commenting system
This can be used services like Disqus or IntenseDebate. A small note here. All these comment systems ask you to include a JavaScript block, but Joomla! filters out JavaScript code from your “Custom HTML†modules by default. There is a hefty workaround, though.
Go to your site’s back-end Content, Article Manager menu item. Click on the Parameters toolbar button. Towards the end of the pop-up page you’ll find the “Filtering options†group. Let’s say you want your site’s Administrators and Super Administrators to be able to use JavaScript without restriction. You’ll have to select everything except Administrator and Super Administrator from the “Filter groups†with Control-click (Command-click for Mac users). Select the “Blacklist (Default)†in the “Filter type†field, then save the configuration. This is a site wide change which only needs to be made once.
In order to supply custom JavaScript to the “Custom HTML†module, you’ll have to temporarily turn off the WYSIWYG editor. If you’re using the Joomla! default editor, TinyMCE, you can do so by clicking on the “Toggle editor†button. The editor toolbar disappears and the raw HTML code is displayed, like the picture below. You can now copy and paste the JavaScript blocks from your favorite service. Easy, huh?
You can reuse this idea to integrate scores of different services, from Twitter updates (hint: they offer HTML code for a live ticker) to weather reports and from externally hosted galleries to Google Checkout shopping carts. Anything which offers integration by means of HTML and JavaScript works the same.
Attaching specific polls to specific articles
Ah, so simple, yet so effective! Just create a “Poll†module, select the poll you want from the list and assign it to a unique faux module position, e.g. “poll1â€. Then add the magic directive {loadposition poll1} inside your article, exactly where you want the poll to appear.
Assembling the perfect frontpage
This is one of my favorite uses. Instead of assigning a specific component as the site’s frontpage, I create an uncategorized article, throw a table inside it and use magic directives in each cell, loading the right mix of modules to achieve the required result. For example, I can have several per-Category “Latest News†modules to mimic a news site format, a “Syndicate†module on the bottom to supply an RSS feed, a newsletter module, a Twitter module, … The only limit to the site’s design is imagination.
Do note that it requires a lot of careful planning to make sure that you don’t end up with a “Frankensiteâ€, i.e. a page which looks like a hasty mash-up of unconnected information. Remember: you have to make do, don’t overdo it.
Debriefing
As you have noticed, there is an unlimited possibility for creative content presentation and integration using nothing but Joomla! core features. Even the in-line advertisements technique can be accomplished with the “Custom HTML†module. The power is yours. Go make a beautiful site!
About the Author
Nicholas K. Dionysopoulos is a Mechanical Engineer turned web developer. Interested in software development since his early adolescence, Nicholas became best known as the developer of JoomlaPack, the increasingly popular Joomla! site backup component. He is currently working as a freelance consultant and web developer specializing on Joomla!, running the JoomlaPack project and actively contributing to CMSmoz.com’s blog and business activities. You can also follow him on twitter @nikosdion.
