Hello, how can we help you?

  1. Home page
  2. Return to search
  3. English
Layout > Web Interface 3.0 (EN)
8 min
Created by Beatriz Callegari on 4/12/2024 11:33 AM
Updated by Rafael Albino on 4/15/2024 9:51 AM

The Layout 3.0 is a new approach to the student interface. It represents a significant shift in menu design for student access, granting administrators the freedom to customize the environment without the need for technical support or customization.

By adopting this new Layout 3.0, a new layout configurator becomes available for administrators, a powerful tool allowing centralized management and adjustment of the student interface. With this configurator, administrators will have full control over the options available to students, enabling them to customize default settings by adding or removing access menus.

Attention: To use Layout 3.0, you must request Support to enable the feature.

After confirmation of activation by Support, a new configuration interface will be available in your environment, accessible through the Layout > Web Interface menu.




Within the configurator, there will be 3 tabs: General Settings, Interface Settings, and Advanced Settings (this last one will be available only for support users).

General Settings

In general settings, you can make some standard configurations for your environment such as the page title to be displayed in the browser, description, page icon, login screen background image, and changing the footer logo.




Page Title: It's the title displayed in the browser tab. 
Page Description: A brief description about the environment. 
Page Icon: It's the icon displayed in the browser tab. It's recommended that this image have dimensions of 18x18px in PNG format, preferably with a transparent background. 
Login Screen Background Image: Image displayed on the user's login screen in the system. The login screen image should be 1920px wide by 1080px high, in PNG or JPG format. 
Footer Logo: Logo image displayed in the footer of the system. The login screen image should be 101px wide by 18px high, in PNG or JPG format.

Interface Settings

In the interface settings, you can customize the student interface, such as header settings with logo change, menu model and organization for the student, and naming configuration for these menus.

At the beginning of the interface settings, you will be able to have a preview of how the content will be displayed to the student both in the web and mobile interfaces as shown in the image below:





Interface settings are divided into 3 steps:

  • Header
  • Menu
  • Naming Configurator

Header

The header configuration will include the logo, colors that will reflect throughout the environment, and quick access icons.





Logo: You can change the logo of your environment that is displayed in the top left corner. The image must be 240x86px in PNG or JPG format.

Environment Colors: The available colors to configure in this area will be: header, home background, menu text color, buttons, and button texts.

Quick Access Icons: Now you can add/remove quick access icons that will be displayed in the top right corner. You can click on the icon you want the student to see and drag it to "Selected Items" to display it. A maximum of 3 items can be selected. The icons and titles of these items are standardized and cannot be changed.

Menu



Menu Model

Regarding the menu, the user can choose which of the options they want to use between: horizontal, vertical, or hamburger, with different limitations between horizontal and the two vertical options.

Horizontal  Vertical  Hambúrguer



 

Horizontal: In the horizontal version, you can have 3 fixed items, not more or less than this quantity, but the sub-items can be arranged as the user wishes. These sub-items will appear in the dropdown of each menu item.

Vertical: The hamburger icon and menu items are always visible, and they can expand so that the titles are visible or use from the icons, where each one can have sub-items opening in dropdown. This menu model must have a minimum of 3 and a maximum of 6 items, not counting their sub-items.

Hamburger: Following a format similar to the vertical, but the menu items will only appear when clicking on the hamburger icon, its open version is the same as the vertical menu with visible titles.

Enable Menu Icons

You can enable the use of icons in the menu. The icons can be customizable or brought from the Material Design library, allowing the admin to bring the visual identity of their company to the platform.





Menu Organization

In this configuration, you can organize your available menus.

You can add and remove menus in your preferred column. The available items will be in the first column and can be dragged to the others, giving autonomy to organize in the most suitable way for your environment.



When organizing your menus, there is a limit for each type of menu model selected:

  • Horizontal Menu: Only 3 fixed columns to configure;
  • Vertical and Hamburger Menu: Must have a minimum of 3 and a maximum of 6 columns.

  • You can also change the column names by clicking on the edit icon provided:



    A new window will be displayed where you can make all the customizations to your menu with a different name or icon:




 

Naming Configurator:

Through the naming configurator, you can change the names related to the fixed and configurable items in the menus, and you can also add translations for other languages.



 

Recently viewed