(For more resources related to this topic, see here.)
Up to now, you’ve set up the home page and category overview pages using the default options. But you may have noticed that Joomla offers dozens of options for these page types. Changing these options can completely alter the way content is presented. In fact, different settings can create very different looking pages.
To effectively welcome your visitors and entice them to read your valuable content, we’ll create a better home page and effective category pages. In the following screenshots, you’ll see the page types we’re talking about. The basic layout of both home pages and overview pages is similar. On the left-hand side is the example home page in the default Joomla installation, on the right-hand side is an example category overview page found via the About Joomla menu (Using Joomla | Using Extensions | Components | Content Component | Article Category Blog):
.png)
Why do you need overview pages, anyway?
Typically, Joomla will lead your site visitor to a category content in three steps. Between the Main Menu and the actual content, there’s a secondary page to show category contents. You can see how this works in the following set of screenshots:
|
A visitor clicks on a menu link. |
|
|
They are taken to an overview page with article previews inviting them to click Read more links. |
|
|
They click to read the full article. |
|
As you can see, what’s on the home page and the overview pages (and how it’s presented) is vitally important to your site. It’s the teaser texts, images, and hyperlinks on these pages that offer your visitors a first glimpse of the actual content. Of course, people don’t always arrive at your site via the home page. Search engine results might take them directly to any page— including overview pages. One more reason to make those pages as enticing as you can!
Overview page, landing page, secondary home page?
Joomla doesn’t have a name for overview pages. Among web builders they’re also known as start pages, category pages, department pages, or landing pages. Whatever you like to call it, it’s the same thing: a navigational page that provides an overview of site categories. In this book we’ll call them category overview pages.
Creating the perfect home – mastering home page layout
By default, the homepage of any Joomla site is set up to display the following items:
-
One introductory article text over the full width of the mainbody
-
Three intro texts in three columns
As we haven’t changed any of the homepage layout settings up to now, the example site homepage has the same layout.
This default setup is suited for many types of content-rich sites. But you’re certainly not limited to displaying this one particular combination of intro texts and links in the central part of the home page (the “mainbody”, as it is called in Joomla). There’s a vast amount of choices on how to display content on the home page, and what to display.
Changing the way the home page is arranged
It’s your client on the phone, telling you that—happy as they are with their new site—some CORBA staff members find the home page layout too distracting. They don’t like the newspaper look that displays the content columns in different widths. Would you be so kind as to tone things down a little? If you could quickly show them an alternative layout, that would be fine. You hang up and dive into the homepage settings.
Time for action – rearranging the layout of articles on the home page
You decide to rearrange the items on the home page. Let’s say you want a maximum of two intro texts, both in just one column. Apart from this, you would like to show a few hyperlinks to other articles that could be of interest to visitors browsing the home page. You may wonder where Joomla stores the home page settings. As we’ve seen in previous chapters, menu link settings often determine Joomla’s page output—and this also holds for the Home link in the main menu. This menu link is of a specific Menu Item Type, Featured Articles. To change the appearance of the home page, we’ll customize the Home menu link settings.
-
Navigate to Menus | Main Menu. In the Menu Manager, click on Home to enter the screen where you can edit the menu link settings.
-
Click the Advanced Options tab. In the Layout Options section, the current settings are shown as follows:
These are the “magic numbers” that determine the page lay-out. There’s 1 leading article (which means it’s displayed in full width), intro articles are shown in 3 columns, and there are 0 links to articles.
-
Change the values as follows: set # Leading Articles to 0, # Intro Articles to 2, # Columns to 1, and # Links to 4. This way just two articles will be shown in a single column and the rest of the featured articles is displayed as a set of hyperlinks.
-
Save your changes and click on View site to see the changes on the frontend. There are now two full-width intro texts. Although you have set # Links to 4, beneath the intro texts only two article links are displayed. This is because up to now only four articles have been assigned to the home page. If you’ll assign more articles to the home page, this list will grow to a maximum of four hyperlinks.
What just happened?
The settings of any menu item allow you to influence the look of the hyperlink’s destination page. By default, the Joomla Home link of the main menu is of the Featured Articles Menu Item Type. In this case, you’ve tweaked the layout options of the Featured Articles menu link to change the home page mainbody. The magic numbers of the Layout Options section are really powerful as different values can completely change the way the page content is displayed.
Have a go hero – tweak home page layout options
Joomla offers you dozens of settings to customize the home page layout. Navigate to Menus | Main Menu | Home and click the Advanced Options tab to have a look at the different option panels, such as Layout Options. First, you will probably want to set Pagination to Hide. That way, you’ll hide the pagination links (< Start Prev Next Last >) that Joomla displays when there are more articles available than can be shown on the home page as intro texts. In our example, the pagination links allow the visitor to navigate to a “second home page”, displaying the intro texts of the two hyperlinks in the More articles … list. Showing pagination links on a home page seems suited for weblog home pages, where visitors expect to be able to browse through possibly long lists of blog entries. On most other types of sites, web users aren’t likely to expect multi-page home pages.
The options for the Home link (or any other Featured Articles Menu Item Type) allow you to also control exactly what details are shown for every article on the home page. Through the menu link settings you determine whether or not you want to show the author name, publication date, the category name, and much more. These article display settings in the menu link overrule the general settings found through Content | Article Manager | Options. For a full overview of all options available for the Featured Articles Menu Item Type.
Adding items to the home page
In the More Articles … hyperlink list at the bottom of your home page, two hyperlinks are shown. That’s because only four articles are set to display on the home page. To add a couple of articles, navigate to Content | Article Manager. Add any article by clicking on the white star in the Status column to the left-hand side of the article title. The grey star changes to an orange star.
In the following example, we’ve selected a News item (CORBA Magazine Looking for Authors) to be Featured on the homepage:
Want to see what this looks like up front? Just click on View Site. The new home page item is shown at the top. All other featured items are now positioned one position lower than before. You’ll notice that the Hideous Still Lifes intro text has disappeared as this featured item has now slid down one position, to the list with article hyperlinks. This list now contains three articles instead of two.
Another way to add articles to the home page
Adding items to the home page takes just a few clicks in the Article Manager Status column. You can also add an individual article to the home page through a setting in the Edit Article screen: under Details, select Featured: Yes.
Controlling the order of home page items manually
Now that you’ve reorganized your home page layout, you’ll probably want some control over the order of the home page items. To manually set the order, first edit the Home menu link. Click Advanced Options and under Layout Options, make sure Category Order is set to No order:
Click Save & Close and go to Content | Featured Articles and set the order as desired. First, set the value of the Sort Order By select box (by default it shows Title) to Ordering. Now you can change the articles order by clicking the three vertical squares to the left-hand side of any article title and dragging the article to another position. The intro texts and links on the home page will now be displayed in the order they have in the Featured Articles screen:
What’s the use of the Featured Articles screen?
In the Featured Articles screen, you can’t—as you might have expected—assign items to the Featured status. As you’ve seen, you can assign articles to the Featured status in the Article Manager (or in the article editing screen). You’ll probably use the Featured Articles screen if you want to manually control the order of home page items, or if you want a quick overview of all featured articles. Apart from this, the Featured Articles screen allows you to publish, delete, or archive featured articles—but you can just as easily use the Article Manager for that too.
Setting a criteria to automatically order home page items
Having full manual control over the order of home page items can be convenient when you have a fixed set of content items that you want to show up on the home page, for example, when you have a corporate site and want to always show your company profile, an introduction to your products, and a link to a page with your address and contact details.
However, when your site is frequently updated with new content, you’ll probably want Joomla to automatically arrange the home page items to a certain ordering criteria. Again, you can customize this behavior by editing the Home link in the main menu. Its Layout Options allow you to choose from a wide range of ordering methods.
Time for action – show the most recent items first
The visitors of the CORBA site will probably expect to see the most recently added items on the top of the page. Let’s set the Layout Options to organize things accordingly.
-
Navigate to Menus | Main Menu and click the Home link to edit its settings.
-
Under the Advanced Options tab, you’ll find the Layout Options offering several ordering options for featured articles. Make sure Category Order is set to No order, to avoid that specific category order settings overruling the article settings you choose. In the Article Order drop-down list, choose Most recent first.
-
As the Date for ordering, select Create Date. When ordering your articles by date, you’ll probably want to display the creation date for every article. Navigate to the Article Options panel of the menu link and make sure Show Create Date is set to Show.
-
Click on Save and click on View Site. Now the most recent items are shown first on the home page:
What just happened?
You’ve told Joomla to put the most recently added items first on the home page. If you want, you can check this by opening a featured article, changing its created date to Today, and saving your changes; this article will immediately be displayed at the top in the home page layout. If you prefer to order home page items in another way (for example, alphabetically by title), you can do this by selecting the appropriate Article Order settings of the home page menu item (the Home link in the Main Menu).
The Featured Articles Menu Item Type – an overview of all options
You’ve seen that the Home menu is a link of the Featured Articles Menu Item Type. When adding or editing a Featured Articles menu link, you’ll see there are are six expandable options panels available under the Advanced Options tab, offering a huge number of customization settings. Below you’ll find a complete reference of all available options.
Dozens of dazzling options – isn’t that a bit too much?
You’ve seen them before and now they turn up again, those seemingly endless lists of options. Maybe you find this abundance discouraging. Is it really necessary to check thirty or forty options to create just one menu link? Luckily, that’s not how it works. You get fine results when you stick to the default settings. But if you want to tweak the way pages are displayed, it is worthwhile to experiment with the different options. See which settings fit your site best; in your day-to-day web building routine you’ll probably stick to those.
Layout Options
Under Layout Options of the Featured Articles Menu Item Type, you find the main settings affecting the layout and arrangement of home page items.
|
Select Categories
|
By default, the home page displays Featured Articles from all article categories. You can, however, control exactly from which categories featured articles should be shown. For example, you might want to display only featured articles from the News category on the home page, and featured articles from another category on another Featured Articles page, introducing another category. You’ll see an example of this in the section Creating more than one page containing featured articles later in this article. |
|
# Leading Articles
|
Enter the number of leading articles you want to display, that is, intro texts displayed across the entire width of the mainbody. |
|
# Intro Articles |
The number of article intro texts that you want to show in two or more columns. |
|
# Columns
|
Specify the number of columns; over how many columns should the # Intro Articles be distributed? |
|
# Links
|
The number of hyperlinks to other articles (shown below Leading or Intro Articles) |
|
Multi Column Order
|
Should intro texts in multiple columns be sorted from left to right (across) or from top to bottom (down)? |
|
Category Order
|
Do you want to organize the items on the page by category title? You might want to do this when you have many items on your home page and you want your visitor to understand the category structure behind this. If you want to order by category, set Show Category (see Article Options explained in the next table) to show; that way, the visitor can see that the articles are grouped by category. The following Category Order options are available:
|
|
Article Order
|
You can order the items within the featured articles page by date, alphabetically by Author name or Title, Most hits, and so on. If you choose Featured Articles Order, then the items appear in the order they have on the Content | Featured Articles screen. This last option gives you full manual control over the order of items on the page. Note: the Article Order is applied only after the Category Order. Article Order only has effect if you choose No Order in the Category Order box. |
|
Date for Ordering
|
If you’ve set the Article Order to Most Recent First or Oldest First, select the date for ordering: Created, Modified, or Published. |
|
Pagination
|
Auto: When there are more items available than it can fit the first page, Joomla automatically adds pagination links (<<Start <Previous 1 2 3 Next> End>>). On the home page, in many cases, you’ll probably want to set Pagination to Hide. |
|
Pagination Results
|
If pagination links are shown, Joomla can also display the Pagination Results, the total number of pages (as in Page 1 of 3). |
Article Options
The Article Options influence how articles are displayed on the Featured Articles page. For many extras you can select Show, Hide, Use Global (which means: use the settings chosen under Article Manager | Options), or Use Article Settings (use the settings chosen in the option panels of the individual articles).
The Article Options are similar to the options you can set in the general preferences for articles (Article Manager | Options. Here, you can depart from the general settings for the articles and make different choices for this particular menu item.
|
Show Title |
Display article titles or not? It’s hard to find a reason to select Hide. |
|
Linked Titles |
Should the title of the article be a hyperlink to the full article? By default this option is set to Yes. This is better for usability reasons, because your visitor can just click on the article title to read a full article (instead of just on a Read more link). It is also better because search engines love links that clearly define the destination (which article titles should do). |
|
Show Intro Text |
After the visitor has clicked on a Read more link, do you want them to see a page with just the rest of the article text (select No) or the full article including the intro text (select Yes)? |
|
Position of Article Info |
The Article Info consists of the article details, such as the publication date, author name, and so on. If these details are set to be displayed, do you want to display them above the article, below the article, or split (partly above the article and partly below it)? |
|
Show Category |
Select Show if you want to show the category name below the article title. Joomla will display the category (as shown in the following screenshot: Category: Club Meetings).
|
|
Link Category |
If the Category title is shown, should it be a hyperlink to the category? In most cases it’s a good idea to select Yes here: this provides visitors with a link to category contents with every article. |
|
Show Parent |
Select Show if you want to show the name of the main category (the parent category of the current article category) below the article title. This will look as follows:
|
|
Link Parent |
Just like the Category title, the title of the parent category can be made a link to an overview page of the main category contents. |
|
Show Author, Link Author, Show Create Date, Show Modify Date, Show Publish Date |
Do you want to show the author name (and make it a link to a page with other articles by the same author), the creation date, the date the article was last updated, and/or the date on which the article was first published? By default, many of these options are set to Show. You may want to choose Hide if you’ve got a small site or a site that isn’t regularly updated. In that case you probably don’t want to broadcast when your articles were written or who wrote them. |
|
Show Navigation |
Select Show if want to display navigation links between articles. |
|
Show Voting |
Should readers be able to rate articles (assign one to five stars to an article)? |
|
Show “Read more” |
Do you want a Read more link to appear below an article intro text? You’ll probably want to leave this set to Yes, but if the title of the article is a hyperlink, a Read more link can be omitted. Although Joomla displays the Read more link by default, many web builders just make the article title clickable and omit a separate Read more link. |
|
Show Title with Read More |
It’s a good idea to display the article title as part of the Read more text, as this will make the link text more meaningful for both search engines and ordinary visitors. |
|
Show Icons |
Joomla can show a set of special function icons with any article. These allow the visitor to print the article, or to e-mail it. Do you want to display these options as icons or text links? |
|
Show Print Icon, Show Email Icon |
Show or hide the special function icons? It’s often better to altogether hide these extras. Your visitors may want to use the print function, but any modern browser offers a print function with better page formatting options. |
|
Show Hits |
Should the number of hits per article (the number of times it’s been displayed) be shown? |
|
Show Unauthorized Links |
Do you want to show hyperlinks to articles that are only accessible to registered users, or hide these articles completely? |
The Article Options listed previously allow you to show or hide all kinds of details, such as Author, Create Date, and Modify Date. In the following image, you can see the result when most options are set to Show. Obviously, this results in too much “detail clutter”.
On a website that’s maintained by just one or a few authors, or a website that isn’t updated regularly, you might want to hide author and date details. On a home page you’ll probably also want to hide all of the special function icons (set Icons, Print Icon, and Email Icon to Hide). It’s unlikely that visitors want to print or e-mail parts of your home page content. In the following image, all extras are hidden, which leaves much more room for actual content in the same space.
Integration Options
The Integration Options are only relevant when you use news feeds (RSS feeds) on your website.
|
Show Feed Link |
The Show Feed Link option allows you to show or hide an RSS Feed Link. This will display a feed icon in the address bar of the web browser. |
|
For each feed item show |
This option allows you to control what to show in the news feed; the intro text of each article, or the full article. |
Link Type Options
The Link Type Options allow you to set the display of the menu link to this page (in this case the Home link).
|
Link Title Attribute |
Here you can add a description that is displayed when the mouse cursor hovers over the menu link to this page. |
|
Link CSS Style |
Only relevant if you are familiar with CSS and want to apply a custom CSS style to this specific menu link. If you’ve added a specific style in the CSS stylesheet, in this box you should fill in the name of that special style. Joomla will adjust the HTML and add the CSS style to the current menu Home link, as follows: <a class="specialstyle" ref="/index.php"> |
|
Link Image |
Should an image be shown in the Main Menu link next to the Home link? Menu images (icons) can make a menu more attractive and easier to scan. Following is one of countless examples from the web:
|
|
Add Menu Title |
When you use a Link Image, should the menu link text be displayed next to it? Select No only if you want a completely graphical menu, using just icons. |
Page Display Options
Under Page Display Options, you’ll find some options to customize page headings and an option to control the general design of the page.
|
Browser Page Title |
An HTML page contains a title tag. This doesn’t appear on the page itself, but it’s is displayed in the title bar of the browser. By default, Joomla will use the menu item title as the title tag. Here, you can overrule this default title. |
|
Show Page Heading |
Here you can determine if a page heading appears at the top of the page (that is, in the mainbody). By default, this option is set to No. Select Yes to show the Menu Item Title as the Page Heading. |
|
Page Heading |
If you want to customize the Page Heading (instead of using the default Menu Item Title as the heading text), enter a text here. |
|
Page Class |
This is only relevant if you want to get more control over the page design: font size, colors, and so on. Using the Page Class field, you add a suffix to the name of all CSS styles used on this page. To use this feature, you have to know your way around in CSS. |
Metadata Options
The Metadata Options allow you to add description and keywords to describe the web page’s content.
|
Meta Description, Meta Keywords, Robots, Secure |
Metadata information is used by search engines. You can add an article description, meta keywords, and enter instructions for Robots (web search engine spiders) and select whether this link should use a specified security protocol. |
Module Assignment for this Menu Item tab
Click the Module Assignment for this Menu Item tab to see links to all modules that are assigned to the current menu item. Modules in Joomla are always assigned to one or more menu items. When the visitor clicks a menu link, a page is displayed consisting of (among other things) specific module blocks. This overview of (links to) assigned modules makes it easier for administrators to jump directly from the menu item to all related modules and change their settings.
Creating more than one page containing featured articles
By default, the Featured Articles Menu Item Type is used only once on your site. All articles that have the Featured status, are shown on the homepage. This is because the Home link in the Main Menu is created using the Featured Articles Menu Item Type.
However, you can create as many Featured Articles pages as you like, each one showing featured articles from different categories. Let’s say you want to create a page called “News Highlights”, containing featured articles only from the News category. To do this, create a new menu link of the Featured Articles Menu Item Type and instead of All Categories select only the News category:
The output would be a separate featured articles page containing news highlights. To avoid the same featured news showing up on both the homepage and the News Highlights page, you would probably want to change the home page settings (currently set to show all categories) and get it to display featured articles from all categories except for the News category.
Another type of home page: using a single article
So far you’ve used Joomla’s Featured Articles layout for your site’s home page. But what if you want a completely different home page layout? That’s easily achieved, since Joomla allows you to set any menu item as the default page.
Time for action – creating a different home page
Let’s not use the Featured Articles and create a simple home page that only shows one single, full article:
-
Navigate to Menus | Main Menu. As you can see, there’s a star in the Home column of the Home link. This indicates that this is the default page; the visitor will see this page in the mainbody when accessing your site.
-
In this example we’ll select the Mission Statement menu item as the new home page. Locate this article in the list and click on the grey star in the Home column.
-
Clicking the grey star will turn its color into orange, indicating this is now the default page. Click on View Site. The results are shown in the following screenshot. An ordinary article is now the home page:
If you want to update the Main Menu to reflect these changes, you can hide the existing Home link in the Article Manager, which is still pointing to the “old” homepage. To do this, in the Menu Manager you would click on the Unpublish item icon next to the Home link and rename the existing Mission Statement menu link to Home.
What just happened?
You’ve changed the default view of the home page to a fresh look, showing one article. Of course, you can dress up such a basic home page any way you like. For some sites (a simple “brochure site” presenting a small company or a project), this may be a good solution.
The consequence of this approach is, of course, that the Featured status (that you can set in the Article Manager and in the article edit screen) no longer determines what’s published on the home page.