Circles Info Element

09/01/2023

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.

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 in short:

Step 1. Ensure Avada Builder, or Avada Live is active. Create, or choose the Column you wish to add the Element into. Click on Add New Element.

Step 2. Choose Circles Info from the Elements List.

Step 3. 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.

Step 4. 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.

Step 5. 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 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.

Step 6. You can then duplicate existing, or create new, content boxes by clicking on the Clone Item icon, or the + Content Box button respectively.

Step 7. Once you have completed your Circles Info Element, remember to save your changes.

Read below for a detailed description of all element options.

869,199 Businesses Trust Avada

Get Avada

869,199 Businesses Trust Avada

Get Avada

869,199 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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.

Children Tab

Add / Edit Items – This is where all your child element’s items are found. Each will be numbered to better keep track of how many you currently have. You can reorder elements by dragging them and dropping them into place.
Add Circle Info – Allows you to add a new Circles Info item.
Edit Item Icon – Allows you to edit an item.
Clone Item Icon – Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.
Delete Item Icon – Allows you to delete an item.

View The Options Screen

Child General Tab

Select Icon – Click an icon to select, click again to deselect.
Content Title – Title of the content.
Content Title Link – Add the title link ex: http://example.com.
Content – Insert text for circle info.
CSS Class – Add a class to the wrapping HTML element.
CSS ID – Add an ID to the wrapping HTML element.

View The Options Screen

Child Design Tab

Title Typography
Font Family – Controls the font family of the title. Leave empty to use the site default.
Font Size – The font size for the title. Use any valid CSS unit.
Line Height – Controls the line height of the text. Enter value including any valid CSS unit, ex: 28px.
Letter Spacing – Controls the letter spacing of the title. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.
Text Transform – Select how the text is displayed. Choose from Normal or Uppercase.
Font Color – Select the text font color.
Title Hover Color – Controls the title hover color.
Content Typography
Font Family – Controls the font family of the content. Leave empty to use the site default.
Font Size – The font size for the content. Use any valid CSS unit.
Line Height – Controls the line height of the text. Enter value including any valid CSS unit, ex: 28px.
Letter Spacing – Controls the letter spacing of the content. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.
Text Transform – Select how the text is displayed. Choose from Normal or Uppercase.
Font Color – Select the text font color.

View The Options Screen

Child Background Tab

Color
Background Color – Controls the background color
Gradient
Gradient Start Color – Select start color for gradient.
Gradient End Color – Select end color for gradient.
Gradient Start Position – Select start position for gradient.
Gradient End Position – Select end position for gradient.
Gradient Type – Controls gradient type. (Default, Liinear, Radial)
Image
Background Image – Upload an image to display in the background.

View The Options Screen

General Tab

Select Icon – Click an icon to select, click again to deselect.
Auto Rotate – Select to enable or disable auto rotation.
Auto Rotate Time – Controls the delay of rotation between each element in the set. In seconds.
Pause on Hover – Select to pause auto rotation on hover.
Activation Type – Select the activation type.
Link Area – Select which area the link will be assigned to. Select default for Global Options selection (Title, Content Area).
Link Target – Select if the link opens in the same browser tab (_self) or in a new tab (_blank).
Margin – Enter values including any valid CSS unit, ex: 4%.
Element Visibility – Allows you to control the element’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
CSS ID – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
CSS Class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

View The Options Screen

Design Tab

Max Width – Set the maximum width the element should take up. Enter value including any valid CSS unit, ex: 200px. Leave empty to use full image width.
Icons Placement – Select if icons should be added to content circle or outer circle.
Circle Border Size – Contols the border size of icon circle. In pixels.
Circle Border Color – Controls the icon circle border color.
Circle Border Style – Controls the border style of the icon circle.
Content Circle Border Size – Contols the border size of content circle. In pixels.
Content Circle Border Color – Controls the content circle border color.
Content Circle Border Style – Controls the border style of the content circle.
Content Spacing – Contols the spacing between circle and content. In pixels.
Title Typography
Font Family – Controls the font family of the title. Leave empty to use the site default.
Font Size – The font size for the title. Use any valid CSS unit.
Line Height – Controls the line height of the text. Enter value including any valid CSS unit, ex: 28px.
Letter Spacing – Controls the letter spacing of the title. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.
Text Transform – Select how the text is displayed. Choose from Normal or Uppercase.
Font Color – Select the text font color.
Title Hover Color – Controls the title hover color.
Content Typography
Font Family – Controls the font family of the title. Leave empty to use the site default.
Font Size – The font size for the content. Use any valid CSS unit.
Line Height – Controls the line height of the text. Enter value including any valid CSS unit, ex: 28px.
Letter Spacing – Controls the letter spacing of the content. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.
Text Transform – Select how the text is displayed. Choose from Normal or Uppercase.
Font Color – Select the text font color.
Icon Size – Controls the size of the icon. In pixels. Up to 250px.
Icon Styling – Use filters to see specific type of content.
Regular
Icon Color – Controls the icon color..
Icon Background Color – Controls the icon background color.
Icon Border Size – Contols the icon border size. In pixels.
Hover/Active
Icon Hover / Active Color – Controls the icon hover/active color..
Icon Background Hover/Active Color – Controls the icon background hover/active color.
Icon Hover/Active Border Size – Contols the icon hover/active border size. In pixels.
Icons Box Shadow – Set to “Yes” to enable box shadows for icons.
Icons Box Shadow Position – Set 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 Radius – Set the blur radius of the icons box shadow. In pixels.
Icons Box Shadow Spread Radius – Set 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 Color – Controls the color of the icons box shadow.

View The Options Screen

Background Tab

Color
Background Color – Controls the background color
Gradient
Gradient Start Color – Select start color for gradient.
Gradient End Color – Select end color for gradient.
Gradient Start Position – Select start position for gradient.
Gradient End Position – Select end position for gradient.
Gradient Type – Controls gradient type. (Default, Liinear, Radial)
Image
Background Image – Upload an image to display in the background.

View The Options Screen

Extras Tab

Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Fliup Veritcally, Flip Horizontally, Light Speed, or Reveal With Color.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.
Animation Delay – Select the delay time after the animation starts (0 – 5).
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.