Did you know you can allow the people viewing your genially to drag the elements around in your creation? Any element in your genially can be made draggable. 

Draggable elements will make your gamified activities much more fun. When you try it, you’ll discover that this form of interaction is irresistible to your audience; everyone will want to interact with your content! Plus, it’s a super easy-to-use feature; all it takes is one click to activate it.

In this tutorial we’ll look at:

Activate drag mode on an element

To activate drag mode:

1. Select the element you want to make draggable.

2. Click on the Drag icon (the hand) in the top toolbar in the Editor. You can also activate Drag by right-clicking on the element and then clicking on Activate Drag or by pressing the CTRL/CMD + D keys once you have selected the desired element; you can use whichever option is more convenient for you.

Activate drag mode on an element

And that’s it! We suggest clicking on the Preview icon in the upper toolbar to check how it works.

Activate the draggable elements indicator

Enabling the draggable elements indicator will make it easier for your audience to distinguish between the elements they can drag and those they can’t. To activate it:

1. Click on the dropdown menu in the top right-hand corner of the Editor and select Preferences.

2. Under Display Options, activate the Draggable elements indicator option.

The indicator is displayed in the top right-hand corner of the pages of your creation. When your audience clicks on it, the icon will appear to show them which elements they can drag, as seen below.

Activate the draggable elements indicator

How does drag mode work when viewing your genially?

Easy peasy! Click and hold the element and you’ll be able to move it all around the page and place it wherever you want.

How drag mode works when viewing your genially

It’s important to note that elements that have been dragged will return to their original position when:

  • You leave the page
  • You reload the genially
  • You close the browser tab where you were viewing the genially

If you want to do any of these three things, wait until you’ve finished interacting with the draggable elements.

Want to put this tutorial into practice? 

Check out this example of ways you can use draggable elements. 

In the Gamification section of your Panel there are other templates for creating games based on draggable elements, such as four in a row, parcheesi, hangman, and many more! Want to see them?