HomeBlend Mode

Blend Mode

The Blend Mode feature allows you to apply different blending effects to elements, enhancing the visual presentation by merging layers creatively. This can be used to achieve unique effects like transparency, contrast, and color mixing.

Where Can Blend Mode Be Applied?

Blend Mode settings can be applied to:

  • Container
  • Section
  • Column
  • Widget

Enabling Blend Mode

  1. Navigate to the Advanced tab of the Container, Section, Column, or Widget where you want to apply the effect.
  2. Locate the Blend Mode section.
  3. Toggle Enable Blend Mode to Yes to activate the feature.

Blend Mode Options

Once enabled, you can choose from various blend modes to achieve different visual effects. The available options include:

  • Normal – No blending, the default setting.
  • Multiply – Darkens overlapping elements.
  • Screen – Lightens the underlying elements.
  • Overlay – Enhances contrast by combining Multiply and Screen effects.
  • Darken – Keeps the darker colors from overlapping layers.
  • Lighten – Keeps the lighter colors from overlapping layers.
  • Color Dodge – Brightens overlapping areas.
  • Color Burn – Darkens overlapping areas for intense contrast.
  • Hard Light – Increases contrast with light and dark effects.
  • Soft Light – Applies subtle contrast for a smoother look.
  • Difference – Subtracts pixel values to create an inverted effect.
  • Exclusion – A softer version of the Difference mode.
  • Hue – Blends based on the hue of the top layer.
  • Saturation – Uses the saturation values of the top layer.
  • Color – Blends colors while preserving brightness.
  • Luminosity – Adjusts brightness while keeping color properties.