Image Cropping UI

The Image Cropping UI gives you more control over uploaded files while also providing a clean user experience.

Let your users crop images they upload with the Image Cropping UI

The Image Cropping UI is a Form Extension designed to make both your and your user’s file upload experiences better by providing a sleek UI with greater control both in the Elementor editor and in the front end form that the user will fill out.

You can find and use this function by creating a simple File Upload form field, and toggling on Enable Image Cropping.

This toggle will give the user the ability to crop the image after they’ve uploaded it.

Enable Image Cropping.

Once toggled on in the File Upload field settings, Enable Image Cropping will let your users do just what it says in the name.

The tool sports extreme customization as is usual with Gloo features, allowing you to change the container’s size, style, typography for the button, background, text and border colors. Within the container, the viewport showing a preview for the image can also be customized in width and height, as with its boundaries.

With that set up, every image uploaded using the File Upload field will present the user with a quick and easy tool to crop the image as they please, if needed. They can either save the changes they’ve made, or just not crop the image at all.

Dependencies: Elementor Elementor Pro

What is the Image Cropping UI for Elementor?

The Image Cropping UI is a Gloo Form Extension for Elementor that allows users to crop images they upload to the website. It provides a sleek and customizable interface both in the Elementor editor and in the front-end form.

How do I enable the Image Cropping UI in Elementor?

To enable the Image Cropping UI in Elementor, you need to create a simple File Upload form field and toggle on the “Enable Image Cropping” option in the field settings. This will give your users the ability to crop the image after they’ve uploaded it.

Can I customize the Image Cropping UI?

Yes, the Image Cropping UI is highly customizable. You can change the container’s size, style, typography for the button, background, text and border colors, and customize the viewport showing a preview for the image in width and height, as well as its boundaries.

Play Video

THIS FEATURE IS PART OF :

Scope : Elementor Pro Form

Got A Question ?

We Are Here to Help

Image Cropping UI

Allow for cropping of images, directly by your users on the frontend.

Add a new form - choose file upload form field - toggle on enable image cropping

Works best with the image upload ui enabled

To get the UI on your File Upload field looking like ours here on the left, toggle on Image Upload UI in the field options.

CUSTOMIZE VIEWPORT AND OTHER OPTIONS TO YOUR LIKING

This feature comes included with extreme customization capabilities. Remember to set up the UI to your liking using the options that appear once you toggle the feature on in the field options.