Useful tips for Flex block
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.
Tip: Some of these recommendations can also be applied when using absolutely positioned elements in regular blocks.
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.
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.
Tip: Snapping is not carried out when moving elements using the arrows on the keyboard. This is convenient when you need to place an element at a distance of less than 5 pixels from the object to which snapping occurs.
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:
Note: Distance can be displayed along the X and Y axes (horizontal and vertical respectively).
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:
Hint: If you move an element closer than 100 pixels to a block borderline, the distance to it will be displayed automatically.
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.
Note: While the "Shift" key is held down, the element will only move along the axis along which you started to move it.
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.
Hint: If you select several elements with the mouse, they can be simultaneously moved along 1 axis.
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.
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.
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.
Tip: If you hold the "Shift" button, the resizing will occur proportionally.
Note: You cannot change the height of the “Text” element while editing batch elements.
Tip: Some of these recommendations can also be applied when using absolutely positioned elements in regular blocks.
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.
Tip: Snapping is not carried out when moving elements using the arrows on the keyboard. This is convenient when you need to place an element at a distance of less than 5 pixels from the object to which snapping occurs.
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:
Note: Distance can be displayed along the X and Y axes (horizontal and vertical respectively).
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:
Hint: If you move an element closer than 100 pixels to a block borderline, the distance to it will be displayed automatically.
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.
Note: While the "Shift" key is held down, the element will only move along the axis along which you started to move it.
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.
Hint: If you select several elements with the mouse, they can be simultaneously moved along 1 axis.
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.
Tip: If you hold the "Shift" button, the resizing will occur proportionally.
Note: You cannot change the height of the “Text” element while editing batch elements.
Updated on: 02/12/2024
Thank you!