3. Elements size and position

Updated : Sep 10, 2014



Add an element to the scene

In order to add a media to the scene of a sequence, you can simply drag and drop the media from the medialibrary to the scene.

On the other hand, to add a text element, a button, a form or an iFrame, right-click on a Text of Object sequence and select the “Add” option.
 

Resize an element

You can manually resize an element. Select one on the canvas or from the timeline. A red frame appears around the element to inform that it is selected. There are also red dots on each corner of it.

By selecting one of the dots at a corner, you can resize an element. To keep the ratio while resizing, keep the Shift key pressed down.  


Position elements manually

When imported in a scene, the medias have a default position. The videos automatically adapt to the size of the player. The images keep their original dimensions and are positioned where you drop them. The buttons, forms and iframes are by default positioned at the center of the scene while the buttons are positioned on the right side.

You can manually update the position and move an element by drag and dropping with your cursor, or using the arrows of your keyboard. You can also move several elements at a time. Keep the Shift key pressed down and click on several elements to select them all. To move them, use the arrow keys of your keyboard.

NB: While moving elements with the arrows of your keyboard, you can raise the interval to 10px by keeping the Shift key pressed down.


 

Position the visual elements with the properties panel

​When moving an element on the scene, you can see that the coordinates are also modified in the properties panel. You can manually update the position and the size of the elements directly from this panel.

By selecting the "Fit to window" option, a visual element automatically takes the size of the full window of your project.



If you uncheck this option, you can then manually update the position (according to X and Y) and the size (width and height) of your element.

N.B: The position is calculated from to the center of the scene, where X=0 and Y=0. As a result, if you move an element you might have negative values.


The responsive settings

The responsive settings offers a second level of positioning. They allow to position your elements to fit a responsive setting, according to the sides of the window of your project. Thanks to that option, your elements can automatically adapt their position and display to fit multiple kinds of screens.

N.B: To understand the essential principles of responsive design, we recommend to follow our tutorial: Build a responsive sequence.​



Four checkboxes activate the position according to each side (top, right, bottom, left). For example, by checking the left checkbox, the element will be positioned according to the left side. Depending on the expected behavior, you can check one or multiple boxes or even all four of them.

Once the checkbox is selected, you can decide of a margin on that side. In the example below, the video is set to have a certain margin for each side (since all the checkboxes are selected), on the right and on the left, a 100px margin has been applied.



In the following example, a margin has been applied to the top and bottom sides. As a result, the video systematically has a top and bottom margin, even with multiple screen sizes. You can test the various screen types by clicking the pictograms at the bottom of the scene. In the second screenshot below, the display options are the same but it is on the ratio of a horizontal and vertical iPad.




A few extra options can help make positioning more accurate. The proportional size / fixed size options allow to adapt the size of your element according to the size of the screen. By choosing Fixed size the element always keeps the same size.While by choosing proportional size the element will grow or shrink according to the size of the screen.

The Fill Options allow to choose the behavior of the container of the element and the media inside it. The Zoom option has the media inside the container cropped if the ratio is not the same. On the other hand, the Letterbox option won’t crop the media, instead it will keep the full media visible and add transparent stripes if the ratio is different between the container and the media.

In other words, the "Zoom" option allows to zoom inside a media. When this option is selected, a second dropdown appears where you can choose from which reference point you want the media to be zoomed in or out (center, top/left, top/right, bottom/left, bottom/right).

N.B: Note that the reference point of the "Zoom option" is not taken into account inside the sequence editor of Klynt. To see the result, you can preview your project inside your browser (Cmd+R / Ctrl+R).


​Automatic position

You can automatically position your buttons and texts in order to earn some time and make sure that these elements are always at the same place. This option can also be useful for positionning navigation arrows, titles or subtitles.

By default, automatic positioning is activated on standard buttons and texts. You can activate or deactivate this option from the properties panel of your elements by checking the "Default size and position" option.

To update the settings of automatic positioning, open the "Design Settings" panel (from the "Project" tab). By selecting a text or button style, you can update the position by default.

Language



Contact Us

email: support[at]klynt.net

Webinars


maria@klynt.net
http://assets2.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete