Rate for post

Joomla Positions Tutorial

Today I will introduce you more about Joomla 3 positions and how to use them.

What are Joomla Positions?

Each Joomla template has locations that appear different modules such as menu, login form, search form, and so on. It depends on which template you are using, where they are placed and their appearance.

Joomla 3 Default Template – Protostar Positions

The Protostar template has the following 9 pre-defined template positions:

Joomla Positions Tutorial

When you install Joomla with the default template Protostar and some sample data, you will see 6 of them situated on your front end in the following way:

Joomla Positions Tutorial

In the default data there is no content in the left column or space above the first post and is used by the developer to check the code or display the debugging information on the footer.

How to publish a module in a chosen position?

To add a module to the page, go to Extensions -> Module Manager.

Joomla Positions Tutorial

Now, press the green New button in the top left part of the page to add a module.

Joomla Positions Tutorial

You will see a list of the available module types. Choose to add a Search module.

Joomla Positions Tutorial

You are required to add some information to the module. Select the title and select the module shown in position -0. Click the Save Green button.

Joomla Positions Tutorial

You can now go to the front page of your Joomla and see the newly published search module in the top-right part of the site.

Joomla Positions Tutorial

How to change the position of a published module

To change the position of a module, first login to your Joomla admin page and go to Extensions -> Module Manager.

Joomla Positions Tutorial

You will see a list of modules. Find the latest Articles module and click on the name. If you are having problems, then use the search filter at the top of the table.

Joomla Positions Tutorial

On this page, locate the Position drop down menu and click on it. You will see that a list of the available positions will appear.

Joomla Positions Tutorial

Finally, click on the green Save button on the top.

Joomla Positions Tutorial

That’s it, you can now go to the front end of your website and see the Latest Article module showing in your left column.

Joomla Positions Tutorial

How to reorder modules published in the same position

You have two modules published as the search module and the newest article module. To move the search module above, go to Extensions -> Module Management.

Joomla Positions Tutorial

Now, choose position-7 from the position drop-down filter in the left column to display only the modules, published into your right column.

Joomla Positions Tutorial

Next, you need to sort that table by its order. To do this click on the Ordering tab and select Sort table by: Ordering.

Joomla Positions Tutorial

Then, simply click on the three small dots in the first column of the table and then drag-and-drop the line for the Search module, above the Latest Article one.

Joomla Positions Tutorial

Once you do that, go to the front end of your Joomla site and you will notice that the Search module has moved above the Latest Articles one.

Joomla Positions Tutorial

What happens if you change your template?

The module location is defined in the sample code and each designer can name different locations.

How to find out the available positions in the template you’re using?

To find out the name of any Joomla template location and their location is at the top of the interface. Go to Extensions -> Sample Manager.

Joomla Positions Tutorial

On this page, click on the Options button in the top menu.

Joomla Positions Tutorial

Here, switch the Preview Module Positions to Enabled and click on the Save green button in the top left part of the page.

Joomla Positions Tutorial

Finally, go to the front of your website, and add the index.php?tp=1 option at the end of your URL.  You will see an output similar than the one on the screenshot below.

Joomla Positions Tutorial

 

That’s all!!! Let’s build your website right now.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Flash Sale Get 25% OFF for your purchase on today! Coupon code: FLASHSALE25 Redeem Now
Flash Sale Get 25% OFF for your purchase on today! Coupon code: FLASHSALE25 Redeem Now