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. 

When you open the Modules screen of your website's dashboard you will see a Duplicate icon at the top on the left.

Select the check box next to an existing Module and then the Duplicate button to create an exact copy.

modules duplicate

We include lots of exemplar Modules in our WYNCHCO website designs to provide you with lots of ready to use content which you can copy.

Read more: How to duplicate a Module.

Example: Create a MENU Module

modules

The NEW button is at the top left of the MODULES screen.

And can be seen in this image of exemplar MENU MODULES included with a WYNCHCO website design.

exemplar modules menu navbar

In this example we will choose MENU.

Reason:

The new Module will be used to control display of a Menu.

module manager new type

Under the MODULE tab you can:

  • Name the Module (see Title field), and in this instance
  • Choose a MENU for it to display (toggle Select Menu).

The purpose of a MENU MODULE is to display a MENU and so we need to choose one.

Note: it makes sense to use the same name for both the MENU MODULE and the MENU.

menu module tab

Also under the MODULE tab.

Choose who will be able to see the Module.

For example, the Public, only Registered Users after signing in, or only Special Users (like you) after signing in.

Toggle the Access button.

module access

Also under the MODULE tab.

By default, the Module will be visible immediately after publication.

But you can set start and end dates:

  • START PUBLISHING and
  • FINISH PUBLISHING

or choose to UNPUBLISH the Module until a later date.

Simply toggle the PUBLISHED button to unpublish the Module.

module publish dates

Finish Publishing Date

Unless you set a date then the Module will remain published until you unpublish it.

Also under the MODULE TAB.

Choose the Template Position where you want to display the Module.

And enter its name in the Position field.

module position

The POSITION MAPS which apply to WYNCHCO Template Designs can be viewed in our separate article.

Read more: Template Position Maps.

Under the MENU ASSIGNMENT tab you can assign the MODULE to be displayed when one or more Menu Links are selected.

The MODULE will otherwise not be displayed.

menu module assign links

Read more: How to assign a Module to a Menu Link.

To assign a Style Set to a Module requires adding the name of the Style Set you wish to use to the Module Class Suffix field.

To assign a Style Set to a Module requires adding the name of the Style Set you wish to use to the:

  • Module Class Suffix field, or
  • Menu Class Suffix field (in some instances when styling a Menu Module).

You will find these fields under the Advanced tab of a Module in the Extensions > Modules screen of your website's dashboard.

See image below.

menu module assign style set 

No need to reinvent the wheel

Assigning a Style Set to a Module is a higher order task.

For example, before you can add a Style Set to a Module you will need to:

  • have in mind a purpose for wanting to style the Module in a particular way, and
  • know the name of the Style Set you wish to use to achieve your goal.

It is also important to use the correct syntax when adding a Style Set name to the Module Class Suffix field.

  • Use only lowercase letters.

  • Insert a space in front of the STYLE SET name.

For this reason we include example Modules with every WYNCHCO website design.

Before creating a brand new Module, try duplicating an existing example:

  • of the same type,
  • assigned to the same position and
  • visible on the same type of devices (phone etc)

as you want for your new Module.

Read more: How to duplicate a Module.

STYLE SETS

WYNCHCO website designs include a wide range of STYLE SETS, some of which make use of CSS3 @media Queries to help you control WHEN Modules are displayed.

Others change the Look & Feel of Modules.

Visit the following link to learn more about working with STYLE SETS.

Read more: Introducing Style Sets.