The FX – Frost widget applies a blurred effect to the image or video background of a row or column, creating a frosted glass look. This effect can be extremely effective for making text and buttons that are placed on top really pop. Grayscale and sepia tint can be added for additional effect.
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.
WIDGET PLACEMENT AND SIZING
- Drop the widget into your site and place it where you would like the blur effect to be seen.
- The widget is best used where an image is set as a background. You may place in a row, column or inner row.
- The blur effect will be applied to the entirety of an image background – however, you may also use the widget in a column where the row behind has a background image set, creating a “frosted panel” look. See the Technique: Frosted Glass Panel section below.
- 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.
The Design section allows you to customize the look and feel of the Frost effect.
- Blur Size: This sets the strength of the blur.
- Additional Effects: Grayscale and Sepia are available as additional effects. To add, enable the radio button for the effect. These effects are added in addition to the blur / frosted glass effect.
- Effect Value: This sets the strength of the additional effect (Grayscale or Sepia). Note that this slider only affects the additional effect, and does not affect blur.
- Hide Overflow on Target Element: When this toggle is enabled, the blur effect will be contained within the container it’s placed in. When this toggle is disabled, the blur will overflow out of the container. Larger Blur Size values will result in greater spill.
Technique: Frosted Glass Panel
In the widget demo, we use a technique that uses the widget to create a frosted glass panel effect. This technique is described below:
- Apply an image background in a row.
- Set the row background image to “Cover” and “Keep image position static”.
- Add a column within the row.
- Apply the same image as the column image background.
- Set the column background image to “Cover” and “Keep image position static”.
- Apply a Background Overlay color – white works best.
- Add the FX – Frost widget to the column. Set “Apply to” as Current Column.
- You will now see a frosted panel effect, where the frosted effect is seen on just a portion of the row image, and is contained within the column. Experiment with the Blur Size setting in the FX – Frost widget, as well as the Overlay Opacity in the column image background settings to fine tune the frosted glass effect.
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.