Main Area Modules

Upon logging in to the site, users are greeted with the main area modules, which serve as the primary interface for navigating and accessing key functionalities. Configuring these modules effectively is essential to ensure a seamless user experience and maximize productivity. This article offers step-by-step guidance on optimizing the main area modules to enhance usability and engagement.

Accessing the Main View Area Modules Menu:

To access the Main View Area Modules settings, open the Admin Panel and navigate to Design > User Portals > Select your User Portal (or the User Portal you would like to edit) > Click the Main View Area tab at the top of the page.

Once in this menu, scroll down until you see the Select button for the Main View Area Modules.

As an administrator, laying out a structured plan for configuring the main area modules is crucial for efficient navigation and control. This strategic approach will streamline the configuration process, ensuring that the interface is organized, intuitive, and aligned with user needs. This document outlines the steps involved in structuring the main area module configuration for optimal administration.

Design and Layout options:

Upon clicking the “Select” button, the menu shown in the screenshot below will appear, where you can manage the Main View Area modules displayed within the Dashboard of this User Portal.

Click the green “Plus” symbol to create a new Main View Area Module
Click the Module drop-down to select the module type
Use the “Edit Module” button to open a popup where you can edit and configure the selected module.

You will want to "Save as Copy" for the module type which will be discussed in Creating New Modules

Enable or disable the module using the “Active” setting.
Save the Main View Area modules using the “Save” button at the bottom of the page.

The Module Height, Width, Border, Scrollbars, Title Bar, Font, and listed title can be changed within the Main View Area Module popup menu.

The Module Width setting can be used to configure how many modules are displayed on each “row” on your dashboard. Since the rows are 12 columns wide, setting the module width to “6” would allow 2 modules to be displayed at the top of the dashboard while setting the width to “3” would allow 4 modules to be displayed on each “Row”.
The Module Height setting is used to designate the height of modules on your dashboard in pixels. We recommend leaving this blank to automatically set the Module Height, or use the “Parent” setting in the screenshot above to base the height of the selected module to match the height of a “Parent” module.

In the Main View Area Popup menu, you can enable or disable parts of the design for each module, such as the Title, Border, Scrollbar, and Font after using the scrollbar on this page to view the settings to the right of the primary module settings.

Border: By default, Main View Area Modules have a minimal shadow border enabled that helps to separate Main View Area Modules from the Dashboard by giving them additional depth on the page. The “Border” setting can be used to manually enable or disable this border for individual Main View Area Modules.
Overflow Scrollbars: By default, this setting will automatically add a horizontal or vertical scroll bar to the module that allows users to shift their view of the module, though you can manually designate if the selected module used no scroll bar, a vertical scroll bar, horizontal scroll bar, or both using this setting.
Title Bar: Use this toggle to enable or disable the bar at the top of the module that displays the Title of the module.
Module Font: Use this setting to designate the Font of the text within the Main View Area module.
Title: Use this setting to configure the Title of the module displayed within the Title Bar

Creating new modules:

When creating new Main View Area Modules, they must be duplicated (copied) from an existing module, at which point the copy of the module can be reconfigured as desired as a new module separate from the original.

To duplicate a Main View Area Module, after opening the Main View Area Popup menu click the “Edit Module” button for a module of the same type you would like to duplicate (i.e, to duplicate a custom module click the “edit module” button for a custom module).

After clicking the “Duplicate” button, a copy of the Main View Area module will appear with “(copy)” added to the module title automatically. The module can then be freely edited as desired, though be sure to click “Save” after reconfiguring to finish creating the new module. If you click out of the module before saving, the progress to duplicate the original module will need to be repeated.

Please note that when creating a new Main View Area module, the new module's status is automatically set to "Unpublished", making the module hidden to all Users until its status is changed to "Published".

Saving Modules:

When editing Main View Area Modules on your instance, each of the popup menus for the Module settings needs to be saved to apply the changes to your User Portal.

For example, when editing a module, the “Edit Module” popup must be saved, followed by the Main View Area modules popup, and lastly, the User Portal to save and apply the changes to the Main View Area modules. **Reminder to save out to main admin panel**

Default Module Types:

Spacer:

This module is used to create gaps between the Main View Area modules on your instance, and cannot be edited.

Community Feed:

The Community Feed Module will display the Community Feed on your instance within this module, listing when Users Comment, post within Forums, join Community Groups, edit Community Groups, register for Community Events, and more.

When editing the Community Feed Module, the following configurations are available within the Module Settings:

Type: This setting can be used to filter the Community Feed module to show Community Group updates/messages, Social Event updates, or both via selecting “All” (default).

Limit Streams: This setting is used to configure how far back Users can scroll through the Community Feed through this module. By default this is configured to “20”, meaning the last 20 actions shown in your Community Feed will be displayed within this module.

Status: This setting is used to Publish or Unpublish this Main View Area module. Unpublished Main View Area modules do not appear for any Users on your instance and function as a method to “disable” Main View Area Modules without deleting them.

This can also be configured to automatically publish and/or unpublish the module on selected dates, allowing you to configure a module to only appear to Users within a designated time frame or after/before a specified date.

Access: This setting is used to designate which Users will be able to view this module once it is published on your Dashboard via a selected Access Level. For an overview of the process of creating and adding Users to Access Levels via User Groups, feel free to review our Help Article regarding this process here.

Language: Use this setting to designate which language this Main View Area module will be visible on. By default, this setting is configured to “All”, meaning this module would be visible to Users regardless of the language they have selected. When selecting a specific language, Users will only be able to view this module when they have the configured language selected. To configure multiple languages on your instance, feel free to review our Help Article regarding this process here.

Contact Form:

The Contact Form Module is used to display a Contact Form Page within a window on your Dashboard. These modules can be configured to display a specific Contact Form created on your instance (Create a User Contact Form), and if the Contact Form will be displayed horizontally or vertically on the page.

When editing the Contact Form Module, the Primary settings for this module include:

Form: Use this setting to select which Contact Form you would like to use within this module.

Show Form Title: Use this setting to choose to display the title of the Contact Form used for this module within the Contact Form selected for the module.

Please note that even if this setting is enabled, the Contact Form will not display the title if the “Show Title” setting is not enabled within the Contact Form’s configuration.

Form Layout: Use this setting to configure the Contact Form within this module to be displayed horizontally or vertically. Both settings will provide Users a scroll bar to view and enter information into each of the fields, though either may be preferable depending on the module height or width.

Form Background Color & Transparency: Use this setting to add a background color to the contact form within this module, and configure its transparency. By default, no color is used for the background color of the contact form module though this can be configured to match the styling of your instance.

By scrolling down in the menu shown in the screenshot provided, there are additional options to configure the design of this Contact Form within this Main View Area module.

Featured Blog Articles:

The Featured Blog Articles Main View Area Module is used to display a Category of Blogs on your instance on the Dashboard of your instance. By default, this module will only display featured Blogs on your instance and can be configured to show random blogs from the selected Category in a Carousel format.

The primary settings to configure the Featured Blog Articles Main View Area module on your instance include:

Showcase layout: This setting is used to change how the Blogs are displayed within the module and contains several different layouts. These Layouts include:

Default: Shows a single blog at a time within the module, though allows Users to switch which blog they are viewing using arrow buttons within the module.
Hero: Shows a single blog at a time within the module with the Blog Cover Image displayed within the image. This also adds a navigation menu below the Blog where Users can switch between the Blogs they are viewing within the module.
Legacy: Shows a single Blog at a time similar to the “Default” layout, though also shows a number for each Blog allowing Users to jump between each of the blogs rather than cycling through each blog to find a specific one within the module.
Multiple: Shows each of the Blogs within the selected Blog Category and their Covers/thumbnails to allow Users to select which blog they would like to read quickly.
Sidenav: Similar to the “Hero” layout, though adds the navigation menu allowing Users to select which Blog they would like to view to the right of the blogs rather than underneath.
Thumbnail: Similar to the “Hero” layout, though rather than listing the Blog names in the navigation menu under the blog, it will only display the Cover (thumbnail) for the blog for a more minimalistic design.

Total Posts to Display: Use this setting to designate how many blog posts will be displayed within this Featured Blog Posts Main View Area Module.

Category: Use this setting to designate the Category of Blog Posts you would like to display within this Main View Area Module.

There are additional settings that can be configured below the primary settings listed above which are used to configure the module to show all or only featured posts, truncate the text (how many characters are shown when previewing the Blog), enable/disable the visibility of User rating for the blogs, and more!

Featured Events:

The Featured Events Module is used to display specific Events (or all Events within the selected Categories) on your Dashboard, allowing Users to review multiple Events within the module and open the Event Details page for each where they can register for the Events if they have the required User Groups to do so.

The Primary settings for the Featured Events Module include:

Category: Use this setting to select one or multiple Course Categories that will be displayed within this module.

Featured Events Only: This toggle is used to configure this Main View Area Module to only show Featured Events under the selected Categories, or all Events.

Number of Events to display: Use this setting to designate how many Events will be displayed within the module, and how many columns across you would like to appear within the Main View Area module.

Additionally, by scrolling down in the menu shown in the provided screenshot, you can configure this module to show past Events and/or load JavaScript into the module configured within the User Portal.

Subscription Plans:

The Subscription Plans Main View Area Module is used to display Subscription Plans from one or multiple Categories on your instance to Users on your Dashboard.

The primary settings for this Main View Area Module type include:

Category: Use this setting to designate the Category of Subscription Plans displayed within this module.

Custom Content Modules:

The Custom Content modules are the most customizable Main View Area modules within your Tovuti instance, allowing both the addition of text, but also custom coding for those with experience with HTML.

The Primary settings for Custom Content Modules include:

WYSIWYG Editor: This is the primary aspect of the Custom Content module that allows for customization of this Main View Area Module. While text can be added to this Custom Content Module using the WYSIWYG editor available by clicking the (3) box in the screenshot above.

The WYSIWYG editor contains 3 tabs that allow you to manually enter text as you would with a word processing program (1: Editor), add code (2: Code), or preview what the Users will see when viewing this module on your Dashboard (3: Preview).

Additional settings for the Custom Content Module can be configured in the “Options” (1) tab shown in the next screenshot below.

Prepare Content: Enable this setting if you would like to prepare the content in this Custom Module with Joomla Content Plugins.

Select a Background Image: Use the “Select” button highlighted in the screenshot above to select or upload an image that will be used for the background image of this Custom Content module.

The selected image will then be displayed in the background behind the description/content added in the WYSIWYG editor available to configure in the “Module” tab.

This is a custom warning

Tovuti Impacted

Unlock the power of AI-generated content creation with Dizi

Reminder! Tovuti Weekly Maintenance Window!

Accessing the Main View Area Modules Menu:

Design and Layout options:

Creating new modules:

Saving Modules: