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.

Tables

Tables in Loree help you organize content clearly using rows and columns. You can create, edit, style, and manage tables easily using both table-level and cell-level controls.

Adding a Table

Steps to create a table
  1. Open the Loree editor
  2. From the left navigation menu, go to Layout Elements
  3. Click Table
  4. The Add Table dialog opens

    Add Table options

  5. Number of rows—Choose how many rows you need
  6. Number of columns—Choose how many columns you need
  7. Include row header—Adds a header column on the left
  8. Include column header—Adds a header row at the top
  9. Table caption (mandatory) – A label shown below the table
  10. Click "Add table" button to insert it into the page.


Editing Table Content

1. Editing Text Inside a Cell
  1. Click inside any table cell.
  2. Remove the placeholder text “Insert text here.”
  3. Start typing your content directly.
  4. Supports normal text typing, rich text formatting, and inline editing.



2. Adding More Content to a Cell
  1. Click on the required table cell.
  2. Click the ➕ (Plus) icon inside the cell.
  3. The left navigation panel will open automatically.
  4. Choose the content type you want to add, such as: Text,Image,Video,Audio,Document,Divider,Icon with text,Source format,Embed URL 
  5. You can mix text and media within the same cell for richer content.



Adding and Removing Rows & Columns

Add rows or columns



  1. Hover over a cell
  2. Click the ➕ Add icon
  3. Choose one:
    Add row above
    Add row below
    Add column left
    Add column right


Notes
 These actions work relative to the selected cell.
Delete rows or columns
  1. Select a cell, row, or column
  2. Click the  Delete icon
  3. It will remove the selected structure only


Table-Level Settings (Whole Table)

When you click anywhere inside a table, a table icon appears on the left side. Click this icon to access the table-level settings options. (Refer to the below Gif for the functionality of the table setting features)
Available table settings:

Size
Space
Alignment
Color
Border
Border Behaviour
Set table width (percentage-based, e.g., 100%)

Change margin and padding space.

Align table: Left, Center, or Right
Background color for the entire table
User can change border color, width, style. 
Toggle border collapsing for cleaner or separated borders

Hide Border removes all visible borders from the table while keeping the layout and content intact.










Cell Property (Cell / Row / Column Styling):

Click a cell, then choose Cell Property from the inline mini-menu.
Selection options
  1. Select entire row
  2. Select entire column
Info
Styling applies based on what you select: Single cell , Entire row , Entire column
Cell-level controls

Space

Padding inside selected cell(s)

Color

Background color for selected cells

Font
  1. Font family
  2. Font size
  3. Font weight
  4. Font style (Normal, Italic, Oblique)
Border
  1. Border color
  2. Border width
  3. Edit each side
  4. Border styles: Solid, Dashed, Dotted, Double

Merging and Splitting Cells

Loree allows you to merge multiple cells into one or split them back whenever needed. This is useful for headings, grouped data, or layout customization.

Combine two or more adjacent cells into a single cell.
  1. Select two or more adjacent cells
  2. The inline cell toolbar appears
  3. Click the Merge Cells icon
  4.  The selected cells are merged into one larger cell
Restore merged cells back to individual cells.

  1. Click on a merged cell
  2. The inline toolbar appears
  3. Click the Split Cells icon
  4.  The merged cell is split back into original cells
  5. Each cell becomes editable again




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.  (Refer to the table below for SS)
  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. user can change the parameter % , px.

  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.  (Refer to the table below for SS)
  1. Size: The Size option enables users to customise the width and height of the space divider, allowing them 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: (Refer to the table below for SS)

  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.


Size
Space
Alignment
Line Style
Background
Icon size & colour








Container

A Container is a layout element used inside a Column to create sub-sections. It allows you to organize content more effectively by adding structure, spacing, and styling within a row.

Info
Important: To add a new row inside a column, you must use a container. This is the only supported method.

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.
  • Customization: Allows applying styles such as background colors, borders, padding, and alignment for a visually appealing layout and we have option to set a background image, duplicate the container and copy & delete.

Adding a Container

  1. Select Container from the available elements.
  2. A container placeholder appears inside the column.
  3. You can now add rows and content inside this container by clicking the + icon.


Container Mini Menu:

When you select a container, a mini menu will appears with the following options:


  1. Background image—The user can set a background image for the containers
  2. Duplicate—Create an exact copy of the container
  3. Delete – Remove the container completely
  4. Copy—Copy the container to paste elsewhere

Container Customization Options

The left-side Properties Panel allows you to customize the container layout, spacing, alignment, and appearance using the following options:

  1. Size (Width): Adjust the container width.

  2. Space - Padding (Top, Right, Bottom, Left)
    Controls the space between the container border and its content

  3. Alignment—Align content inside the container: Left, Center, Right.

  4. Border—Customize the border with below option
    Border Color – Set a border color
    Border Width – Set thickness 
    Border Style – Solid, dashed, Dotted, Double.
    Border Radius – Round the container corners
    Edit each side width individually if required

  5. Background—The user can update the background color





NotesA container allows you to add multiple rows within it, enabling structured and flexible content layouts.


Thank You!

    • Related Articles

    • Custom Elements

      Module List The Module List in the Loree Editor helps you add and display your course modules in a clean and organized way. You can choose how the modules look, arrange them in a layout, preview the result, and then add them to your content. Check ...

    • 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 ...

    • Release notes for Loree A2502.3.2

      Published on: 25/07/2025 Feature Enhancements Customize Your MCQ Options Like Never Before We are excited to introduce a new “Options” accordion in the Customize section of the MCQ interactive editor. With this enhancement, users now have greater ...