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.

Avada Website Builder

869,199 Businesses Trust Avada

Avada Website Builder

869,199 Businesses Trust Avada

Avada Website Builder

869,199 Businesses Trust 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.

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.

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 ColorControls 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.

Child Background Tab

  • Color
  • Background ColorControls the background color

  • 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. (Default, Liinear, Radial)

  • Image
  • Background ImageUpload an image to display in the background.

General Tab

  • 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 (Title, Content Area).

  • Link Target – Select if the link opens in the same browser tab (_self) or in a new tab (_blank).

  • MarginEnter 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.

Design Tab

  • Max WidthSet 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 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 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 ColorControls 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 ColorControls the icon background hover/active color.

  • Icon Hover/Active Border SizeContols the icon hover/active border size. In pixels.

  • 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 Tab

  • Color
  • Background ColorControls the background color

  • 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. (Default, Liinear, Radial)

  • Image
  • Background ImageUpload an image to display in the background.

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 DelaySelect 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.

Global Options

There are no Global options for the Circles Info Element.

Avada Website Builder

869,199 Businesses Trust Avada

Avada Website Builder

869,199 Businesses Trust Avada

Avada Website Builder

869,199 Businesses Trust Avada