FX – Molten Gradient

The FX – Molten Gradient widget adds fluid, animated color to your site with a living gradient that flows, waves, and reacts to interaction. Customize colors, motion, and wave size to create a dynamic background or section effect that brings depth and movement to modern layouts.

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, everything else in the row (such as text and images) appears on top of the effect – as it should.

Preview: https://demo.wocode.com/fx-molten-gradient

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

• Drop the widget into your site and place it where you would like the molten gradient effect to be seen. It may be placed in a row or column.

WIDGET OPTIONS

• Open the widget option panel.

  
  

• Apply to: This dropdown provides multiple options for how you choose to apply the effect. The available options are Current Row, Current Column, Entire Page, Custom CSS Selectors, Flex Section (Flex Layout Only) and Flex Grid (Flex Layout Only).

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

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

  • Entire Page: Applies the effect to the background of the entire page. In this case, the widget may be placed anywhere on the page except the header or footer. Placement in the header or footer will result in the effect being applied to the entire site.

  • 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 column. This can only be used in Flex layouts.

• Number Of Lines: Controls how many lines appear in the effect.
• Velocity: Sets the speed of the effect when there is no interaction.
• Velocity On Interaction: Adjusts how fast the effect moves when interacted with.
• Allow Mouse/Touch Interaction: Allows users to click or tap and hold on the widget to temporarily speed up the animation.

DESIGN SETTINGS

The Design section allows you to customize the look and feel of the molten gradient effect.

• Start Color: Sets the top color of the gradient.
• End Color: Sets the bottom color of the gradient.

The widget automatically blends the gradient between the selected start and end colors.

• Amplitude Y: Controls the vertical size of the gradient waves.
• Amplitude X: Controls the horizontal size of the gradient waves.

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.