Circle Info

You can use Circle Info Widget for displaying information in an attracting rotating circled type.

How to create Circle Info Widget?

Step 1. Create, or choose the Column into which you want to add your element. Click on Add New Element.

Step 2. Drag UDesign Circle Info from the element List.

Step 3. Add Circle Info Widget and edit.

Circle Info Content.

Dot Content Type: Circle Info Widget support 3 types of dot content: Image, Icon, HTML

Title: Title of each circle info item

Description: Description of each circle info item

Link: Link URL of each circle info item

Circle Info Option.

Animation – Select animation type which circle info items appears on first loading.

Active On – Show content of each circle info item on click or hover event.

Auto Rotate – Make circle info widget rotate automatically.

Pause on Hover – Determine whether rotate or not automatically on mouse hover event.

Rotate Time Delay – Delay for the next rotate of circle item.

Circle Info Style.

In circle info styles, there are General, Item, Title and Description control options.

General:

  • Circle Size: Diameter of Circle Info Widget
  • Padding: Padding of Circle Info Widget
  • Background Color: Background color of Circle Info Widget
  • Border Width: Border width of Circle Info Widget
  • Border Color: Border color of Circle Info Widget

Item:

  • Icon Size: Font size of circle info item when content type is icon or image
  • Size: Diameter of Circle Info Item
  • Border Width: Border width of circle info item
  • Color palette: Color palette of circle info item

Title:

  • Typography: Typography of title
  • Color: Color of title
  • Hover Color: Hover color of title
  • Margin: Margin of title

Description:

  • Typography: Typography of description
  • Color: Color of description


By browsing this website, you agree to our privacy policy.
I Agree