Layout Elements

Layout Elements

The "Layout Elements"section provides essential tools for structuring content effectively. These elements help organize and present information in a clear and visually appealing manner.

Available Layout Elements:

  1. Table: Used for displaying data in a structured grid format.
  2. Divider: Adds a horizontal line to separate sections and improve readability.
  3. Container: Helps group content elements together for better alignment and layout control.
These tools enhance the user experience by improving content organization and visual clarity.

Table

 To add a table to your content in Loree, simply navigate to the Layout Elements section and click on the Table option. A user-friendly window will appear, allowing you to specify the number of rows and columns for your table. You can also add headers and captions to customise it further, as shown below:



Once you've entered all the necessary details in the window, click the "Add Table" button. Your customised table will instantly appear in the editor, ready for you to use!

By default, the table is set to have 4 rows and 4 columns. Initially, the "Add Table" button will be inactive. Once you select a header and add a caption, the button will activate, allowing you to bring your customised table to life.

Configuring Table Settings: Rows, Columns, Headers, and Captions:

Users can now create up to 10 rows and 10 columns at once, as demonstrated below:

The caption field lets you add a descriptive title or explanation for your table, supporting characters, numbers, and special characters as needed:

The caption field does not allow empty spaces as valid input. It is specifically designed to accept characters, numbers, and special characters to ensure a descriptive title or explanation is provided for your table.








Adding Borders to Table Cell Properties:

Users can customise borders and background for table cells with great flexibility. They can:
  • Select an individual cell to apply borders and background specifically to it.
  • Select multiple cells to apply borders and background to all selected cells simultaneously.
  • Choose an entire row or column to apply borders and background across the entire selection.
By default, table cell borders are set to 0px solid #2d3b45, meaning the border will not be visible (0px thickness) and will have a color defined by the hex code #2d3b45. Additionally, the default background color for table cells is set to #FFFFFF, which is white.


Table Colors in Loree

In Loree, table styling is automatically applied based on predefined theme settings configured in the Admin Portal under Themes → Theme Colors → Table Colors. The three key color settings are:

  1. Table Header Background – Sets the background color of table headers.
  2. Table Header Text Color – Defines the text color in table headers.
  3. Table Border Color – Determines the border color of the table.

These colors ensure consistency, save time, and maintain accessibility across all tables. While users can customize tables, using theme-based defaults aligns with brand guidelines and enhances readability.

Enhanced Table Customization in Loree

Tables in Loree have been enhanced to better align with accessibility standards. You have the flexibility to choose the number of rows and columns you need, with the option to add more manually. Once a table is inserted, you can include both row and column headers, with at least one header required. Additionally, a table caption is mandatory to complete the setup.

To ensure clarity, provide descriptive header labels and fill in the content within the table. You can also manually adjust row sizes by clicking and dragging. Further refine your design by adjusting the sizing, spacing, border color, and border styles using the options available in the left-hand navigation.

Accessibility Checker for Table Content

Ensuring tables are accessible is crucial for providing an inclusive experience for all users, including those using screen readers or other assistive technologies. An accessibility checker for table content helps identify and resolve potential issues such as:

  1. Missing Headers – Ensuring that table headers (<th>) are properly assigned to define column and row labels.
  2. Proper Table Structure – Checking for logical reading order and ensuring the table is not used for layout purposes.
  3. Sufficient Color Contrast – Making sure the text and background colors meet WCAG contrast requirements for readability.
  4. Keyboard Navigation – Ensuring that users can navigate through table cells using the keyboard alone.
  5. Alternative Text for Images – If images are embedded in the table, they should include descriptive alt text.
InfoUsing an accessibility checker can help improve usability and compliance with accessibility standards such as WCAG, making content more user-friendly for everyone.

Divider

The divider feature allows users to clearly separate sections of a page using a line, spacing, or a line with an icon. Each option is customisable to fit your preferred style. The screenshots below demonstrate the divider feature and show the available options: Line, Space, and Line with Icon.

Line Divider

Selecting the Line option will insert a clear horizontal line to divide the page or content. After selecting the line, a design menu will appear on the left-hand side of the screen.


You will have 5 different customisation options for the line Divider.
  1. Size: Users can adjust the width and height of the line, which by default spans the full width of the screen. This setting can be toggled on or off, and the dimensions can be customized as needed.

  2. Space: Margin adjusts the spacing outside the row, changing its border dimensions, while Padding controls the space inside the row, shifting the content within its border. Both can be customized using pixels.

  3. Line Alignment: The Alignment option allows users to position the line on the page with three choices: Left Align, Center Align, and Right Align.

  4. Line Style: The Line Style option allows users to customize the line color using a color tool, HEX code, RGBA code, Global Color Palette, or predefined color groups. There are also four different line styles available for further customization.

  5. Background: The Background feature lets users customize the row's background color (excluding the line). Colors can be selected using HEX or RGBA codes, the Global Color Palette, or predefined color groups.


















Space Divider

Selecting the Space Divider option will insert a clear horizontal line, effectively dividing the page or content. Once selected, a design menu will appear on the left-hand side of the screen.

You will have 3 different customisation options for the Space Divider.
  1. Size: The Size option allows users to customize the width and height of the space divider, with the ability to toggle it on or off using a checkbox.

  2. Space: Margin adjusts the space outside the row, affecting its border dimensions. Padding modifies the space inside the row, shifting content within its border. Both can be customized in pixels.

  3. Background: The Background feature enables users to change the divider's color using HEX or RGBA codes. Users can also select colors from the Global Color Palette or predefined color groups.



Line With Icon

Selecting the Line with Icon option will insert a clear horizontal line to divide the page or content with an Icon in between. After selecting the line with Icon, a design menu will appear on the left-hand side of the screen, offering 5 different customisation options for the line. After adding a Line with Icon, if you wish to change the icon, simply click on the icon and select the "Replace" option. This will open the Icon Library, allowing you to choose a new icon from the available options.


You will also have four additional editing options to customise the icon:

  1. Size: Adjust the height of the icon to suit your design. This allows you to scale the icon up or down to fit the desired space.

  2. Space: Modify the padding around the icon. This allows you to control the spacing between the icon and other elements, providing better alignment or separation.

  3. Icon Color: Change the color of the icon to match your design theme. You can select any color using the color picker or input a specific HEX/RGBA code.

  4. Background: Change the background color behind the icon. This lets you create contrast by adding a colored background to the icon, enhancing its visibility or matching it with other design elements.






Container

A Container is a layout element used to group multiple content components together, ensuring better alignment, spacing, and overall structure. It acts as a flexible wrapper that helps organize text, images, videos, or other elements within a defined area.

Key Benefits of Using a Container:

  • Better Organization: Helps structure content neatly by grouping related elements.
  • Consistent Alignment: Ensures uniform spacing and positioning across different sections.
  • Responsive Design: Adapts to different screen sizes, improving the user experience.
  • Customisation: Allows applying styles such as background colors, borders, or padding for a visually appealing layout.

Using containers enhances readability and design consistency, making the content more engaging and structured.

Thank You!






    • Related Articles

    • Custom Elements

      Navigation The Navigation element in the Loree Editor allows users to create a customizable navigation bar with various styles. You can add logos, menu items, and adjust style properties like border, color, size, spacing, alignment, and background ...

    • How do I add and edit course elements?

      Learn how to effortlessly add and edit course elements in Loree Design Loree Landing Page Once Loree has been successfully configured, you can access it through Canvas Course Navigations. Simply locate "Loree" on the left-hand side navigation bar, ...

    • Interactive Elements

      Introduction In the Loree editor, H5P is available under the Interactive Elements section. It allows you to create fun and engaging content by adding more than 20 + interactive elements like hotspots, multiple-choice questions, and accordions using ...

    • External Elements

      External Tools The External Tools feature in the Loree editor allows users to seamlessly integrate and utilize third-party tools directly within Loree. By linking external tools, users can insert, add, and edit content without switching between ...

    • What's New

      Published on: 01/03/2025 New Look, Who's This? Loree Reimagined! We're thrilled to unveil a completely redesigned Loree experience! These release notes will walk you through the key changes, showing you before-and-after comparisons so you can easily ...