How to setup layout in Joomla?

Giving users the flexibility in building any type of website is what makes Joomla famous and the number 1 choice of many professional web designers. This advantage has been reflected deeply on how Joomla manage its layout.

It may seem confusing at first, but when you have familiar with it, it’s actually logical and give you much freedom in building a website layout than any other CMS.

This article will help you make the first step on how to set up a proper layout in Joomla.

Table of Content

Understand layout in Joomla

Control Main Content area layout

Using Article display

Using Menu item type 

Customize Joomla layout

Understand layout in Joomla

If you are new to Joomla, you should take a close look at this section or you are welcome to skip if you have familiar with Joomla display system.

By default, a page layout in Joomla is constructed by 2 main parts: the main content area, and many module positions.

Each page has only 1 main content area. Usually, this area is controlled by menu items display type.

While a module position may vary pages from pages depending on how you set up the menu assignment option in each module setting.

Also, to display some small features like read more button, which takes space in your site display, you need to enable specific plugins in Joomla.

This image below can show you a simple Joomla layout in detail could look like:

Control Main Content area

As being the main part of your site layout, however thanks to the complex system yet powerful of Joomla, you can control the display or even layout of this area.

There are 2 settings that mainly control what can be shown in the main content area:

• An article display
• Menu item type

Using article display

A Joomla article or Single article menu item can be viewed as one since the layout of this area will base on the layout of an article.

In Joomla, users can use the custom fields to add more information to the default article layout. 

With the popular in use of landing page in the web design industry as well as the advanced in web building technology, now a simple article in Joomla can be transformed into a beautiful landing page easily with the help of a Joomla page builder extension.

For example, JSN Page Builder 3, a Joomla Page Builder that can function well as a Joomla editor can help you build such an amazing article/ landing page like this:

Using menu item type

As being a CMS at the core, Joomla pays much attention to how to display its contents, articles specifically. Therefore, the article menu item setting is a flexible system for Joomla users to showcase their list of articles in many different ways.

First, you need to create a Joomla menu.

Then, we will look into the details of blog layouts and list layout settings.

Blog layout

Blog layout is one of many setting options that you can configure in Category Blog, Feature Articles or List All Categories menu item. There will be a slight difference between them, however, the main setting for layouts is the same as the picture below.

• # Leading Article: Number of articles display as full-width at the beginning of the page.
• # Intro Article: Number of articles to show after the leading article. They will be divided in column
• # Columns: The number of columns in which to show the intro articles. From 1 to 3 would be normal
• # Links: Number of articles show in links. They will be displayed below the intro article.

The frontend display for blog layout with the following setting:

Learn more: How to have different Category Blog Layout for a Specific Category in Joomla.

List layout

Unlike blog layout, List Layout is quite straight forward and doesn’t have much to configure besides extra information (author, title, hits, and so on).

You can configure List Layout setting by set up a menu item type in either Category List or List All Categories.

The front-end display for category list layout:

Learn more: Display image in list layout

List All Categories

This menu item type is a special case when it both has a list layout and blog layout setting.

However, the setting is not for the menu item itself, it is for the categories that haven’t had any layout setting (or haven’t been assigned to any menu item).

When drilling down from the first page, if the categories met the condition as said above. It will take either blog layout or list layout to display depending on what you set in the categories setting. See the picture below:

Customize Joomla layout

If you have advanced skill in coding or web development, you can customize Joomla layout as you demand. You can read more about how to do that here.

However, you can avoid all the headaches and difficulty by using JoomlaShine templates, Powered by powerful Sun Framework, this tool will help you build any kind of layout within a minute through its initiative drag-and-drop system.

You can learn more about how to build a Joomla layout with JSN Template or just give it a try to see for your self.

Try JoomlaShine Template For Free