Getting Started

Getting Started

The "Getting Started" section provides users with essential content creation options, allowing them to add various elements to their course or project.

Available Options:

  • Text: Insert and format written content.
  • Image: Upload or embed visual elements.
  • Video: Add multimedia content for better engagement.
  • Audio: Incorporate sound or voice recordings.
  • Document: Attach and display files for reference.
  • Loree Interactive: Likely an advanced tool for interactive content creation.

This structured menu helps users easily integrate different media types, enhancing the learning experience.

Text

The Text element allows you to add text to your page, and when selected, it provides four formatting options:

  1. Header: This option adds a large, bold header, ideal for introducing sections or drawing attention to key content. It’s typically used for titles or major headings.

  2. Paragraph: This option adds regular text in a paragraph format, suitable for body content, descriptions, or any other standard text.

  3. Heading with Paragraph: This combines both a heading and a paragraph. It’s useful for structuring content where you want a title followed by a detailed explanation or information in a single block.

  4. QuoteBlock: This option is used for displaying quotes. It presents the text in a styled block, often with special formatting, to distinguish it as a quote or cited text. 

  1. Style 1 only allows for a solid border on the left side as shown in the image:

  1. Style 2 provides users the option of adding a quote icon only on one side (left) as shown in the image:

  1. Style 3 gives Loree users the option of adding a quote icon on both the left and right sides of their content as shown in the image:


Image

The Images option provides multiple pre-defined layouts to easily add images, text, or a combination of both to your page. Selecting one of these options will place the content into the chosen column. Here’s a breakdown of each available option:
  1. Banner: Adds a full-width image that spans the entire column, perfect for headers, announcements, or visually striking sections.
  2. Image: Inserts a standalone image into the column without any accompanying text, ideal for showcasing visuals.
  3. Centered Image: Places an image at the center of the column, creating a balanced and professional layout.
  4. Image with Flexi Align: Adds an image with flexible alignment options (left, right, or center), allowing for better customisation based on your design needs.
  5. Paragraph on Image: Overlays a paragraph of text directly on the image, useful for creating visually engaging banners or highlights.
  6. Image with Wrap Text: Positions an image with text wrapped around it, providing a dynamic and space-efficient layout for content and visuals.
  7. Image with Wrap Heading and Paragraph: Similar to the previous option, but includes both a heading and a paragraph wrapped around the image for a more detailed presentation.
  8. Image with Caption: Adds an image with a caption below, ideal for providing context, descriptions, or credits for the image.



After selecting an option, an image will be added to your course. You can click on the image to replace it with one of your choice. A pop-up (modal) will appear when you double click on the image or single click on the image then click on the replace option on the left side of your screen. This modal allows you to choose from existing course images, user-uploaded images, Loree’s image library, or an icon, or upload a new image using the "Click to upload a new course image" link. This feature makes it simple to personalize your design with the ideal visual elements.


Adding image

When you're adding an image, it's essential to provide a file name and Alt text. We've made it a requirement to ensure accessibility and proper labeling.

If you try to leave the Alt text box empty or only add spaces, the "Add image" button will be disabled.

You have to either include some text in the Alt text box or select "Decorative Image" to add an image as shown.

It's a small but important step to ensure your content is inclusive and informative!




Image Cropping in Loree


The Loree editor now includes an intuitive image cropping feature, allowing users to crop images into two shapes: a circle or a square. This feature makes it simple to customise images while designing pages.

Here’s how it works:

  • When uploading an image, a "Crop Image" button appears on the image.
  • Clicking the "Crop Image" button lets you choose the desired shape (circle or square) and adjust the crop area.
  • While hovering over and selecting the crop options, the selection will be highlighted in Loree blue, consistent with other elements in Loree.
To ensure that cropped images reflect correctly in Canvas, a set of CSS properties needs to be added to your Canvas themes.


Images can now be cropped with precision, allowing you to select and adjust the crop area exactly as desired. Cropped images will maintain their shape and alignment across different devices and screen sizes, ensuring a polished and professional appearance, as shown.






A Banner Image is a prominent visual element displayed at the top of a page or section. It enhances the design, provides context, and can be customized by selecting an image from the library or uploading a new one.

Image Cropping for Banner:

The image on the left shows the minimum cropping size of 50*50 for any image. 
The image crop option is not available for banner images. Instead, when a banner image that is selected is bigger in size, Icons cannot be used as a Banner Image.


Once the user selects their desired top, center, or bottom part of the banner, clicking on Apply will add the banner in the editor and provide a variety of editing options on the side as well; refer to the image:

NotesNote: The Crop Image option will only be available for images that are available for upload or in the course images. Some of the external images can’t be uploaded, therefore restricting this Crop Image option for users.



Upload New Image


The "Click to upload a new course image" option allows users to upload images in supported formats such as JPG, JPEG, PNG, GIF, and SVG. If the image size exceeds 500KB, the upload time may vary based on the user's internet bandwidth. This feature provides an easy way to add custom images to the course.

The External Link option allows users to add an image to the course by providing a direct URL instead of uploading a file. This feature is useful when using web-hosted images, reducing storage usage and ensuring easy updates.



LMS Image Upload Rules

  1. When we save a page to LMS, it will compare the image file with the name and extension first.

  2. If the name and extension are different in S3 and course files, then the file will be uploaded to the LMS course files.

  3. If the file name and extension are the same in S3 and course files, then the file will be hashed to compare the images.

  4. If the images are different after hashing, then the image file will be uploaded.

  5. If the images are the same after hashing, then the image file will be restricted to upload.

  6. The S3 images on the page while we save to LMS will only be compared with the above steps, and no images will be saved again in the LMS.

NotesNote: While checking the image name for duplication, the spaces are filled with %20, and we will remove %20 while comparing the file name while duplication; therefore, if the file name itself has %20, that will be removed while comparing, and in that case, the file with %20 and without %20 might get duplicated since we will remove %20 while comparing.

Embed Icons in Loree Editor

Loree now offers the ability to add icons while creating templates, providing more flexibility and customisation. We have updates thousands of icons in the Icon library. Here's how the feature works:

Where Icons Can Be Used:

  • Icons are accessible under the Images element in the editor but are not applicable to banners or images with text elements.
  • Special Elements also support icons. When accessing the special elements option in the editor, you’ll be able to add and customise icons.

How It Works:

  • Clicking on the Icons option within an element will display a library of icons categorized by tag names.
  • All icons are provided in SVG format for scalability and quality.
  • The Icon Library 
    includes a search filter, allowing you to quickly find specific icons. Icons based on tags or search terms will load within five seconds.


Customisation Options:

Once an icon is added, you can customise the following properties:

  • Size: Adjust the dimensions of the icon.
  • Space: Modify the spacing around the icon.
  • Alignment: Align the icon within the element.
  • Icon Color: Change the icon's color.
  • Background: Add or adjust the background color.
Notes
Important Note: To ensure icons are displayed correctly in the LMS, specific CSS updates are required.

Videos

Videos are easily uploaded to the page, and similar to images, Loree allows users to choose from predefined layouts to assist in completing the page. See below for a screenshot of the layout, and options:

Open image-20220317-195501.png
Open image-20220315-203157.png

Selecting the video will give you four options as detailed below:


Video



Paragraph on Video:


Use this option to upload a video with Text on it.



Video With Paragraph:


Use this option to upload a video with Text aligned parallel to it.




Video with Heading and Paragraph:


Use this option to upload a video with a Heading and Paragraph text parallel to it.

After selecting an option, a video will be added to your course. You can click on the video to replace it with one of your choice. A pop-up (modal) will appear when you click the replace option on the left side of your screen. This modal allows you to choose from existing course videos, user-uploaded videos, or upload a new video using the "External Links" option you can insert a link to a video (YouTube, Vimeo, or other external links). After updating the link click next, then give a title to your video and click on Replace to add a Video to your course.



Audio

After selecting audio option you will get a popup modal, This modal allows you to choose from existing course audios, user-uploaded audios, or upload a new audio using the "External Links" option.




After updating the link click next, then give a title to your audio and click on add too add a audio to your course.

Document

After selecting Document option you will get a popup modal, This modal allows you to choose from existing course Documents, user-uploaded documents, or upload a new document using the "External Links" option.



After entering the title and URL (external link), you’ll need to choose whether the document should open in a new tab or the same tab. Once you’ve made your selection, simply click Add to include the document in your course.




Loree Interactives:

Loree Interactive content engages its consumers by requiring active participation. This type of content fosters better interaction between the creator and the audience, making learning easier and more interesting. It presents concepts in an engaging and interactive way, transforming the individual from a passive viewer into an integral part of a dynamic, two-way experience.

Refer to the Image below:

To access Loree Interactives, select it from the left-hand side menu, as shown in the screenshot below:


After selecting Loree Interactives, a new left-hand side menu will appear with the following options:


Choosing "Create New" will take the user to the dashboard pop-up (modal), as shown below:

Loree Interactives Dashboard:

The Loree Interactives (LI) dashboard features nine interactive components: Accordion, Tab, Button, MCQ, Click & Reveal, Flip Card, Video/Image Slider, Drag and Drop, and Image Hotspot. Users can easily create a component by clicking the "Create" button.
Accordion
An interactive accordion is a popular UI element in web design and development, featuring vertically stacked collapsible panels. Each panel has a clickable title or header that expands to show additional content. This design allows users to efficiently navigate information, accessing only the sections they need while keeping the interface neat and organized.

Refer to the Image below:

How to create an Accordion:
To create an accordion, follow these steps:
  1. Click on the "Create" button located in the accordion section.
  2. You will be redirected to the page mentioned below, where you can start building your accordion.



Once the form is open, you'll find the following fields to fill out:
  1. Interactive Title: Input a title or name for the interactive accordion.
  2. Section Header Title: Enter a title for each section, which can be expanded or collapsed by users.
  3. Section Body: Input content to be displayed when the section is expanded.

Add Section for Accordion

  1. The Accordion form has collapsible sections. To add a new section, click 'Add Section' and a + icon will appear on the section line stating to add a section below. Refer to the images.
  2. After adding a section, users can easily move it to their desired location using the arrow icons displayed in the image.
  3. To delete a section, click the 'Delete' icon on the Section Line, confirm the deletion by selecting 'Remove.'.
    selectedImg



Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).
Customise Options: Customisation options allow for users to personalize and adjust visual aspects like fonts, colors, styles, and spacing to fit preferences or branding. They improve appearance and usability to meet user requirements, with options for Section Headers, Borders, and Icons provided.


  1. Section Header: Users can customise section header appearance by modifying Font Family, Font Style, Font Size, Font Weight, Alignment, Margin (px), Font Color, Background Color.
  2. These options provide flexibility to create visually appealing and well-organized section headers that suit the overall design and readability of the content.




  1. Border: A border outlines and separates content, adding structure and enhancing appearance. You can customise its color and thickness, and choose from different border styles. The border radius allows for rounded edges.




  1. Icon: Icons represent a dropdown interface with two types: Arrows and Plus/Minus radio buttons.


Preview:
The PREVIEW option has been conveniently placed in the far right corner of the form section for all the interactives.


THANK YOU!
Tab
The primary goal of Tabs Interactive is to present users with a grouped view of related data—which in turn allows content builders to modularize groups of information in a compact manner, saving valuable screen real estate.

Refer to the Image below:


How to create Tabs Interactive:

To create a Tabs interactive, follow these steps:
Click on the "Create" button located in the Tabs interactive section.
You will be redirected to the page mentioned below, where you can start building your Tabs interactive.


Once the form is open, you'll find the following fields to fill out:
  1. Interactive Title: Input a title or name for the Tabs interactive.
  2. Section Header: Enter a title for each section, which can be expanded or collapsed by users.
  3. Section Body: Input content to be displayed when the section is expanded.



Add section for Tabs Interactive:
  1. The Tabs interactive form has collapsible sections. To add a new section, click 'Add Section' and a + icon will appear on the section line stating add section below. Refer to the images.
  2. After adding a section, users can easily move it to their desired location using the arrow icons displayed in the image.
  3. To delete a section, click the 'Delete' icon on the Section Line, confirm the deletion, by selecting 'Remove'.

 


Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).

Customise Options: Customisation options allow for users to personalize and adjust visual aspects like fonts, colors, styles, and spacing to fit preferences or branding. They improve appearance and usability to meet user requirements, with options for Section Headers, Borders, and Icons provided.

Section Header: 

The section header customisation options allow users to tailor the appearance of headers or titles within their content: font family, font style, font size, font weight, alignment, font color, active tab background color, inactive tab background color, separator color, and separator size.

Customise headers for visually appealing and organized content presentation




Border: A border outlines and separates content, adding structure and enhancing appearance. You can customise its color and thickness and choose from different border styles. The border radius allows for rounded edges.


Preview:

The PREVIEW option has been conveniently placed in the far right corner of the form section for all the interactives.

THANK YOU!
Button
A Button interactive is a clickable element in a user interface that triggers an action, such as dialogs, modal windows, forms, cards, and toolbars. It provides a straightforward way for users to interact with the application.

Refer to the Image below:
     

How to Create a Button Interactive:

To create a Button Interactive, follow these steps:
  1. Click on the "Create" button located in the Button Interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Button Interactive.




Once the form is open, you'll find the following fields to fill out:

Interactive Title: Input a title or name for the Button interactive.

Button Name: Each interactive Button has a clickable name that can expand or collapse to show or hide more content.

Button Link: A button link combines the look of a button with the functionality of a hyperlink, allowing navigation to different pages or sections within an app or website. It can open the linked content in a new tab or the same tab, using radio buttons.


Customise Options:
  1. Customisation options allow users to personalize and adjust fonts, colors, styles, and spacing to suit preferences or brand needs, enhancing appeal and usability.
  2. For Button interactives, options include types, alignment, padding, font family, size, color, and background for emphasis and readability.






Preview:

The PREVIEW option has been conveniently placed in the far right corner of the form section for all the interactives.

THANK YOU
Multiple Choice Question
A Multiple Choice Question (MCQ) interactive is an educational tool or assessment format where users engage with questions presented in a multiple-choice format. Participants are typically provided with a question or problem statement along with a list of possible answers, from which they select the correct option. This interactive format is widely used in online learning platforms, quizzes, and exams to test knowledge, comprehension, and retention efficiently. It allows for immediate feedback on correct or incorrect responses (to the learner in that moment only), aiding in learning reinforcement.

Refer to the Image below:


How to create MCQ Interactive:
To create a MCQ interactive, follow these steps:
  1. Click on the "Create" button located in the Multiple Choice Question interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Multiple Choice Question interactive.



Once the form is open, you'll find the following fields to fill out:

Interactive Title: This is where you enter a title or name for your MCQ interactive. The title typically appears prominently at the top or serves as a label for the entire set of MCQ interactive.

Question: In the Question section, formulate your questions using a bubble menu with options to add tables or upload images directly. MCQ interactive sections require a clickable Question that expands or hides additional content.

Options: The Options section streamlines the creation and organization of answer choices with a user-friendly bubble menu. Multiple options can be easily added, and tips can be included for student support. The correct answer can be indicated with a checkbox, and feedback can be displayed upon selecting the "Show Feedback" option. The "Check Answer" button verifies correctness, and the "Get Results" button presents overall scores. The delete icon allows for the removal of any unwanted options, but a minimum of two options per question is required. This section allows for the inclusion of text, images, links, and other relevant information to enhance user understanding.






Add Section for MCQ Interactive:
  1. MCQ form comes with collapsible sections. You can easily add a section by clicking on the 'Add Section' button, that allows the users to add a section immediately below the existing one. As soon as a new section is added, a + icon will be reflected on the Section Line stating ' Add Section Below'.
  2. Once a section is added, users can move a section up or down and place it above or below their desired section instead of dragging a section manually using the up or down arrow icons.
  3. An added section can be deleted easily by clicking the 'Delete' icon that lies on the Section Line. Once this icon is clicked, the 'Remove Section' window pops up asking for confirmation to delete the section, and clicking on the 'Remove' option then deletes the particular section.
selectedImg
selectedImg
Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).
Customisation options allow users to personalize and adjust aspects such as fonts, colors, styles, and spacing to suit specific preferences or branding needs. They enhance visual appeal and usability, ensuring content or interfaces meet diverse user requirements effectively. We have provided the following customisation options: Progress Bar, Section, Button, Question Type, Body Border, Behavioural Setting.

Progress Bar:
  1. Our progress bar can be customised to have a background color and text of your choice.
  2. You can also change the font, with access to the same fonts in both Loree and Loree Interactive for consistency.
  3. Simply select the desired font from the dropdown menu shown in the image.
  4. Additionally, you can adjust the font style (e.g., normal, H1, H2, etc.), size (6-72 in dropdown), weight (normal, bold, lighter), and alignment (left, center, right) of your section headers.
  5. You can also define the margin around the section header in pixels.
  6. To change the color of your text or background, you can use the color palette provided. Alternatively, you can enter specific Hex or RGBA codes for more precise customisation.




Section:
  1. Within this section option, you have two choices: Background and Option Background.
  2. The Background option is used to change the background color of the question section, while Option Background is used to adjust the color of the option section. 
  3. You can select colors from a palette or input specific Hex or RGBA codes to achieve the exact customisation you desire.


Button:
  1. The "Button Customise" options include settings for style, alignment, padding, font family, font size, font color, and background color.
  2. These options allow users to choose the appearance of the button text and background, including spacing, font style, and color. Users can customise these settings using a dropdown menu or by inputting specific codes.





  1. Question Type: When customising the question type, we support two options: single select and multi select.

  2. Single Select: Allows users to choose only one answer from the provided options. This is typically used for questions where only one correct answer exists.

  3. Multi Select: Allows users to choose multiple answers from the provided options. This type is suitable for questions where there can be more than one correct answer.

  4. These options provide flexibility in designing quizzes, assessments, or surveys, accommodating different types of questions and answer formats as per the user's requirements.



  2. Body Border: The "Body Border" option in customisation typically refers to the ability to modify the border settings around the main content. Here are some common customisation options for the body border:
  3. Border Style: Choose from options such as solid, dashed, dotted, double, etc., to define the style of the border.
  4. Border Color: Specify the color of the border.
  5. Border Radius: Set the curvature or roundness of the corners of the border, useful for creating rounded corners.
  6. Padding: Define the space between the border and the content inside it.





  1. Behavioural Setting: Behavioral settings typically refer to functionalities that affect how questions and answers are presented and interacted with. Here are explanations of common behavioral settings:
  2. Check Answer Option: This setting allows users to verify if their selected answer is correct. It's often used in quizzes or tests to provide immediate feedback on correctness.
  3. Retry Option: Enabling this option allows users to attempt a question again after reviewing feedback or corrections. It's useful for reinforcing learning and improving comprehension.
  4. Shuffle Order: This setting randomizes the order in which questions or answer options appear each time the assessment is taken. It helps prevent memorization of sequence-based answers and ensures fairness.







Preview:
The PREVIEW option has been conveniently placed in the far right corner of the form section for all the interactives.

THANK YOU
Click & Reveal Interactive
Click & Reveal interactive elements let users click on an item to uncover hidden content. This feature helps manage screen space effectively and offers an engaging way to access additional information.

Refer to the Image below:

How to create Click & Reveal Interactive:

To create a Click & Reveal Interactive, follow these steps:

  1. Click on the "Create" button located in the Click & Reveal Interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Click & Reveal Interactive.




Once the form is open, you'll find the following fields to fill out:

  1. Interactive Title: Enter a title for your Click & Reveal interactive, prominently displayed or serving as a label.
  2. Click Content: Interactive element users click to trigger actions or reveal additional information.
  3. Reveal Content: Information visible after interacting with click content, enhancing user experience with supplementary details or functionality.






Add Section for Click & Reveal
  1. Click the 'Add Section' button to add collapsible sections below existing ones in the Click & Reveal form.
  2. A + icon appears on Section Line to 'Add Section Below' for adding new sections.
  3. Use up or down arrow icons to move sections instead of dragging.
  4. Click the 'Delete' icon on the Section Line, confirm in the 'Remove Section' window, then click 'Remove' to delete.
selectedImg

selectedImg

Please Note: Whenever a new section is added, by default, it will be directly reflected instead of navigating to the previous section.

Customise Options:

Personalize fonts, colors, styles, and spacing to enhance visual appeal and usability for Click & Reveal Interactive.
      
Click Content

Includes options for Padding (px), Border color, Border (px), Border radius, and Background color.

Highlight key information and make a memorable impression with the following customisation options:

  1. Padding (px): Space inside an element's border, enhancing layout and readability with pixel measurements.
  2. Border Color: Customise border color to highlight content, using a palette or specific Hex/RGBA codes.
  3. Border (px): Specifies border thickness or width with options like Solid, Dashed, Dotted, Double, Groove, and Ridge.
  4. Border Radius: Adjusts curvature of border corners for a softer visual appearance.
  5. Background Color: Changes background color behind text to improve readability and emphasize content, accessible via color palette or Hex/RGBA codes.






Reveal Content

Includes options for Padding (px), Border color, Border (px), Border Style, Border radius, and Background color.

Highlight key information and make a memorable impression with the following customisation options:

  1. Padding (px): Space inside an element's border, enhancing layout and readability with pixel measurements.
  2. Border Color: Customise border color to highlight content, using a palette or specific Hex/RGBA codes.
  3. Border (px): Specifies border thickness or width with options like Solid, Dashed, Dotted, Double, Groove, and Ridge.
  4. Border Radius: Adjusts curvature of border corners for a softer visual appearance.
  5. Background Color: Changes background color behind text to improve readability and emphasize content, accessible via color palette or Hex/RGBA codes.





Preview:

The PREVIEW option is conveniently located in the far right corner of the form section for all interactive elements, allowing easy access for reviewing your changes.

THANK YOU
Flip Card
Flip card interactive elements are user interface components that flip to reveal additional content when clicked or hovered over. They provide a dynamic way to present information, combining both front and back content areas to maximize space and engagement.

Refer to the Image below:







How to create a Flip Card Interactive:


To create a Flip card interactive, follow these steps:
  1. Click on the "Create" button located in the Flip card interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Flip card interactive.




Once the form is open, you'll find the following fields to fill out:

  1. Interactive Title: Enter a title for Tabs interactive, prominently displayed at the top or as a set label.

  2. Front View: The initially visible side of a flip card displaying a summary or engaging visual to attract and interact with users.

  3. Back View: Revealed upon flipping, it offers detailed info or additional content like text, images, links, or multimedia for deeper understanding or user actions.

Add Section for Flip Card:

  1. Add sections below existing ones in Flip card form using the 'Add Section' button.
  2. An A+ icon appears on the Section line upon new section addition for adding sections below.
  3. Use up or down arrow icons to reposition sections above or below desired locations in Flip card form.
  4. Click the 'Delete' icon on Section Line to remove sections; confirm in the 'Remove Section' window, then click 'Remove.'.

selectedImg
selectedImg
Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).

Customise Options:

  1. Personalize fonts, colors, styles, and spacing to suit specific preferences or branding needs.
  2. Enhance visual appeal and usability, meeting diverse user requirements effectively.
Card Type

Customise the appearance of your cards, including their type, number per row, and event interactions, to match your page's aesthetics.

Type: Select either Square or Portrait for the card shape.

Number of Cards per Row: Choose how many cards to display per row, with options ranging from 1 to 4, to ensure optimal visual organization.

Event Options: Configure interactions such as hover effects or click actions to enhance user engagement.


Card Front

Enhance the front of your card to create engaging initial views that capture attention and encourage interaction. Highlight key information and make a memorable impression with the following customisation options:

Padding (px): Adjust the space inside the element's border to improve layout and readability using pixel measurements.

Border Color: Customise the border color to highlight the content section, using a palette or specific Hex/RGBA codes.

Border (px): Specify the border thickness or width, with styles such as Solid, Dashed, Dotted, Double, Groove, and Ridge.

Border Radius: Adjust the curvature of the border corners for a softer visual effect.

Background Color: Change the background color behind the text to improve readability and emphasize content, selecting from a color palette or Hex/RGBA codes.

Card Back

Enhance the card back in flip cards to provide detailed information or additional content, enriching user interaction and understanding. Customise the card back with the following options:

Padding (px): Adjust the space inside the element's border for better layout and readability.

Border Color: Use a color palette or specific Hex/RGBA codes to customise the border color and make it stand out.

Border (px): Specify the border thickness with styles like Solid, Dashed, Dotted, Double, Groove, and Ridge.

Border Radius: Adjust the curvature of the border corners for a softer visual effect.
Background Color: Change the background color behind the text to enhance readability and emphasis, using a color palette or Hex/RGBA codes.

Preview:
The PREVIEW option is conveniently located in the far right corner of the form section for all interactive elements, allowing easy access for reviewing your changes.

THANK YOU
Image/Video Slider
An image/video slider is a dynamic user interface element commonly found on websites, featuring a carousel or slideshow format to display multiple images or videos in a single area. It allows users to view content sequentially through navigation controls like arrows or dots, with options for automatic or manual transition between slides. Sliders are versatile for showcasing products, portfolios, or promotional content, offering visual engagement and enhancing the user experience with responsive design.

Refer to the Image below:

How to create Image/Video Slider:

To create an Image/Video Slider, follow these steps:
  1. Click on the "Create" button located in the Image/Video Slider section.
  2. You will be redirected to the page mentioned below, where you can start building your Image/Video Slider.



Once the form is open, you'll find the following field to fill out,

  1. Interactive Title: This is where you enter a title or name for your Image/Video Slider. The title typically appears prominently at the top or serves as a label for the entire set of slides within the slider.
  2. Image/Video: Adding an image or video to an Image/Video Slider involves selecting visually compelling media that can engage viewers. Each slide serves as a visual element where users can interact by navigating through different images or videos. This feature enhances user engagement and provides a dynamic way to present multimedia content.
  3. Caption: A caption option for images or videos allows users to add descriptive text or titles that accompany the visual content. It enhances the viewer's understanding or context of the media being presented.

Upload Image:
When the user clicks on "Click here to add media" within the section, it will display all the existing uploaded images already inside the Editor platform.
If users wish to include their own images in the Image Slider, they must upload them as new files. The "Click to upload a new interactive image/video" option allows users to seamlessly upload and integrate their chosen media into the interactive slider.
Users can even use the 'External Image Link' option to add an image URL directly.



Upload Video:
We provide the capability to upload videos from YouTube, Vimeo, or an external link. With these options, you can easily upload the videos you need for the slider.

Paste the YouTube URL into the YouTube link input box. Click the "Next" button below. You will be redirected to the specified page where you can provide a title for the video and click the "Add" button at the bottom.

Add Section for Image/Video slider:
  1. The Image/Video slider form comes with collapsible sections. You can easily add a section by clicking on the 'Add Section' button, which allows the users to add a section immediately below the existing one. As soon as a new section is added, a + icon will be reflected on the Section Line stating, 'Add Section Below.'. Refer to the images below:
  2. Once a section is added, users can move a section up or down and place it above or below their desired section instead of dragging a section manually using the up or down arrow icons. 
  3. An added section can be deleted easily by clicking the 'Delete' icon that lies on the Section Line. Once this icon is clicked, the 'Remove Section' window pops up asking for confirmation to delete the section, and clicking on the 'Remove' option then deletes the particular section.
selectedImg
selectedImg
Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).

Customise Options:

Customisation options allow users to personalize and adjust aspects such as fonts, colors, styles, and spacing to suit specific preferences or branding needs. They enhance visual appeal and usability, ensuring content or interfaces meet diverse user requirements effectively. For Image/video slider we are supporting these customise option.
1. Caption.
2. Icon.
3. Image/video.
Caption:
  1. The caption can be customised with different background colors and text styles using the menu.
  2. The font family can also be changed, with options available in both Loree and Loree Interactive for consistency.
  3. The font style, size, and weight can be adjusted, as well as the alignment and margin.
  4. Font color and background color options are available through a color palette menu, and specific codes can also be used.
  5. The caption can be positioned at the top or bottom of images or videos in the slider for a better user experience.


Icon:
Icon customisation includes

  1. Icon Type: Choose between square or circular icons to match your design aesthetic.

  2. Icon Color: Personalize icons with a range of colors to align with your branding or visual theme.

  3. Icon Size: Opt for default, medium, or large sizes to ensure icons are appropriately scaled for visibility and impact.

  4. Icon Alignment: Position icons as default, at the top, or at the bottom of your interactive elements for optimal display and user engagement.

Image/Video Background:
  1. Offering the option to change the background of the image/video slider using a color palette enhances customisation and visual appeal.
  2. Users can select from a variety of colors to personalize the slider's backdrop, ensuring it complements the content and overall design theme seamlessly.
  3. This feature allows for greater flexibility in adapting the slider to different contexts and preferences, enhancing the overall user experience.

Preview:
The PREVIEW option has been conveniently placed in the far right corner of the form section for all the interactives.
THANK YOU
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 rearrange, reorder, or transfer items within a user interface intuitively. It is commonly used in various applications and websites to enhance user experience by enabling seamless and efficient manipulation of content or elements.

Refer to the Image below:




How to create Drag and Drop Interactive:

To create a Drag and Drop interactive, follow these steps:
  1. Click on the "Create" button located in the Drag and Drop interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Drag and Drop interactive.





  1. Title: Enter a title/name for your drag-and-drop element.
  2. Image: Upload an image for this element or add an external image link. Next: Add alternative text or choose decorative option.
Add Section Option for Drag and Drop:
1. The Drag and drop form has collapsible sections. To add a new section, click 'Add Section,' and a + icon will appear on the section line stating to add a section below. Refer to the
images.
2. After adding a section, users can easily move it to their desired location using the arrow icons displayed in the image.
3. To delete a section, click the 'Delete' icon on the Section Line, confirm the deletion by selecting 'Remove.'.
selectedImg
selectedImg

Please Note:  Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).
Customise Option:
Customisation options allow users to personalize and adjust fonts, colors, styles, and spacing to meet specific preferences or branding needs. They enhance visual appeal and usability, ensuring content and interfaces meet diverse user requirements. We support these options for drag and drop.
1. Drop Zone Layout.
2. Draggable Area.
3. Drop Zone Area.
4. Button.
In the Customise menu, you'll find the Drop Zone Layout section, offering two options: custom and fixed.

Drop Zone Layout (Custom):
To create a custom layout, follow these steps:

Add/Edit Drop Zones:
To add, edit, or delete drop zones, click on the designated button, fill in the label and options, and position the drop zone on the image. The Edit button allows for modifications, while the Delete button removes unwanted drop zones. Clicking Save will redirect back to the form interface.



Drop Zone Layout (Fixed):
For the Fixed drop zone layout in the form, there is an additional option called "Draggable Text." You can input your draggable text directly into this field.



Draggable Area:

  1. Type: Choose the type of draggable area, such as Fill, Outline, or Pill.

  2. Padding: Adjust the padding around the draggable area to control its spacing from surrounding elements.

  3. Font Family: Our platforms, Loree and Loree Interactive, allow for consistent font changes. Simply use the font dropdown to match your desired design or branding.

  4. Font Size: Adjust font size from 6 to 72 for readability and visual balance within the draggable area.

  5. Font Color: Font color options enhance readability, highlight information, and match branding. Access through a color palette menu. Click on the font color option to choose from a color palette or use Hex/RGBA code.

  6. Background Color: Background color options enhance readability and emphasis in a text editor's color palette menu. Choose from a color palette or use specific codes.




Drop Zone Area:

The drop zone area offers customisation options for background color and opacity, allowing you to tailor its appearance to fit your needs:

  1. Background Color: Choose a color that suits your design or branding. You can click on the background color option, where you'll find a color palette to choose from, or use specific Hex or RGBA codes if you know them.

  2. Opacity: Adjust the transparency level of the background color to control how much of the underlying content shows through.


Button Customisation: Includes pill, outline, and pill-shaped buttons with options for rounded edges, transparency, and elongated shape with rounded ends.
Alignment: Set alignment for section header text (left, center, right).
Padding: Measured in pixels, it provides space between content and border for improved layout and readability.
Font Family: Option to change font, with consistency across both Loree and Loree Interactive platforms.
Font Size: Options ranging from 6 to 72 are available in the dropdown menu.
Font Color: Change font color for readability, highlighting, and branding, accessed through a color palette or specific codes.
Background Color: Change background color for readability and emphasis, accessed through color palette or specific codes.


Preview:

The PREVIEW option has been conveniently placed in the far right corner of the form section for all the interactive.
THANK YOU
Image Hotspot
An image hotspot interactive allows users to click on specific areas (hotspots) within an image to reveal additional information or media. This enhances user engagement by providing an intuitive and visually appealing way to explore detailed content within an image.

Refer to the Image below:

How to create Image Hotspot Interactive:


To create an Image Hotspot Interactive, follow these steps:
  1. Click on the "Create" button located in the Image Hotspot Interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Image Hotspot Interactive.




Once the form is open, you'll find the following fields to fill out:
  1. Interactive Title: Title or name input for your Image Hotspot interactive, prominently displayed or used as a label.
  2. Image: Involves selecting a visually rich base image where users can click designated hotspots to reveal additional information or media, enhancing interactive exploration.
When the user clicks on Click here to add an image option in a section, it will display all the existing uploaded images already inside the Editor platform.

If users want to use their course images in Loree Interactives, they need to upload them as new ones.


The image below shows the 'Click to upload a new interactive image' option that allows users to upload images of their choice into the interactive.

Users can even use the 'External Image Link' option to add an image URL directly.




After adding an image, users can click on the 'Add/Edit Hotspot' button to open a new window, allowing them to add, edit, or delete hotspots in their desired positions



Clicking on the 'Add' option opens another window called 'Add Hotspot', requiring users to add a Label and Content to the hotspot using the bubble menu editor.

Once the hotspot is added, it can be edited and saved by clicking the Save option.




Users can preview their work using the PREVIEW option, now located at the top right side of the form section





Add Section for Image Hotspot:
  1. The Image Hotspot form comes with collapsible sections. You can easily add a section by clicking on the 'Add Section' button, allowing users to add a section below the existing one.
  2. As soon as a new section is added, a + icon appears on the Section Line indicating 'Add Section Below.'. Refer to the images for details.
  3. Once a section is added, users can move it up or down to position it above or below desired sections without manual dragging, using the up or down arrow icons.
  4. To delete a section, simply click the 'Delete' icon on the Section line. Confirm deletion in the 'Remove Section' window by clicking 'Remove.'.
selectedImg

selectedImg
Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).

Customisation options in the Image Hotspot interactive allow users to personalize fonts, colors, styles, and spacing, enhancing visual appeal and usability tailored to specific preferences or branding needs.

Icon: Icon customisation for image hotspots enables users to select or upload icons representing points of interest in an image. These icons can be customised in type, size, color, and background color to integrate seamlessly with the design and improve usability.

Icon Size: Adjust the size of icons in image hotspots. Options range from 6 to 72, selectable from a dropdown menu.

Icon Color: Customise the color of icons to improve readability, emphasize key information, or align with branding. Use the color palette to choose a color, or input Hex or RGBA codes for precise color matching.
Background Color: Modify the background color behind icons to enhance visibility and emphasis. Accessible through the color palette menu, select a color or enter specific Hex or RGBA codes for customisation.





Preview:

The PREVIEW option has been conveniently placed in the far right corner of the form section for all the interactives.
THANK YOU

Embed  

After creating an interactive, you can click on the Embed option on the right side of the screen to insert it into the editor. If you need to make changes, click on the Edit option to modify the interactive. Alternatively, you can discard it by clicking on the "X" (Close) icon.

To Embed an existing interactive from My Interactives, Shared Interactives, or Global Interactives, simply click on the Embed button on the right side of the interactive. This will insert the interactive directly into your editor's page.


Info
All fonts and sizes for headers and paragraph text will be determined by the predefined values set in the admin dashboard.

THANK YOU

    • Related Articles

    • Loree Enhanced UI User Manual

      Welcome to the world of Loree Your go-to resource for mastering the Loree editor and its powerful features. Explore the sections below to quickly navigate to the specific guides you need. Landing Page Get started with the Loree editor! Learn how to ...

    • Release Notes for Loree A2403.3

      Published on: 31/07/2024 Feature Enhancements 1. Enhance Customization for Active and Inactive Tab Text Colour Earliers, when Loree users created a Tabs Interactive, the customize section applied the same font color style to both Active and Inactive ...

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

    • Loree Interactive Style Management in admin dashboard

      Getting started We are happy to introduce the Loree Interactive feature in the admin dashboard. From the admin dashboard, admins can effortlessly customize styles and manage their Loree Interactive content. Benefits of a Loree Interactive feature in ...

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