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.

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:

Click on the "Create" button located in the accordion section.
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:

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

Section Header Title: Enter a title for each section, which can be expanded or collapsed by users.

Section Body: Input content to be displayed when the section is expanded.

Add Section for Accordion

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.
After adding a section, users can easily move it to their desired location using the arrow icons displayed in the image.
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: Users can customise section header appearance by modifying Font Family, Font Style, Font Size, Font Weight, Alignment, Margin (px), Font Color, Background Color.

These options provide flexibility to create visually appealing and well-organized section headers that suit the overall design and readability of the content.

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.

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:

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

Section Header: Enter a title for each section, which can be expanded or collapsed by users.

Section Body: Input content to be displayed when the section is expanded.

Add section for Tabs Interactive:

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.
After adding a section, users can easily move it to their desired location using the arrow icons displayed in the image.
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).

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:

Click on the "Create" button located in the Button Interactive section.
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:

Customisation options allow users to personalize and adjust fonts, colors, styles, and spacing to suit preferences or brand needs, enhancing appeal and usability. 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:

Click on the "Create" button located in the Multiple Choice Question interactive section.
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:

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

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:

Our progress bar can be customised to have a background color and text of your choice.
You can also change the font, with access to the same fonts in both Loree and Loree Interactive for consistency. Simply select the desired font from the dropdown menu shown in the image.
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.
You can also define the margin around the section header in pixels.
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:

Within this section option, you have two choices: Background and Option Background.
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. You can select colors from a palette or input specific Hex or RGBA codes to achieve the exact customisation you desire.

Button:

The "Button Customise" options include settings for style, alignment, padding, font family, font size, font color, and background color.
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.

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

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

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

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:

Border Style: Choose from options such as solid, dashed, dotted, double, etc., to define the style of the border.
Border Color: Specify the color of the border.
Border Radius: Set the curvature or roundness of the corners of the border, useful for creating rounded corners.
Padding: Define the space between the border and the content inside it.

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:

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

Click on the "Create" button located in the Click & Reveal Interactive section.
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:

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

Add Section for Click & Reveal

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

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:

Padding (px): Space inside an element's border, enhancing layout and readability with pixel measurements.
Border Color: Customise border color to highlight content, using a palette or specific Hex/RGBA codes.
Border (px): Specifies border thickness or width with options like Solid, Dashed, Dotted, Double, Groove, and Ridge.
Border Radius: Adjusts curvature of border corners for a softer visual appearance.
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:

Padding (px): Space inside an element's border, enhancing layout and readability with pixel measurements.
Border Color: Customise border color to highlight content, using a palette or specific Hex/RGBA codes.
Border (px): Specifies border thickness or width with options like Solid, Dashed, Dotted, Double, Groove, and Ridge.
Border Radius: Adjusts curvature of border corners for a softer visual appearance.
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:

Click on the "Create" button located in the Flip card interactive section.
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:

Interactive Title: Enter a title for Tabs interactive, prominently displayed at the top or as a set label.
Front View: The initially visible side of a flip card displaying a summary or engaging visual to attract and interact with users.
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:

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

Customise Options:

Personalize fonts, colors, styles, and spacing to suit specific preferences or branding needs.
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:

Click on the "Create" button located in the Image/Video Slider section.
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,

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

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

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:

The caption can be customised with different background colors and text styles using the menu.
The font family can also be changed, with options available in both Loree and Loree Interactive for consistency.
The font style, size, and weight can be adjusted, as well as the alignment and margin.
Font color and background color options are available through a color palette menu, and specific codes can also be used.
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

Icon Type: Choose between square or circular icons to match your design aesthetic.
Icon Color: Personalize icons with a range of colors to align with your branding or visual theme.
Icon Size: Opt for default, medium, or large sizes to ensure icons are appropriately scaled for visibility and impact.
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:

Offering the option to change the background of the image/video slider using a color palette enhances customisation and visual appeal.
Users can select from a variety of colors to personalize the slider's backdrop, ensuring it complements the content and overall design theme seamlessly.
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: Click on the "Create" button located in the Drag and Drop interactive section. You will be redirected to the page mentioned below, where you can start building your Drag and Drop interactive.

Title: Enter a title/name for your drag-and-drop element.
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.'.

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:

Type: Choose the type of draggable area, such as Fill, Outline, or Pill.
Padding: Adjust the padding around the draggable area to control its spacing from surrounding elements.
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.
Font Size: Adjust font size from 6 to 72 for readability and visual balance within the draggable area.
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.
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:

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

Click on the "Create" button located in the Image Hotspot Interactive section.
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:

Interactive Title: Title or name input for your Image Hotspot interactive, prominently displayed or used as a label.
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:

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.
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.
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.
To delete a section, simply click the 'Delete' icon on the Section line. Confirm deletion in the 'Remove Section' window by clicking 'Remove.'.

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.

Type: Icon types in image hotspots are graphical symbols used to mark specific points within an image, enhancing user interaction by providing visual cues for clickable areas where additional content or information can be revealed. See available icon types in the image
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.

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 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 ...
Release notes for Loree A2303.2
Loree Loree Logo Update Loree Logo Updated in Admin Dashboard: As a Loree user, when the admin user logs in and views the admin dashboard, the user should see an updated Loree logo, as shown below. Loree Logo Updated in Landing Page: As a Loree user, ...
Release notes for Loree A2103.7
Loree Issue fixed in Loree editor Border width is not getting updated on selected text in text options As a Loree user, When we edit add a border to a selected text in a paragraph, and change the width it is not getting changed. This issue has been ...
Release notes for Loree A2303.10
Fixes Issue: External links do not work Some of the webpages/pdf links that user inserted via Loree do not work when user clicks on it. Root Cause The problem arises when we include an external link in the Loree editor., the slash '/' symbol is ...
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 ...

Loree Interactives

Loree Interactives

Loree Interactives Dashboard:

How to create an Accordion:

Add Section for Accordion

How to create Tabs Interactive:

Preview:

How to Create a Button Interactive:

Customise Options:

Preview:

How to create Click & Reveal Interactive:

Customise Options:

Preview:

How to create a Flip Card Interactive:

Add Section for Flip Card:

Customise Options:

How to create Image/Video Slider:

Customise Options:

How to create Drag and Drop Interactive:

Preview:

How to create Image Hotspot Interactive:

Preview:

Embed

Related Articles

Loree Interactives

Release notes for Loree A2303.2

Release notes for Loree A2103.7

Release notes for Loree A2303.10

Release Notes for Loree A2403.3