Blur Elements

Demo page

Introduction

This Plugin allows you to Blur out any Elements within your app such as a piece of text, an image or a group.
It can be used to blur out premium content for non-premium users or just as a UX tool for your app. You can trigger a Blur effect within a workflow, and you can define the opacity and Blur radius.
Please note that Blurring out an element will not hide the source code, therefore users might still be able to see the Blurred out information when going into page source code.

Features

How to Setup

After installing the Plugin you gain access to the "Blur" and "Remove Blur" actions within your workflow.
You will have to expose the ability to add an ID attribute to elements by going to settings->general and checking the box. See a short guide here: https://docs.rapidevelopers.com/how-to-assign-an-id-to-the-element
Set a unique element ID for the element where the blur effect should be applied and trigger a blur effect within a workflow, such as a click of a button.
Enter the same Element ID into the field named "Element ID" and specify the Blur radius and the opacity.
The opacity has to be a number between 0 and 1. To remove a blur effect simply run the "Remove Blur" action and specify the element ID of the element that had been previously blurred out.

Frequently Asked Questions

It can blur the main elements I have, but for a group within a group, it doesn't work.

Please note that as this plugin uses the CSS filter : blur()
This limits the plugin functionality to the fact that when this filter blurs the whole parent element (if it is applied to a parent) including all elements that are included inside, thus regretfully you cannot select something specific from the group as per your need.
So, if you selected a group to be blurred, then all elements within it will be also blurred.
⁉️
Have a question, or suggestion, or encountered an issue? 🤷‍♂️ Please contact us by sending an email to: support@rapidevelopers.com
Want to report a bug? Please follow this guideline!