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:

  • Table: Used for displaying data in a structured grid format.
  • Divider: Adds a horizontal line to separate sections and improve readability.
  • 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



 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.


Improved Table Accessibility and Customisation 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.

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, offering 5 different customisation options for the line.


Size
The Size options allow users to adjust both the width and height of the line that spans across the page. By default, the line spans the full width of the screen. This option can be toggled on and off using a checkbox, and both the width and height can be customised to meet the user’s desired dimensions.







Space
Margin refers to the area directly outside of the row. By adding a margin to the top, bottom, left, or right, you can adjust the spacing around the row, effectively changing its border dimensions. All margins can be customised using pixels as the unit of measurement.

Padding refers to the area inside the row, between the content and the row's border. Adding padding to the top, bottom, left, or right will shift the content within the row's border. All padding can be adjusted using pixels as the unit of measurement.




Alignment
The Alignment option helps users control the positioning of the line in relation to the page. It offers three options: Left Align, Center Align, and Right Align, allowing you to position the line according to your design preferences.







Line Style
The Line Style option allows users to change the color of the line. You can use the color scaling tool to select a color, or if the specific color is known, you can directly input the HEX or RGBA code. Users can also choose from the Global Color Palette or predefined color groups.

Additionally, there are 4 different style options that can be applied to the line, as shown in the screengrab.




Background
The Background feature allows users to change the color of the entire row background (not the line color). As shown in the screengrab below, the color red (HEX code #F30606) or the RGBA code 243, 6, 6, 255 was selected and applied to the row. Users can also select colors from the Global Color Palette or from 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, offering 3 different customisation options for the divider.


Size
The Size options allow users to adjust both the width and height of the space divider that spans across the page. This option can be toggled on and off using a checkbox, and both the width and height can be customised to the user’s preferred dimensions.





Space
Margin refers to the area outside the row. Adding a margin to the top, bottom, left, or right will adjust the space around the row, altering its border dimensions. All margins can be customised using pixels as the unit of measurement.

Padding refers to the area inside the row, between the content and the row's border. Adding padding to the top, bottom, left, or right will shift the content within the row's border. Like margin, padding is also adjustable using pixels as the unit of measurement.



Background
The Background feature allows users to change the color of the entire divider. As shown in the screengrab below, the color red (HEX code #FD0707) or the RGBA code 253, 7, 7, 255 was selected and applied to the divider. Users can also choose colors from the Global Color Palette or from 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.






Size
The Size options allow users to adjust both the width and height of the line that spans across the page. By default, the line spans the full width of the screen. This option can be toggled on and off using a checkbox, and both the width and height can be customised to meet the user’s desired dimensions.





Space
Margin refers to the area directly outside of the row. By adding a margin to the top, bottom, left, or right, you can adjust the spacing around the row, effectively changing its border dimensions. All margins can be customised using pixels as the unit of measurement.

Padding refers to the area inside the row, between the content and the row's border. Adding padding to the top, bottom, left, or right will shift the content within the row's border. All padding can be adjusted using pixels as the unit of measurement.




Alignment
The Alignment option helps users control the positioning of the line in relation to the page. It offers three options: Left Align, Center Align, and Right Align, allowing you to position the line according to your design preferences.







Line Style
The Line Style option allows users to change the color of the line. You can use the color scaling tool to select a color, or if the specific color is known, you can directly input the HEX or RGBA code. Users can also choose from the Global Color Palette or predefined color groups.

Additionally, there are 4 different style options that can be applied to the line, as shown in the screengrab.




Background
The Background feature allows users to change the color of the entire row background (not the line color). As shown in the screengrab below, the color red (HEX code #F30606) or the RGBA code 243, 6, 6, 255 was selected and applied to the row. Users can also select colors from the Global Color Palette or from predefined color groups.




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

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

    • Drag and Drop

      Drag and Drop Drag and drop functionality refers to the ability for users to click and hold on an object (such as an image, file, or element) and move it to a different location by dragging it with the mouse cursor. This interaction allows users to ...

    • Release notes for Loree A2304.6

      December 13 2023 Enhancements Enhanced preset option for Divider Previously, there were only two presets available for Divider. However, we are thrilled to announce that we have added a new and exciting enhancement called "Line with Icon." This ...