[New Plugin] Visual Move, Rotate, Resize

Move, rotate and resize an element or class of elements.
Elements can be transformed both visually and interactively on the front end or in workflows on the back end.

:high_brightness: Features:

  1. Move a element visually:

  2. Resize an element visually:

  3. Rotate and element visually:

  4. Move, rotate and resize the same elements in the back-end workflows. Keeping sync between both front-end and back-end transformations.

  5. Lock the aspect ratio for resizing.

  6. Restrict the transformations to a bounding container.

  7. Set the color of the controls box.

  8. Set snap distance for move, resize

  9. Set angle resolution for rotation


  1. Restrict and aspect ratio only work for visual transformation. Back-end actions will not be restricted.


  1. Remember the hash or dot for class and ID field.
  2. The restrict field should be an element ID. Remember to include the has e.g. #myBox
  3. The plugin back-end actions are standalone and should be used only for simple transformations when you don’t wan the visual element.

Go checkout the demo!

We are actively monitoring this thread. If you have an questions, bug reports, feature request, please let us know. We aim for a 24hr response time during the working week.

You can also reach out at support@gtb3.co.za

Click here for the Editor


  1. First install the amazing classify plugin.

  2. Make sure that you have activated the Expose Element ID option in Settings=>General
    Screenshot 2022-03-16 135229

  3. For a visual element.
    3.1) Drag the visual transformation element onto your page.
    3.2) Set its visibility to off.
    3.3) Add the class or element id into the class field. Classes need a dot (.img) and IDs need a hash (#myImg).
    3.4) Make sure your element has the same class/ID. Using classify you would put “myImg{addClass:” img"}" in the ID Attribute field to add the ID myImg and class img to your element. See the classify docs for details.
    Screenshot 2022-03-16 135945
    3.5) Complete the other option fields on the Visual Transform element as needed.
    3.6) Add a workflow to make the Visual Transform Element visible once the page is loaded.
    3.7) Load your page and play!

  4. Back-end Workflows
    4.1) For back-end workflows to work, you need to make sure you have a visual transform element on your page an visible.
    4.2) Click Add Action => Element Actions => Move / Rotate / Resize a Visual Transform
    4.3) Complete fields as required
    4.4) Fire action

  5. Additionally there are standalone back-end actions. Be warned these don’t play nice with elements that are also being used by the visual component. Use the element back-end actions for these.
    5.1) Click Add Action => Plugins => Move & Rotate or Resize
    5.2) Fill out fields as needed.
    5.3) Fire actions.


Hello, this is awesome! I have a question however. Would this work for mobile apps as well? I was originally using the JQuery bubble drag and drop plugin but it just randomly stopped working about two days ago, not sure why. So if this could work for mobile apps, it would be fantastic!

Hi @julpereira82 !

It does work on mobile! We are busy doing some refactoring and optimizations to better serve mobile apps, those should be done by the end of the week.

Hi there i just discover this awesome plugin, i have a few presale questions

  1. can change the style of the resize dots?
  2. can turn on the Lock Aspect Ratio with shift?
  3. can resize any element?

Hi @yorgio1024

To answer your questions:

  1. Currently you can only change the color of the resize dots.
  2. No there are no keyboard shortcuts.
  3. Works with most elements. Videos don’t work at the moment.

Any update for this plugin?

Hi @yorgio1024

There have been some minor updates. The font size now can be set to change with resize of the element, there has been some backend refactoring and states are handled better. An aspect ratio and dot size change are on the roadmap but not due for a couple weeks.


Is it possible that it doesn’t work on the new responsive engine? Because i followed the instructions but nothing will happen.

Hi Jos2,

In our testing the plugin does work in the new engine. Please can you give me a bit more detail as to what is happening and I will try and resolve your issue. Thanks.

I got it almost working. But how do i set the start size height and width of 100px and that it is still scaleable bigger and smaller. Now i set an max-width:100px en max-height:100px and then it start at 100px but it can only be smaller, not bigger than 100px. If i use widht:100px and height:100px then it stays 100px; and when i use min-widht/height then it cannot be smaller.

@tech13 Hi, I’ve just purchased the plugin and I love it!

I’d also like to draw your attention to a tiny bug I’ve noticed: when the element controls for resizing and moving are visible and the element being manipulated gets hidden (e.g. the user clicks the X button to dismiss a floating group element), the element controls remain behind and the user then has to manually click somewhere else on the page so the controls would disappear as well. Any chance of fixing that in the next release?


One more bug, actually… :sweat_smile:

Let’s say the element that’s set up to be moved and resized using the plugin is hidden at the moment. If the user clicks and drags anywhere on the web page, the normal text selection behavior is all gone and is now replaced by some sort of a selection rectangle being drawn by the user. Additionally, drawing that selection rectangle can also select the resizing/moving element controls for the hidden element, even though the element itself is still not visible. (I think it’s the same issue I pointed out above, with the controls being shown for hidden elements.)


Thanks for the bug reports. I will get working on these and let you know when we push and update. Hopefully we can sort them out quickly.

1 Like

No problem, thanks for the quick reply.