How to Change the Joomla Homepage Layout

How to Change the Joomla Homepage Layout

A question that comes up often of new users is this:

"How do I change the layout of the content on my frontpage?

To be more specific, the question is often about how to change the content layout from Joomla's default layout. The actual layout will vary depending on the sample data you choose. However, one common layout is the 1 column leading / 2 column intro / links layout that you can see in the image below:.

Joomla Homepage Layout


The Joomla homepage is controlled by a menu link

What most new users don't realize is that when they're looking at the frontpage of their brand-new Joomla site, they're not looking at a bunch of articles randomly placed there. They're looking at Joomla's com_articles component, whic is intelligently pulling those articles in and placing them in a specific, logical arrangement. Changing this arrangement is not that difficult:

  • Log into your site's administrator. (www.yoursite.com/administrator)
  • In the main administrator menu, go to the Menus link.
  • Click on the menu with the home icon:

menu home

  • Find the menu link with the gold star. This is the menu link controlling your homepage.

home star

This menu link is controlling the homepage. The important option is "Menu Item Type" that you can see below. In this case, the homepage is a "Single Article".

homepage single article

In this example, "Menu Item Type" is using "Featured Articles":

featured articles

If you're using the "Featurd Articles" tab, click the "Layout" tab.

  • The first optiom is "# Leading Articles", which determines the number of leading articles that are displayed on the homepage.
  • The second option is "# Intro Articles", which determines the number of articles that are displayed on the frontpage view with their introductory text.
  • The third option is "# Columns", which is the number of columns in which the intro articles are displayed.
  • The last option is the "# Links", which determines the number of links that are displayed in a list of article title links after the intro articles.

The default layout is like the diagram at the top of this how-to, but you can change it to whatever you want. You can even set values to "0". For example, you can change the "# Leading" to "0", which will bump your two-columns of intro articles up to the top. Or you can set your "# Leading" to "0", "# Intro" to "10", and your "Columns" to "1" to create a more standard blog layout.

featured articles layout

Learn More About Joomla Layouts

If you still need help after this tutorial, become a member of Joomlashack University for great video tutorials.

There are also more text tutorials that can help you: