Custom Elements

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

Adding a Navigation Bar

  1. In the Loree Editor, go to the left navigation panel.
  2. Select Navigation from the Custom Elements section.
  3. Choose one of the four available navigation styles:
                  - Text Navigation - Simple text menu (Ref 1 in SS)
                 -  Left-aligned logo with text—Logo on the left, text on the right (Ref 2 in SS)
                 -  Right-aligned logo with text—Text on the left, logo on the right (Ref 3 in SS)
                 -  Both-side logo with center text - Logos on both sides, text in the center (Ref 4 in SS)
  1. Click on the desired navigation style to add it to the page.

Editing a Navigation Bar

  1. Click on the Navigation element in the editor.
  2. A pencil (edit) icon will appear—click it to open the sidebar with customization options.

Modify the navigation properties

Menu Items

Add— Click the Number of Links dropdown and select the desired count to add more text links to the navigation.

Notes
The Navigation bar includes five menu options by default.


 Remove - Click the navigation text or logo to display the delete icon, then click the icon to remove it from the navigation.

Rearrange - You can rearrange the text by clicking the forward and backward arrow icons.


Text Styles
  1. Select the text you want to modify to display the bubble menu, then use it to change the text style as desired.

Alignment, Background & Borders:


  1. Space: Adjust the spacing between navigation elements for better layout.
  2. Alignment: Change the alignment of navigation text or links as needed.
  3. Background: Customize the background color or style of the navigation.
  4. Border: Modify the border settings to enhance navigation appearance.


  1. To add a logo, double-click the logo area and image modal will appear.
  2. Select the logo you want to add 
  3. Click the "next" button and click the "Add"button to add the logo
  4. With the help of the left navigation, you can customize the logo by adjusting its size, space, alignment, background, border, and shadow.


Additional Actions


Duplicate: Clone a menu item.
Copy & Paste: Copy and reuse a menu item.
Delete: Remove an unwanted menu item.
Move Up/Down: Reorder menu items within the navigation bar.

Icon with text

The Icon with Text feature allows you to display an icon along with a heading, paragraph, or both.

Below are the customization options:
Icon with Heading: Displays an icon with a bold heading.
Icon with Paragraph: Shows an icon with a descriptive paragraph.
Icon with Heading and Paragraph: Combines an icon, heading, and paragraph for detailed information.
You can select any of these options and customize the text, font, color, and icon style as needed.


Info
You can select any of these options and customize the text, font, color, and icon style as needed

Source format

The Source Format option allows you to create a column where you can paste content without altering its original formatting. This ensures that text, styles, and structure remain the same when copied from another source..


Custom Element

The Custom Element feature allows you to save and reuse an element instead of creating a new one. 

Creating a Custom Element

After editing the column with the desired elements

  1. Click on the column to open the Selected Modal.

  2. Locate the Save Element icon and click on it to open the Save Element Modal.

  3. Enter a unique name for the custom element in the designated field.

  4. Select a category from the dropdown menu.

  5. To create a new category, click Add New Category and enter the new category name.

  6. Use the radio buttons to select a saving option:
    My Element—Saves as a private element, accessible only to you.
    Global Element—Saves as a global element, visible to everyone in the organization.

  7. Once all required fields are completed, the Save button turns blue.

  8. Click the Save button to store the custom element.

  9. A confirmation message, "Custom Element saved successfully," will appear in the top-right corner.

  10. To cancel the process, click the Cancel button.

  11. To exit the modal without saving, click the Close (X) button in the top-right corner.


Using the custom Element

Click the custom element option from the custom element section. which will lead you to the custom element modal. 
[Ref the above Screenshot]
  1. The global icon to view all globally shared elements is visible to all users across the organization.
  2. The person icon to view elements created and stored privately by you.
  3. The Share icon to view elements shared with current sub-accounts and nested sub-accounts.
  4. Multi-Selection Toggle: Use the toggle button to select multiple custom elements.
  5. Category Filter: Use the dropdown to filter elements by category.
  6. Search Bar: Locate an element quickly by entering its title.
  7. Filter: Use this filter to sort the custom elements in ascending or descending order. By default, the custom elements are sorted in the recent order.

Preview and Insert Elements

  1. Select an element from the available options.
  2. Once the element is clicked, the user can view its content through the preview option, which will appear on the right side of the page.
  3. After selecting the element, the Insert Element button will turn blue.
  4. Click Insert Element to place the selected element on your page.
  5. To cancel the action, click the Cancel button.
  6. To exit the preview, click the cross icon in the top-right corner.

The preview style depends on the current sub-account's Loree theme.


Editing, Deleting, and Sharing Elements



  1. Click the three dots next to the custom element title and select Edit.
  2. The "Edit My Element" modal will open. Click the Save & Edit button to continue editing.
  3. To cancel the process, click the Cancel button.
  4. After clicking Save & Edit, a success toast message will appear confirming the update.
  5. Once changes are made, click on the element to open the Selected Module pop-up.
  6. Click the Save Row icon to save the edited version of the element.
  7. After saving, the editor will redirect you to the Loree Landing Page.




Delete a Custom Element



  1. Click the three dots next to the custom element title.
  2. Select Delete.
  3. A confirmation modal will appear.
  4. Click Delete to remove the custom element permanently.
  5. Click Cancel to return to the custom element page.



Sharing a Custom Element



  1. Click the three dots next to the custom element title.
  2. Select the Share option to share the custom element.
  3. The "Share My Element" modal will appear.
  4. Custom elements can be shared with current sub-accounts.
  5. Select the sub-account you want to share the Custom Element with.
  6. After making your selection, click the Share button.

Info
Only private custom rows are shareable.
                                                                                                                                                             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, ...

    • Custom Row

      Getting started Introduction to custom rows The Custom Row feature allows you to save and reuse a row instead of creating a new one from scratch. This helps streamline your workflow by making it easy to save, access, and reuse rows whenever needed. ...

    • Custom themes management

      Getting started We are happy to introduce the new Theme customization feature in the admin dashboard. Admins can now easily customize their theme and apply it to multiple sub-accounts with less effort. Work flow diagram: Benefits of a Customized ...

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

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