What is a Module?

joomla support cheshire manchester merseyside north west uk

A MODULE is a lightweight and flexible extension which enables you to present almost any kind of website content in a Joomla! website.

Each Module can be separately controlled so that it is only visible WHEN and WHERE you want it to be seen.

For example, when someone:

  1. selects a Menu Link,
  2. signs into your website,
  3. visits your website from a particular device (example: smartphone).

This is called assigning the Module.

In this article we cover how to assign a Module to a Position and Menu Link.

And how to determine whether the Module will be visible depending upon the device and screen size used by the visitor.

Editing Modules

Users with special permissions (Example: Administrators and Super Users) may edit Module content either after signing into the website:

  • Control Panel, or
  • Front End.

Creating new Modules

Daunted at the prospect of creating a new MODULE?

No worries.

WYNCHCO website designs include lots of exemplar MODULES which have been pre-assigned by:

  • Position, and
  • Menu Link.

Look for an existing MODULE that appears similar to one that you want to create.

Duplicate it.

And then tweak its settings as required.

We cover how to create and duplicate Modules in this article.

 

Core & 3rd Party Modules

The Joomla! CMS already contains a wide range of useful pre-installed Core Modules.

You will also find a long list of optional 3rd Party Modules created by Joomla! developers in the Joomla! Extensions Directory.

 

Getting started with Modules

 

Getting started with Modules

 

Make Joomla! CMS Security YOUR #1 Priority

joomla support cheshire manchester merseyside north west ukWe offer Joomla! coaching, help and support to businesses and organisations across Cheshire, Manchester, Merseyside, North West England & the UK.

Learn how to manage Joomla! website security.

 


How to create a Module

Here we show you how to create a NEW Module.

Whatever type of Module you want to create, the process is almost identical. 

How to create a Module

Example: A MENU Module.

 


How to duplicate a Module

Daunted at the prospect of creating a new MODULE?

No worries.

WYNCHCO website designs include lots of exemplar MODULES which have been pre-assigned by:

  • Position, and
  • Menu Link.

Look for an existing MODULE that appears similar to one that you want to create.

Duplicate it.

And then tweak its settings as required.

How to duplicate a MODULE

Sign into your website's control panel.

Select Extensions > Modules from the menu at the top of the screen.

Look for the Duplicate icon inn the row of buttons at the top of the Modules screen.

Select the check box next to an existing Module.

Next  select the Duplicate button (see image below).

An exact copy of the selected Module will be created.

modules duplicate

The Duplicate Module will appear in the list next to the original, usually with the suffix (2) in the Title 1.

All you then need to do is:

  • change its name, and
  • publish it.

There may be a couple of other adjustments to make.

1 If it is the second duplicate then the suffix will be (3).

 

FOR EXAMPLE

Why DUPLICATING MODULES makes sense

The Look & Feel of a MODULE is determined by the STYLE SETS assigned to it.

Assigning STYLE SETS can be confusing, and therefore time-consuming.

When you duplicate a MODULE you will not need to think about assigning a STYLE SET to it.

Reason: the duplicated Module will inherit the settings of the original.

This is why we include lots of exemplar MODULES in a WYNCHCO website design.

 


How to assign a Module to a Position

In other words, control WHERE it is displayed.

Published MODULES will not be visible in your website until they have been ASSIGNED to a POSITION.

In a WYNCHCO website design, the Position to which a Module is assigned will also determine WHEN it is visible, depending upon:

  • the device and
  • screen size

used by the visitor.

The Position to which a Module has been assigned will determine whether it is visible on:

  • PCs & Tablets (landscape) only, 
  • Phones & Tablets (portrait) only, or
  • ALL devices regardless of screen size.

Example: Assign a Custom Module to a Position

The process is the same regardless of module type.

In this example we refer to assigning a Custom Module.

Position Maps

The Positions in a WYNCHCO website design can be seen in two Position Maps:

  • Position Map: PCs and Tablets (landscape).
  • Position Map: Phones and Tablets (portrait).

Each Position Map also shows four Positions which may be used to display Modules on ALL devices regardless of screen size.

Control when Positions are visible

You can edit or remove a POSITION Style Set to change which device any one Position is visible on.

For example, whilst the LEFT and RIGHT Positions are by default visible only on PCs & Tablets (landscape), you can change this.

Read more: Working with POSITION Style Sets.

Create new Positions

There are two ways in which POSITIONS can be created:

  1. by editing the Template, and
  2. by using the LOADPOSITION Command.

We recommend using the LOADPOSITION Command if you want to have more control over where content is displayed within your website.

Read more: How to use the LOADPOSITION Command.

 

Preview Positions

We show how to preview Positions via the Templates screen of your website's control panel in our separate article.

Read more: How to preview Positions.

Work smarter NOT harder!

joomla support cheshire manchester merseyside north west ukWe coach, help and support managers of businesses and organisations across Cheshire, Manchester, Merseyside, North West England and the UK.

Learn how to manage a Joomla! website.


How to assign a Module to a Menu Link

In other words, control WHEN it is displayed.

The process is the same regardless of module type.

In this example we refer to assigning a Custom Module.

Example: Assign a Custom Module to a Position

 


Control Module display by Device & Screen Size

WYNCHCO website designs incorporate STYLE SETS which determine by default how your website, its

  • LAYOUT and
  • CONTENT

is presented in response to the:

  • DEVICE, and
  • SCREEN SIZE

used by visitors to view your website.

STYLE SETS

Two distinct groups of Style Set are included with a WYNCHCO website design for this purpose:

  • POSITION Style Sets,
  • and MODULE Style Sets.

POSITION Style sets

POSITION Style Sets control when any one POSITION is displayed.

For example:

  • on PCs and Tablets (landscape),
  • on Phones and Tablets (portrait), or
  • on ALL devices regardless of screen size.

Control when POSITIONS are visible by device & screen size

You can edit or remove a POSITION Style Set to change which device any one Position is visible on.

For example, whilst the LEFT and RIGHT Positions are by default visible only on PCs & Tablets (landscape), you can change this.

Read more: Working with POSITION Style Sets.

 

MODULE Style Sets

MODULE Style Sets enable you to control when any one MODULE is displayed.

For example, display a Module:

  • only on PCs, or
  • on all devices except Phones.

Separate control of any one Module in this way requires the assignment of a STYLE SET to it.

Control when MODULES are displayed by device & screen size

Learn how to use MODULE Style Sets to determine when any one Module will be displayed in response to the device and screen size used by the website visitor.

Read more: Working with MODULE Style Sets.

 

DUPLICATE Modules

Daunted at the prospect of assigning a Style Set?

No worries.

WYNCHCO website designs include exemplar content, including MODULES & BOXES with pre-assigned Style Sets.

Look for an existing MODULE that appears similar to one that you want to create.

Duplicate it.

You can then tweak its settings as required.

Read more: How to duplicate a MODULE.

 


The LOADPOSITON Command

How to display Modules inside Articles

The image shown here illustrates a MODULE being displayed inside an ARTICLE using a Custom Position.

loadposition 3

This is achieved using the LOADPOSITION Command.

The Joomla! CMS enables you to create CUSTOM Positions in addition to the ones included with your website's Template.

The CUSTOM Positions may be created inside Articles and Category introductions.

And therefore presented in the Main Body of your website i.e. between the LEFT and RIGHT sidebars.

For more information about Template Positions and POSITION MAPS, visit the link below.

Read more: Position Maps.

Two alternative methods

The LOADPOSITION Command is one of two alternative ways of presenting MODULES inside ARTICLES using Custom Positions.

We focus on it here because it is the method we prefer to use.

LOADPOSITION Syntax

The Loadposition Command syntax we use to insert the above MODULE inside this ARTICLE looks like this:

loadposition-command

In this example, the word EXAMPLE  is the name of the CUSTOM POSITION.

If you prefer to use the Loadmodule Command then simply interchange loadmodule for loadposition in the above syntax.

 

The LOADPOSITION Plugin

The Content - Load Position Plugin must be enabled for you to be able to use either Command.

This plugin is enabled by default in a WYNCHCO website design - see image below.

plugin content loadmodule

How to use LOADPOSITION Command

"To insert a module inside an article, use the  command, as follows:

  1. Create a module and set its position to any value that doesn't conflict with an existing template position. You can type in the position value instead of selecting it from the drop-down list. For example, use the position myposition.
  2. Assign the module to the Menu Items that contain the articles that you want the module to show in. You can also just assign the module to all Menu Items.
  3. Edit the articles where you want this module to appear and insert the text  in the article at the place where you want the module."

Source: docs.joomla.org.

EXAMPLES

1) Display a Module inside an ARTICLE

Follow the steps below to use the LOADPOSITION Command to publish a Module inside an Article.

2) Display a Syndication Feeds Module inside a Category Introduction

We wanted to display a SYNDICATION FEED button at the top of our JOOMLERS.UK NEWS blog.

The LOADPOSITION Command made this possible.

Read more: Syndication Feeds Module.

 

Tweak how Modules are displayed within Articles

When LOADPOSITION Command is used in a WYNCHCO website design to display one or more Modules within an Article, the first Module in a row of Modules may be slightly indented from the left.

Image shows row of Modules displayed within an Article

boxes composite

This indentation may also occur when just one Module is displayed inside an Article.

Such indentation only occurs when the relevant Module has been assigned a BOOTSRAP SIZE value of 1 - 12.

BOOTSTRAP SIZE is determined under the Advance tab when editing a Module.

Example:

loadposition bootsrap size 12 

If this indentation bothers you then you could change the BOOTSTRAP SIZE to 0.

However, instead of changing the BOOTSTRAP SIZE, we recommend you use our QUICK FIX Style Set called LOADPOSITION.

If you prefer we provide another Style Set called MARGIN-LEFT-5.

Either one when used with a Module displayed within an Article will correct the indentation.

Read more: QUICK FIX Style Sets.

Work smarter NOT harder!

joomla support cheshire manchester merseyside north west ukWe coach, help and support managers of businesses and organisations across Cheshire, Manchester, Merseyside, North West England and the UK.

Learn how to manage a Joomla! website.

 


Change the width of Modules

Use Bootstrap Size

The Joomla! CMS incorporates the Bootstrap Grid System.

WYNCHCO website designs make full use of this useful feature.

The width of most Modules in a WYNCHCO website design is determined by the Module's Bootstrap Size.

The Joomla! CMS

The default Bootstrap Size in the Joomla! CMS is 0.

We recommend changing this value when you create a new Module.

What should the value be?

Use our exemplar Modules as a guide.

You can change the Bootstrap Size under the Advanced tab of the Module screen in your website's control panel.

See image.

bootstrap size 0 default

WYNCHCO Website Designs

In a WYNCHCO website design we include lots of exemplar Modules.

Each one is assigned a Bootstrap Size.

The Bootstrap Size can be seen in the Module screen of your website's control panel under the Advanced tab.

See examples below.

Mobile Devices in Portrait View

In a WYNCHCO website design, regardless of Bootstrap Size, Modules are displayed one above the other on:

  • Phones, and
  • Tablets other than iPad (portrait).

For example

Modules published in the ABOVE position will be displayed:

  • side by side when viewed on a Tablet (landscape view), and
  • one above the other when viewed on a Tablet (portrait view).

 

Bootstrap Size and SEARCH BOXES

Bootstrap Size can be used to change the width of SEARCH BOXES.

But there is another way.

We cover both ways of changing the width of SEARCH BOXES in our separate article.

Read more: Working with SEARCH BOXES.

 

Bootstrap Size and Modules displayed inside Articles

Bootstrap Size of 1-12 can result in left indentation when applied to Modules displayed inside Articles using the LOADPOSITION Command.

We explain how to correct such indentation in our separate article.

Read more: The LOADPOSITION Command.