Tools on the Editor

Learn how to align and arrange elements

Akshaya Kumar avatar
Written by Akshaya Kumar
Updated over a week ago

The Tools button allows you to align and arrange elements of your page.

In this article, we will understand the basic tools that you can use to create experiences on Cleverstory. We will split the toolbar into 3 tabs:

  1. Design Editing tools

  2. Alignment tools

  3. Positioning tools

Design Editing tools

The first tab consists of the basic design editing tools that are needed. To apply any of these, select the particular element that you want to edit like a text box or a shape, and apply the tools.

Copy - You can select and copy one or multiple elements in one go.

Paste - Upon clicking this you can paste all the elements that you have copied earlier.

Clone - Select an element and choose “Clone” and it will copy, and paste the element directly for you.

Delete - Select an element and delete. You can also undo this if you delete something unintentionally.

Alignment tools

The second tab consists of all the tools that are required for aligning the elements on the editor.

Arrange - When there are multiple elements on the editor, aligning them becomes necessary. You can align an element accordingly. For eg, if you want a background color after adding a text box, you can simply add a Shape and Send it backward.

Align - Aligning an element is very straightforward. Choose the respective elements that you want to align in any direction.

Match Size: When you have various elements on the editor in one section and want to ensure the alignment is proper, this option will help you match the height, width, and entire size of all the elements equally.

Note: This option is available only when multiple elements are selected at once.

Distribute Equally:

This functionality helps in matching the gap or space between elements that are placed horizontally or vertically.

For eg, if you have placed 3 buttons next to each other but not spaced them out equally, this would help you in equal spacing. Below is an example of how it works:



Positioning tools

These tools apply to elements like Text box, Shape, Button, and Media. For eg, we are using an image here. You can position the image by manually adding the respective number to the angle or use the rotating button to do so.

Apart from angling the image, you can also manually define the size of the image by adding the Width and Height of the image and positioning the image on the editor. The number is calculated in pixels.

Still have queries? Send them to us at and we'll be glad to assist.

Did this answer your question?