Adding a Flex block with freely arrangeable elements
Flex block allows you to place elements by drag-n-dropping without restrictions such as columns or a block grid. For example, you can place 2 images so that one slightly overlaps the other and also add a heading with several letters over the image.
Elements in a Flex block have absolute positioning — an element's property that allows it to be placed anywhere in the block, not only within the block structure.
Note: Learn about useful life hacks and tips for working with Flex block in this article.
Contents:
Adding Flex block
Adding elements to a Flex block
Elements' arrangement one above the other (z-index)
Alignment of elements in a block
Changing block height
To add a Flex block, hover over the boundary between two blocks and click the Add Block button:
Open the section Blank and select Flex block:
In the upper left corner of the Flex block, click on the blue icon with a white plus sign and choose which element with absolute positioning you want to add:
Important: The following elements are currently available in the Flex block: heading, text, image, and button.
After that, you can place the elements in any way within this block. For example:
Tip: If you click on an element, you will see its size in pixels below it.
When moving an element, you can see 2 values under it:
X is the number of pixels from the left edge of the block to the element;
Y is the number of pixels from the upper edge of the block to the element.
These values help to understand with pixel precision where an element is placed. Then, you can take this information into account while placing other elements.
In the screenshot below, you can see the image's placement relative to the left and top edges of the block (arrows and blue text are added to the screenshot for clarity):
When there are multiple elements in a Flex block, you can customize which element will be displayed completely and which will be displayed only partially in case these elements overlap. In other words, you can change the z-index of elements: which element will be "closer" to the site visitor on the page (above other ones), and which one will be "deeper" (below other elements).
To change the element's position, click on the three dots in its upper left corner, and in the drop-down menu, select the option you need below in the Arrange section. In the following example, the first image is placed below the second image, but by clicking the Bring forward button, we can put the first image above the second:
In the "Arrange" section, there are 4 options:
"Bring to front" — the element will be placed on the frontest layer in this block, so this element will overlap all others;
"Bring forward" — the element will be placed 1 layer to the front ("closer" to the site visitor);
"Send backward" — the element will be placed 1 layer lower (deeper);
"Send to back" — the element will be placed on the lowest layer in this block, so all other elements will overlap it.
Note: If some of these buttons are light gray and unavailable, it means that the element is already at the lowest or frontest layer in the block.
Pay attention: Each element is always on a separate layer. That is, there are never 2 elements on 1 layer.
Tip: You can use hotkeys specified in the editor to control the arrangement of elements.
As a result, the second image is now located under the first one:
In the drop-down menu to the right of the word "Arrange", you can see the current z-index of the element. The larger this value is, the higher this element is located. The lowest image with absolute positioning has a z-index of 1000.
You can align elements with absolute positioning relative to the block by 2 options:
Horizontally: align left, align horizontal centers, align right;
Vertically: align top, align vertical centers, align bottom.
For example, to place an element in the lower left corner of the block, you need to press 2 buttons in the drop-down menu in the Alignment section: Align left and Align bottom. Then the element will be located in the following way (the block boundaries are displayed with dotted lines):
You can set the Flex block height you need in its settings. To do this, in the upper right corner of the block, click on the "gear" and enter the value you need in pixels in the Block height field:
Elements in a Flex block have absolute positioning — an element's property that allows it to be placed anywhere in the block, not only within the block structure.
Note: Learn about useful life hacks and tips for working with Flex block in this article.
Contents:
Adding Flex block
Adding elements to a Flex block
Elements' arrangement one above the other (z-index)
Alignment of elements in a block
Changing block height
Adding a Flex block
To add a Flex block, hover over the boundary between two blocks and click the Add Block button:
Open the section Blank and select Flex block:
Adding elements to the Flex block
In the upper left corner of the Flex block, click on the blue icon with a white plus sign and choose which element with absolute positioning you want to add:
Important: The following elements are currently available in the Flex block: heading, text, image, and button.
After that, you can place the elements in any way within this block. For example:
Tip: If you click on an element, you will see its size in pixels below it.
When moving an element, you can see 2 values under it:
X is the number of pixels from the left edge of the block to the element;
Y is the number of pixels from the upper edge of the block to the element.
These values help to understand with pixel precision where an element is placed. Then, you can take this information into account while placing other elements.
In the screenshot below, you can see the image's placement relative to the left and top edges of the block (arrows and blue text are added to the screenshot for clarity):
Elements' arrangement one above the other (z-index)
When there are multiple elements in a Flex block, you can customize which element will be displayed completely and which will be displayed only partially in case these elements overlap. In other words, you can change the z-index of elements: which element will be "closer" to the site visitor on the page (above other ones), and which one will be "deeper" (below other elements).
To change the element's position, click on the three dots in its upper left corner, and in the drop-down menu, select the option you need below in the Arrange section. In the following example, the first image is placed below the second image, but by clicking the Bring forward button, we can put the first image above the second:
In the "Arrange" section, there are 4 options:
"Bring to front" — the element will be placed on the frontest layer in this block, so this element will overlap all others;
"Bring forward" — the element will be placed 1 layer to the front ("closer" to the site visitor);
"Send backward" — the element will be placed 1 layer lower (deeper);
"Send to back" — the element will be placed on the lowest layer in this block, so all other elements will overlap it.
Note: If some of these buttons are light gray and unavailable, it means that the element is already at the lowest or frontest layer in the block.
Pay attention: Each element is always on a separate layer. That is, there are never 2 elements on 1 layer.
Tip: You can use hotkeys specified in the editor to control the arrangement of elements.
As a result, the second image is now located under the first one:
In the drop-down menu to the right of the word "Arrange", you can see the current z-index of the element. The larger this value is, the higher this element is located. The lowest image with absolute positioning has a z-index of 1000.
Alignment of elements in a block
You can align elements with absolute positioning relative to the block by 2 options:
Horizontally: align left, align horizontal centers, align right;
Vertically: align top, align vertical centers, align bottom.
For example, to place an element in the lower left corner of the block, you need to press 2 buttons in the drop-down menu in the Alignment section: Align left and Align bottom. Then the element will be located in the following way (the block boundaries are displayed with dotted lines):
Changing block height
You can set the Flex block height you need in its settings. To do this, in the upper right corner of the block, click on the "gear" and enter the value you need in pixels in the Block height field:
Updated on: 04/18/2024
Thank you!