In this article, we'll look at specific convenient options that you can use to save time and overall convenience when working with Flex block.

General helpful tips

• You can resize an image by holding down the left mouse button on the border of the element (so that a double-sided arrow appears instead of a cursor) and dragging the mouse pointer to the center of the image (to make it smaller) or away from the center (to make it larger).
• Double-click on the image to open its settings.
• When you move an element, a dotted line leads from it to the upper left corner of the block, which helps you understand which block the selected element belongs to.
• After adding elements to the Flex block, you need to open the editor for the mobile and tablet versions of the site and arrange the elements there as you need.
• Absolute positioning of elements is not available in collection blocks and in some other blocks.

Below, we will look at additional useful options and life hacks that may be useful when working with Flex block.

Moving absolute elements by using a keyboard

You can use the keyboard to move elements in a Flex block.

Just select an element and use the arrows on the keyboard. A one-click on the arrow will move the element 1 pixel in the corresponding direction.

Moreover, you can move elements in 10-pixel increments by holding down the Shift key. This allows you to quickly and efficiently move elements with one-pixel precision.

Displaying distance between elements in Flex block

• You can track the distance between absolute elements in a Flex block.

To do this, select one element and hover the cursor over another, to which you need to see the distance:

• The displaying of the distance between diagonally arranged elements occurs along the X and Y axes to the corner of the required element.

• It is also possible to see the distance from the edge of one element to another during overlay. In order to see the distance of two elements superimposed on each other, you need to hold down the Alt key (for Windows) or Option (for macOS):

• In addition, you can see the distance from the element to the block boundaries by clicking on the element and holding down the aforementioned key:

Moving elements in Flex block by only 1 axis (X or Y)

Before moving an element with the mouse cursor, you can hold the Shift key down to lock its location along the X or Y axis.

This allows you to manage parts of your site more conveniently. For example, if you only need to move an image left or right, then thanks to this functionality, you can avoid accidentally moving an element vertically or horizontally.

Copying elements by using the Alt (Option) key

You can duplicate elements by holding down the Alt key (for Windows) or Option (for macOS).

To do this, hold down the corresponding key and start moving the selected element:

After performing this action, a copy of an element will be automatically created, and you can arrange it anywhere in the block.

Managing multiple elements in a Flex block at the same time

You can select several elements with your mouse or successively click with a Left Mouse Button on the elements while holding the Shift button.:

This way, you can move several elements simultaneously, copy and delete them, and align content in a selected group of elements.

Resizing several elements at once

You can also resize multiple elements at once in a Flex block. By selecting a group of elements, you can resize each simultaneously.

During the batch image editing, the resizing will occur according to the settings you have set. For example, turning the Scale to fit switch on in image settings will change size proportionally, and vice versa if the Scale to fit switch is turned off.

Updated on: 02/12/2024