Widgets

Info Group

Estimated reading: 6 minutes 476 views

This widget is the perfect solution for organizing and presenting information in a clear and structured manner on your website. With this versatile widget, you can effortlessly group related pieces of information, making it easier for your users to access and understand content.

It is great for showing extra info on your webpage without taking up too much space. You can reveal the additional information by clicking on a box, button, or both. It lets you arrange the info neatly in a grid and offers lots of options to make it look just the way you want. You can even add a close button using an icon to hide the extra details when you’re finished.

You have the option to display your content in different ways, like using a Saved Container, Saved Section, AE Template, Saved Page, or even writing your own content. Plus, you can choose whether or not to show the button, and you can customize how the button looks and behaves.

The Info Group widget features the following controls:

Content

General

  • Info Item
    • Media Type: Select from icon, image, or Lottie.
    • Title: Enter the title.
    • Sub Title: Enter the sub title.
    • Short Description: Enter the short description.
Info Group: Info Item Settings
Info Group: Info Item Settings
  • Description
    • Type: Select the option to display the content.

Content

  • Content: Enter the text.
Info Group: Description Content Settings(Content)
Info Group: Description Content Settings(Content)

Saved Section

  • Select Section: Select the section to display the content.
Info Group: Description Content Settings(Saved Section)
Info Group: Description Content Settings(Saved Section)

Saved Container

  • Select Container: Select the container to display the content.
Info Group: Description Content Settings(Saved Container)
Info Group: Description Content Settings(Saved Container)

Saved Page

  • Select Page: Select the page to display the content.
Info Group: Description Content Settings(Saved Page)
Info Group: Description Content Settings(Saved Page)

AE Template

  • Select AE Template: Select the AE Template to display the content.
Info Group: Description Content Settings(AE Template)
Info Group: Description Content Settings(AE Template)
  • Active On Load: Enable the option to active items while on load.
  • Enable Button: Enable the option to display the button.
    • Button Text: Enter the button text.
    • Active Button Text: Enter the active button text.
    • Icon: Select the icon for button.
    • Active icon: Select the icon for button while in active state.
    • Icon Position: Specify the position of icon.
Info Group: Button Settings
Info Group: Button Settings
  • Title HTML Tag: Select the HTML tag of title.
  • Close Icon: Select the icon for the close button.
  • Trigger On: Choose how extra information triggers by clicking a button, a box, or both.
Info Group: General Settings
Info Group: General Settings

Grid

  • Column: Specify the number of columns you want in one row.
  • Column Gap: Specify the gap between columns.
  • Row Gap: Specify the gap between rows.
Info Group: Grid Settings
Info Group: Grid Settings

Style

Item

  • Media Position: Select media position from Left, Top, or Right.
  • Vertical Alignment: Select vertical alignment from Top, Middle, or Bottom.

Normal

  • Background Type: Select from classic or gradient.
  • Box Shadow: Set the box shadow.
  • Border Type: Select the border type.
Info Group: Item Style Settings(Normal)
Info Group: Item Style Settings(Normal)

Hover

Styling controls for the hover state are available under this section. This will be applied when someone hovers the item box.

Info Group: Item Style Settings(Hover)
Info Group: Item Style Settings(Hover)
  • Padding: Set the padding.

Media

  • Spacing: Specify the gap between media and text.
  • Size: Specify the size of media.
  • Rotate: Set the rotation properties.

Normal

  • Color: Select the color of media.
  • Background Type: Select from classic or gradient.
  • Border Type: Select the border type.
Info Group: Media Style Settings(Normal)
Info Group: Media Style Settings(Normal)

Hover

Styling controls for the hover state are available under this section. This will be applied when someone hovers the item box.

Info Group: Media Style Settings(Hover)
Info Group: Media Style Settings(Hover)
  • Border radius: Set the border radius.
  • Padding: Set the padding.
Info Group: Media Style Settings
Info Group: Media Style Settings

Content

  • Alignment: Select content alignment from Left, Center, Right, or Justify.
  • Padding: Set the padding.
Info Group: Content Style Settings
Info Group: Content Style Settings

Title

  • Spacing: Specify the gap between the title and other text.
  • Color: Select the text color of title.
  • Hover/Active Color: Select the color of title when in hover or active state.
  • Typography: Set the typography.
  • Text Stroke: Set the text stroke.
  • Text Shadow: Set the text shadow.
Info Group: Title Style Settings
Info Group: Title Style Settings

Sub Title

  • Spacing: Specify the gap between the description and other text.
  • Color: Select the text color of description.
  • Hover/Active Color: Select the color of description when in hover or active state.
  • Typography: Set the typography.
  • Text Stroke: Set the text stroke.
  • Text Shadow: Set the text shadow.
Info Group: Sub Title Style Settings
Info Group: Sub Title Style Settings

Short Description

  • Color: Select the text color of short description.
  • Hover/Active Color: Select the color of short description when in hover or active state.
  • Typography: Set the typography.
  • Text Stroke: Set the text stroke.
  • Text Shadow: Set the text shadow.
Info Group: Short Description Style Settings
Info Group: Short Description Style Settings

Description

  • Alignment: Select alignment from Left, Center, Right, or Justify.
  • Animation Type: Select animation either Fade or Slide.
  • Width: Specify the width of description box.
  • Position: Select the description position from Left, Center, or Right.
  • Spacing: Specify the space between description box and item box.
  • Color: Select the color of description.
  • Typography: Set the typography.
  • Background Type: Select from Classic or Gradient.
  • Box Shadow: Set the box shadow.
  • Border Type: Select the border type.
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
Info Group: Description Style Settings
Info Group: Description Style Settings

Close Icon

  • Color: Select the color of close button icon.
  • Hover Color: Select the hover color of close button icon.
  • Size: Specify the size of icon.
  • Horizontal Offset: Set the horizontal offset value.
  • Vertical Offset: Set the vertical offset value.
Info Group: Close Icon Style Settings
Info Group: Close Icon Style Settings

Button

  • Alignment: Select the button alignment from Left, Center, or Right.
  • Spacing: Specify the space between button and text.
  • Icon gap: Specify the space between button and button icon.
  • Typography: Set the typography.
Info Group: Button Style Settings
Info Group: Button Style Settings

Normal

  • Color: Select the color of button text.
  • Background Type: Select from classic or gradient.
  • Border Type: Select the border type.
Info Group: Button Style Settings(Normal)
Info Group: Button Style Settings(Normal)

Hover

Styling controls for the hover state are available under this section. This will be applied when someone hovers the button.

Info Group: Button Style Settings(Hover/Active)
Info Group: Button Style Settings(Hover/Active)
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
Info Group: Button Style Settings
Info Group: Button Style Settings

Check out the Demo page of Info Group.

Share this Doc

Info Group

Or copy link

CONTENTS