Widgets

Image Accordion

Estimated reading: 8 minutes 1616 views

The “Image Accordion” is a powerful widget for displaying a large amount of information in a compact and visually appealing way. By collapsing text, images, and icons into a single widget, it effectively saves screen space without sacrificing the user’s ability to access and understand the content.

Its ability to display content in a condensed, collapsed format allows for efficient use of screen real estate while maintaining high visual appeal.

The “Image Accordion” widget features the following controls:

Content

Content

  • Skin: Select the skin type, either Transparent or Panel.
Image Accordion: Content Skin Settings
Image Accordion: Content Skin Settings

Item

Content

  • Image: Set the background image for the Image Accordion(In Transparent Skin, it will work as Overlay).
  • Title: Enter the title.
  • Title Tag: Select the tag for the title.
  • Description: Enter the description.
  • Description Tag: Select the tag for the description.
  • Button Text: Enter the text for button.
  • Link: Enter the URL that needs to be linked upon button.
  • Icon: Select from the Font Awesome icon library or upload an SVG image.
  • Icon Position: Set the position of the Icon either before or after the link text.
  • Active On Load: Enable the option to display this panel upon OnLoad.
Image Accordion Content Settings
Image Accordion Content Settings

Icon

  • Icon Type- Choose from a list of Icons, Images, or Lottie animations.
    • Icon
      • Icon: Select from the Font Awesome icon library or upload an SVG image.
    • Image
      • Image: Either upload an image or select a dynamic tag for display.
      • Image size: Choose the size for your icon image display.
    • Lottie Animation
      • Source: Choose the source of the Icon by either adding an External URL or selecting a media file.
      • Loop:Enable the loop option to display the animation continuously.
      • Reverse: Activate the reverse option to display the animation in reverse order.
    • View – Select from default, stacked, or framed display options.
    • Shape– Select either Circle or Square.
Image Accordion: Icon Settings(individual item)
Image Accordion: Icon Settings(individual item)

Style(for individual item)

  • Icon
    • Normal
      • Primary Color: Choose the primary color for the icon.
      • Secondary Color: Choose the secondary color for the icon.
      • Size: Set the size of the Icon using %, EM, REM, VW, or PX.
      • Padding: Set the padding.
      • Rotate:  Set the rotation of your Icon.
      • Border Width: Set the border’s width using %, EM, REM, VW, or PX.
      • Border Radius: Set the border’s radius using PX, %, EM, or REM.
Image Accordion: Normal Icon Style Settings(individual item)
Image Accordion: Normal Icon Style Settings(individual item)
  • Hover
    • Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.
Image Accordion: Hover Icon Style Settings(individual item)
Image Accordion: Hover Icon Style Settings(individual item)

Panel

  • Background Type: Please choose between a classic or gradient background type for the panel.
    • Classic
      • Color: Choose the color for the background.
      • Image: Either upload an image or select a dynamic tag for display.
      • Image Size: Choose the size of the image, from thumbnail to full.
      • Position: Set the position of the background image.
      • Attachment: Choose either scroll or fixed.
      • Repeat: Specify the repeat pattern for the background image.
      • Display size: Choose between contain, cover, and auto options, or add custom values for the background display size.
Image Accordion: Panel Classic Background Style Settings
Image Accordion: Panel Classic Background Style Settings
  • Gradient
    • Color: Select the color for the background.
    • Location: Determine the position of the color on the background by specifying their location in percentage.
    • Second Color: Select the second color for the background.
    • Location: Determine the position of the second color on the background by specifying their location in percentage.
    • Type: Select either Radial or Linear.
Image Accordion: Panel Gradient Background Style Settings
Image Accordion: Panel Gradient Background Style Settings
  • Border Type: Select the type of border.
    • Width: Enter the width for the border.
    • Color: Specify the color of the border
  • Border Radius: Set the border radius for a panel.
Image Accordion: Panel Style Settings
Image Accordion: Panel Style Settings

Content

  • Horizontal Position: Set the horizontal position of the content.
  • Vertical Position: Set the Vertical position of the content.
  • Alignment: Set the alignment
  • Content Width: Specify the content width.
  • Background Type: As we mentioned above, Choose between a classic or gradient background type. Click here.
  • Padding: Set the padding.
  • Border Type: Select the type of border.
    • Width: Enter the width for the border.
    • Color: Specify the color of the border
  • Border Radius: Enter the border-radius.
  • Spacing: Specify the gap.
Image Accordion: Content Style Settings
Image Accordion: Content Style Settings

Title

  • Text Color: Choose the text color of the title.
  • Typography: Set the typography.
  • Text Shadow: Set the text shadow for the title.
  • Text Stroke: Set the text stroke.
  • Blend Mode: Select the blend mode.
Image Accordion: Title Style Settings
Image Accordion: Title Style Settings

Description

  • Text Color: Choose the text color of the description.
  • Typography: Set the typography.
  • Text Shadow: Set the text shadow for the description.
Image Accordion: Description Style Settings
Image Accordion: Description Style Settings

Button

  • Normal
    • Typography: Set the typography.
    • Text Color: Choose the text color of the Button.
    • Text Shadow: Set the text shadow for the Button.
    • Background Type: As we mentioned above, Choose between a classic or gradient background type for the button. Click here.
    • Border Type: Select the type of border.
      • Width: Enter the width for the border.
      • Color: Specify the color of the border
    • Border Radius: Set the border-radius.
    • Box Shadow: Set the box shadow.
    • Padding: Set the padding.
Image Accordion: Button Style Settings(Normal)
Image Accordion: Button Style Settings(Normal)
  • Button Hover
    • Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the button.
Image Accordion: Button Style Settings(Hover)
Image Accordion: Button Style Settings(Hover)
  • Image Size: Set the size of an image.
  • Icon Type: As we mentioned above, Choose from a list of Icons, Images, or Lottie animations. Click here.
Image Accordion: Content Settings
Image Accordion: Content Settings

Settings

  • Width: Set the width of Image accordion items.
  • Height: Set the height of Image accordion items.
  • Gap: Specify the gap between the accordion items(applicable when Panel is selected as Skin).
  • Trigger Action: Select trigger action either hover or click.
  • Stacked Device: Choose a stacked device, either a phone or tablet.
  • Show Counter: Enable the option if desired.
    • Counter Style: Specify the counter style.
Image Accordion: Settings
Image Accordion: Settings

Style

Panel

  • Background Type: As we mentioned above, Choose between a classic or gradient background type for the panel. Click here.
  • Padding: Set the padding.
  • Border Type: Select the type of border.
    • Width: Enter the width for the border.
    • Color: Specify the color of the border
  • Border Radius: Set the border’s radius using PX, %, EM, or REM.
Image Accordion: Panel Style Settings
Image Accordion: Panel Style Settings

Content Options

  • Horizontal Position: Set the horizontal position of the content.
  • Vertical Position: Set the Vertical position of the content.
  • Alignment: Set the alignment
  • Content Width: Specify the content width.
  • Background Type: Choose between a classic or gradient background type. Click here.
  • Padding: Set the padding.
  • Border Type: Select the type of border.
    • Width: Enter the width for the border.
    • Color: Specify the color of the border
  • Border Radius: Enter the border-radius.
  • Spacing: Specify the gap.
Image Accordion: Content Style Settings
Image Accordion: Content Style Settings

Title

  • Text Color: Choose the text color of the title.
  • Typography: Set the typography.
  • Text Shadow: Set the text shadow for the title.
  • Text Stroke: Set the text stroke.
  • Blend Mode: Select the blend mode.
Image Accordion: Title Style Settings
Image Accordion: Title Style Settings

Description

  • Alignment: Set the alignment of the description.
  • Text Color: Choose the text color of the description.
  • Typography: Set the typography.
  • Text Shadow: Set the text shadow for the description.
Image Accordion: Description Style Settings
Image Accordion: Description Style Settings

Button

  • Typography: Set the typography.
  • Text Shadow: Set the text shadow for the button
Image Accordion: Button Style Settings
Image Accordion: Button Style Settings
  • Normal
    • Text Color: Choose the text color of the Button.
    • Background Type: Choose between a classic or gradient background type for the button. Click here.
Image Accordion: Button Style Settings(Normal)
Image Accordion: Button Style Settings(Normal)
  • Hover
    • Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the button.
Image Accordion: Button Style Settings(Hover)
Image Accordion: Button Style Settings(Hover)
  • Border Type: Select the type of border.
    • Width: Enter the width for the border.
    • Color: Specify the color of the border
  • Border Radius: Set the border’s radius using PX, %, EM, or REM.
  • Box Shadow: Set the box shadow.
  • Padding: Set the padding.
Image Accordion: Button Style Settings
Image Accordion: Button Style Settings

Counter

Note: This is applicable when Show Counter is enabled in the Settings section.

  • Top: Adjust the position of the counter from the top.
  • Left: Adjust the position of the counter from the top.
Image Accordion: Counter Style Settings
Image Accordion: Counter Style Settings
  • Normal
    • Color: Set the color of the counter text.
    • Typography: Set the typography.
Image Accordion: Counter Style Settings(Normal)
Image Accordion: Counter Style Settings(Normal)
  • Active/Hover
    • Color: Set the color of text for counter Active/Hover.

Icon

Styling controls for the hover and normal state are available under this section. Hover settings will be applied when Someone hovers the icon. Click here.

Image Accordion: Icon Style Settings
Image Accordion: Icon Style Settings

Check out the Demo page of Image Accordion.

Share this Doc

Image Accordion

Or copy link

CONTENTS