Circles Info Element

Last Update: March 25, 2024

The Circles Info Element allows you to place a variety of information items in a circle, which is navigated by icons around the edge of the circle. It’s a graphic and compact way of displaying all sorts of information. Read below for details on the Element options, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Circles Info Element

The Circles Info Element is fully featured, with five tabs, and each item has three tabs for individual customization. To get a good idea of how to use it, watch the video at the top of the page, but to begin, simply add the Element into your desired column.

The Children tab contains the individual items, while the other tabs are Parent Options, and affect the whole series of info items. This element has a plethora of options.

You can start either by adding Child items or customizing the parent options. These cover the functionality and style of the element as a whole.

To edit the child items, go to the Children tab and click the pencil icon to edit the existing item. The Child Item Options Panel appears. Note that you can override a large number of element options here, customizing the individual items. At the bottom of the Child Options, you will find the Content field, where you add the content for the individual items.

You can then duplicate existing, or create new, content boxes by clicking on the Clone Item icon, or the + Content Box button respectively. Once you have completed your Circles Info Element, remember to save your changes.

Read below for a detailed description of all element options.

Element Options

Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

Child Tabs

General

HeadingDescription
Select IconClick an icon to select, click again to deselect.
Content TitleTitle of the content.
Content Title LinkAdd the title link ex: http://example.com.
ContentInsert text for circle info.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Title TypographyControls the title typography, if left empty will inherit from globals.
Title Hover ColorControls the title hover color.
Content TypographyControls the content typography, if left empty will inherit from globals.

Background

HeadingDescription
Gradient
Gradient Start ColorSelect start color for gradient.
Gradient End ColorSelect end color for gradient.
Gradient Start PositionSelect start position for gradient.
Gradient End PositionSelect end position for gradient.
Gradient TypeControls gradient type.
Radial DirectionSelect direction for radial gradient.
Gradient AngleControls the gradient angle. In degrees.
Color
Background ColorControls the background color.
Image
Background ImageUpload an image to display in the background.
Background PositionChoose the position of the background image.
Background RepeatChoose how the background image repeats.
Background Blend ModeChoose how blending should work for each background layer.

Main tabs

General

HeadingDescription
Select IconClick an icon to select, click again to deselect.
Auto RotateSelect to enable or disable auto rotation.
Auto Rotate TimeControls the delay of rotation between each element in the set. In seconds.
Pause on HoverSelect to pause auto rotation on hover.
Activation TypeSelect the activation type.
Link AreaSelect which area the link will be assigned to. Select default for Global Options selection.
Link TargetControls how the link will open.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Max WidthSet the maximum width the element should take up. Enter value including any valid CSS unit, ex: 200px. Leave empty for a default max-width of 500px.
Icons PlacementSelect if icons should be added to content circle or outer circle.
Circle Border SizeContols the border size of icon circle. In pixels.
Circle Border ColorControls the icon circle border color.
Circle Border StyleControls the border style of the icon circle.
Content Circle Border SizeContols the border size of content circle. In pixels.
Content Circle Border ColorControls the content circle border color.
Content Circle Border StyleControls the border style of the content circle.
Content SpacingContols the spacing between circle and content. In pixels.
Title TypographyControls the title typography, if left empty will inherit from globals.
Title Hover ColorControls the title hover color.
Content TypographyControls the content typography, if left empty will inherit from globals.
Icon SizeContols the icon size. In pixels.
Icon Styling
Icon ColorControls the icon color.
Icon Background ColorControls the icon background color.
Icon Border SizeContols the icon border size. In pixels.
Icon Border ColorControls the icon border color.
Icon Border StyleControls the border style of the icon.
Icons Box ShadowSet to "Yes" to enable box shadows for icons.
Icons Box Shadow PositionSet the vertical and horizontal position of the icons box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.
Icons Box Shadow Blur RadiusSet the blur radius of the icons box shadow. In pixels.
Icons Box Shadow Spread RadiusSet the spread radius of the icons box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.
Icons Box Shadow ColorControls the color of the icons box shadow.

Background

HeadingDescription
Gradient
Gradient Start ColorSelect start color for gradient.
Gradient End ColorSelect end color for gradient.
Gradient Start PositionSelect start position for gradient.
Gradient End PositionSelect end position for gradient.
Gradient TypeControls gradient type.
Radial DirectionSelect direction for radial gradient.
Gradient AngleControls the gradient angle. In degrees.
Color
Background ColorControls the background color.
Image
Background ImageUpload an image to display in the background.
Background PositionChoose the position of the background image.
Background RepeatChoose how the background image repeats.
Background Blend ModeChoose how blending should work for each background layer.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article