Flip Card

Flip Card

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.

Here is a short video on how Flip Card Works:


How to create 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: Initially visible side of a flip card displaying summary or engaging visual to attract and interact with users.

  3. Back View: Revealed upon flipping, 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 'Add Section' button.
  2. A+ icon appears on 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 'Delete' icon on Section Line to remove sections; confirm in 'Remove Section' window, then click '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).

Customize 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

Customize 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 customization options:

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

Border Color: Customize 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. Customize 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 customize 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!


    • 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 - Canvas A2203.4

      Loree Container background color issue As a Loree user, When we are working on the Loree editor, we add a container on a row and applied the background color and we can see the parent background color then if we click on the clear button we can see ...
    • Release Notes for Loree A2403.1

      Published on: 17/07/2024 LOREE INTERACTIVES REVAMP! We're excited to announce the release of our revamped Interactive Tool. This update brings enhanced functionality, improved user experience, and new features designed to help you get the most out of ...
    • Release notes for Loree - Canvas A2203.2

      Loree Issues around Loree Interactive content loading As a Loree user, When we are working on Loree editor and click on edit Loree interactive from side panel (or) Edit interactive from editor area using tool menu (or) edit any existing interactives ...
    • Release notes for Loree A2402.1

      Published on: 11/06/2024 New Features 1. Auto-Save Feature To unlock the full potential of this remarkable feature, Admins first need to activate it through the Roles and Features section of the Admin Dashboard in Loree. Simply toggle ON the feature ...