Custom code works on all paid plans (except for the archived Creator plan). With a Free plan, you can see working code in Preview mode but not in a published project.
This code allows you to add a blur effect to widgets in the background. To try it out:
- Add a widget (e.g. Shape or Picture) above the content you want to blur.
- Make this widget transparent (or semi-transparent, if you want the blurred area to have color). To do so, select the widget, click the Color attribute and change the opacity to any value less than 100% (otherwise you wouldn’t see what’s behind the widget).
- Find the ID of the widget as shown here.
- Open the Code Editor and paste this code into the CSS tab. Don’t forget to replace the fragment
"PASTE WIDGET ID HERE"
with your widget’s ID from step 3.
[data-id="PASTE WIDGET ID HERE"] {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
The result: