Circles Info Element
The Circles Info Element arranges a set of icons around a circle. When the visitor points at or clicks an icon, the matching title and text appear in the middle. It presents several related topics, such as the stages of a service or the parts of a system, in a compact and eye-catching way.
The element can also rotate through the items on its own, so the topics are presented one after another even when the visitor does nothing. Borders, icon styles, shadows and the background of the content area can all be styled for the whole element, and each item can have its own title style and background.
In this article: How To Use · Element Options · Circle Info Options · Tips · Related Elements · Example
How To Use The Circles Info Element
Add the Circles Info Element to any column and add one Circle Info item per topic. Give each item an icon (Select Icon), a Content Title and its Content, and optionally a Content Title Link. The Select Icon of the element itself is used for every item that has no icon of its own.
On the General tab choose the Activation Type: Hover shows an item when the visitor points at its icon, Click only on a click. Auto Rotate moves to the next item after the Auto Rotate Time, and Pause on Hover stops the rotation while the visitor points at the element. Link Area decides whether only the title or the whole content area is linked, and Link Target whether the link opens in a new tab.
On the Design tab set the Max Width (500px when left empty) and the Icons Placement: on the outer circle or on the content circle. Then style both circle borders, the Content Spacing, the title and content typography, the regular and hover/active icon colors and borders, and the icons’ box shadow. The Background tab gives the content area a color, gradient or image, which each item can override.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Content | Enter some content for this Circles info. |
| 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. |
| Link Target | Controls how the link will open. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Max Width | Set the maximum width the element should take up. Enter value including any valid CSS unit, for example 200px. Leave empty for a default max-width of 500px. |
| Icons Placement | Select if icons should be added to content circle or outer circle. |
| Circle Border Size | Controls 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 | Controls 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 | Controls the spacing between circle and content. In pixels. |
| Title Typography | Controls the title typography, if left empty will inherit from globals. |
| Title Hover Color | Controls the title hover color. |
| Content Typography | Controls the content typography, if left empty will inherit from globals. |
| Icon Size | Controls the icon size. In pixels. |
| Icon Styling | Customize icon styling. |
| Icon Color | Controls the icon color. |
| Icon Background Color | Controls the icon background color. |
| Icon Border Size | Controls the icon border size. In pixels. |
| Icon Border Color | Controls the icon border color. |
| Icon Border Style | Controls the border style of the icon. |
| 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 | Controls the icon hover/active border size. In pixels. |
| Icon Border Hover/Active Color | Controls the icon border hover color. |
| Icon Hover/Active Border Style | Controls the hover/active border style of the icon. |
| 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. |
Background
| Heading | Description |
|---|---|
| Content Area Background Type | Use filters to see specific type of content. |
| 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. |
| Radial Direction | Select direction for radial gradient. |
| Gradient Angle | Controls the gradient angle. In degrees. |
| Background Color | Controls the background color. |
| Background Image | Upload an image to display in the background. |
| Background Position | Choose the position of the background image. |
| Background Repeat | Choose how the background image repeats. |
| Background Blend Mode | Choose how blending should work for each background layer. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Circle Info Options
Each Circle Info item has its own icon, title, text and optional link, and can override the title and content typography, the title hover color and the content area background.
General
| Heading | Description |
|---|---|
| Select Icon | Click an icon to select, click again to deselect. |
| Content Title | Title of the content. |
| Content Title Link | Add the title link for example 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. |
Design
| Heading | Description |
|---|---|
| Title Typography | Controls the title typography, if left empty will inherit from globals. |
| Title Hover Color | Controls the title hover color. |
| Content Typography | Controls the content typography, if left empty will inherit from globals. |
Background
| Heading | Description |
|---|---|
| Content Area Background Type | Use filters to see specific type of content. |
| 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. |
| Radial Direction | Select direction for radial gradient. |
| Gradient Angle | Controls the gradient angle. In degrees. |
| Background Color | Controls the background color. |
| Background Image | Upload an image to display in the background. |
| Background Position | Choose the position of the background image. |
| Background Repeat | Choose how the background image repeats. |
| Background Blend Mode | Choose how blending should work for each background layer. |
Tips
- Keep the text of each item short. It has to fit inside the content circle, and a narrow column or a small Max Width leaves little room.
- The icons react to the mouse or a tap but are not reachable with the keyboard. Make sure the important information is also available elsewhere on the page.
- Link Target is set to a new window by default. Switch it to Same Window for links to your own pages.
- Auto Rotate Time and Pause on Hover only apply when Auto Rotate is on. Give visitors enough time to read each item before the next one appears.
- The animation starts when the element scrolls into view, so it also works further down the page.