FX – Rings

The FX – Rings widget displays a series of colorful rings that rotate in opposing directions, all while the entire concentric grouping tilts in a 3-dimensional space. Use this effect as a one-of-a-kind background for important headlines, heroes or features on your site.


The FX series of widgets are built with simplicity in mind, providing one dedicated effect that is used as a background for a row, column or other page element. Since these effects are applied as backgrounds, you can work freely with other elements within a row, column, etc. while the visual effect remains in the background.


Preview: https://demo.wocode.com/fx-rings

Setup

WIDGET PLACEMENT AND SIZING

Drop the widget into your site and place it into a row or column where you would like the rings effect to be seen as the background of that row or column.

Note: while it is possible to use multiple FX – Rings widgets on the same page, we do not recommend using multiple instances of FX – Rings (or other FX series widgets) on a page. These widgets require a significant amount of graphics processing power. Multiple instances of GPU-hungry effects can result in reduced page speed on older computers or machines with slower GPU’s.

WIDGET OPTIONS

  • Open the widget option panel.
  • Apply to: This dropdown menu offers a variety of ways to apply the effect. There are five options available:

• Current Row: Applies the effect to the background of the row where the widget is placed.

• Current Column: Applies the effect to the background of the column where the widget is placed.

• Entire Page: Applies the effect to the entire page background (except header or footer). Placing the widget in the header or footer applies the effect site-wide.

• Custom CSS Selectors: This advanced option allows you to target elements using their CSS class or ID. This is useful when trying to apply the effect to the backgrounds of things where a widget cannot be placed, such as a gallery or slideshow. See the "Advanced: Using Custom CSS Selectors" section below for more information.

• Flex Section (Flex Layout Only): Applies the effect to the background of a Flex column. This can only be used in Flex layouts.

• Flex Grid (Flex Layout Only): Applies the effect to the background of a Flex grid. This can only be used in Flex layouts.


  • Mouse Control: When enabled, the ring’s background effect responds to mouse movement on desktop.
  • Touch Controls: When enabled, the ring’s background effect reacts to touch on mobile devices.

DESIGN SETTINGS

The Design section allows you to customize the look and feel of the ring's effect.

  • Minimum Dimensions: Sets the dimension of the widgets container. There are 2 dimension options available:

    • Automatic: Resizes the FX Rings widget automatically to fill the container or row where it is placed.

    • Custom: Allows manual adjustment of both the minimum width and height of the widget container.

  • Background Color: Sets the background color visible behind the ring’s effect.
  • Background Color Opacity (%): Adjusts the opacity of the background color.

ADVANCED: USING CUSTOM CSS SELECTORS

The  Apply to setting gives the option for Custom CSS Selectors. This allows you to target most any element on the page, including things that cannot be targeted using the other Apply to options; such as slideshows, galleries, etc.

Using Custom CSS Selectors requires that you identify the class or ID of the element you’re targeting. The best way to do this is to use the Edit HTML/CSS option.

In this example, we will use the class of a gallery as a custom CSS selector.

  • Right-click the element you wish to target.
  • Select Edit HTML/CSS.
  • Find the div class and copy it.
  • Paste the class in the Custom CSS Selector field in the widget.
  • Note that a period has been added in front of the class name. Class names should begin with a period (.) and IDs should begin with a hashtag (#). This step is required, and is a rule of working with CSS classes and IDs.
  • The effect will now be applied to the gallery only.