Absolute positioning of elements in ordinary blocks
Absolute positioning is a property of an element that allows it to be placed anywhere within a block, not just within the block structure (its grid).
By default, all elements on Weblium are placed one by one in the block columns. For example, a heading, image, and button can be placed in one column, and these elements have some space between them. With absolute positioning, you can place elements out of the column and overlap other elements. It allows you to implement many creative design ideas and place elements elegantly.
Important: You can apply absolute positioning to the following elements: heading, text, image, and button. Also, absolute positioning is currently not available in all blocks.
Tip: If you are creating a block from scratch and want to place elements there with absolute positioning, we recommend using a Flex block specially designed for it. More about it and elements with absolute positioning you can learn in this guide.
Note: You can learn about how to control the position of elements' arrangement one above the other (z-index) in this section of the guide about the Flex block. And you can learn about aligning the elements in a block horizontally and vertically in this section of the guide.
In addition to using a Flex block where all elements have absolute positioning, you can apply absolute positioning to elements inside a custom block and many more other ones. To do this, click on the three dots in the upper left corner of the needed element and click on the Absolute positioning:
After that, the element will be detached from the block's structure, and you can place it in any way, for example, over another element. In the example below, absolute positioning was applied for one image and placed above another static image:
Below the selected image, you can see its dimensions in pixels.
Please note: In the first screenshot, the "Learn more" button was placed at the bottom of the right column, but after applying absolute positioning to the image above it, this button ended up at the top of the column. So the button took the place of the image. Thus, when absolute positioning is activated, the element stops having its own space in the block's column and frees up space for other elements.
Tip: If you want to leave a blank space in a column where an element used to be, you can add a Spacer element using this tutorial.
You can change the size of an image by holding the left mouse button on the border of the element and dragging the mouse pointer to the center of the image (to reduce it) or away from the center (to enlarge it);
Double click on the image to open its settings;
When moving an element, a dotted line leads from it to the upper left corner of the block, which helps to understand which block the selected element belongs to;
Hold down the Shift key and select several elements with the left mouse button to move them simultaneously;
After applying absolute positioning to the elements, you should open the editor for mobile and tablet site versions and individually move elements to display them in the way you need.
You can move elements 1 pixel by pixel using the arrow keys on your keyboard.
Absolute positioning for elements is unavailable in collection blocks and some other blocks.
If you've applied absolute positioning to an element, you can return it to static (ordinary) positioning so that the element is positioned within the columns (grid) of the block. To do this, click on the three dots in the upper left corner of the needed element and click on the Static positioning in the drop-down menu:
Note: In a Flex block, elements cannot be made static, because the Flex block does not contain columns (grid structure).
This way, the element will be placed on the left in the highest column in the block. After that, this element can be moved only within the block's columns (within the block's grid). In the example below, the already static element is placed in the left column:
By default, all elements on Weblium are placed one by one in the block columns. For example, a heading, image, and button can be placed in one column, and these elements have some space between them. With absolute positioning, you can place elements out of the column and overlap other elements. It allows you to implement many creative design ideas and place elements elegantly.
Important: You can apply absolute positioning to the following elements: heading, text, image, and button. Also, absolute positioning is currently not available in all blocks.
Tip: If you are creating a block from scratch and want to place elements there with absolute positioning, we recommend using a Flex block specially designed for it. More about it and elements with absolute positioning you can learn in this guide.
Note: You can learn about how to control the position of elements' arrangement one above the other (z-index) in this section of the guide about the Flex block. And you can learn about aligning the elements in a block horizontally and vertically in this section of the guide.
Enabling absolute positioning for an element
In addition to using a Flex block where all elements have absolute positioning, you can apply absolute positioning to elements inside a custom block and many more other ones. To do this, click on the three dots in the upper left corner of the needed element and click on the Absolute positioning:
After that, the element will be detached from the block's structure, and you can place it in any way, for example, over another element. In the example below, absolute positioning was applied for one image and placed above another static image:
Below the selected image, you can see its dimensions in pixels.
Please note: In the first screenshot, the "Learn more" button was placed at the bottom of the right column, but after applying absolute positioning to the image above it, this button ended up at the top of the column. So the button took the place of the image. Thus, when absolute positioning is activated, the element stops having its own space in the block's column and frees up space for other elements.
Tip: If you want to leave a blank space in a column where an element used to be, you can add a Spacer element using this tutorial.
Useful tips:
You can change the size of an image by holding the left mouse button on the border of the element and dragging the mouse pointer to the center of the image (to reduce it) or away from the center (to enlarge it);
Double click on the image to open its settings;
When moving an element, a dotted line leads from it to the upper left corner of the block, which helps to understand which block the selected element belongs to;
Hold down the Shift key and select several elements with the left mouse button to move them simultaneously;
After applying absolute positioning to the elements, you should open the editor for mobile and tablet site versions and individually move elements to display them in the way you need.
You can move elements 1 pixel by pixel using the arrow keys on your keyboard.
Absolute positioning for elements is unavailable in collection blocks and some other blocks.
Return the static positioning of the element
If you've applied absolute positioning to an element, you can return it to static (ordinary) positioning so that the element is positioned within the columns (grid) of the block. To do this, click on the three dots in the upper left corner of the needed element and click on the Static positioning in the drop-down menu:
Note: In a Flex block, elements cannot be made static, because the Flex block does not contain columns (grid structure).
This way, the element will be placed on the left in the highest column in the block. After that, this element can be moved only within the block's columns (within the block's grid). In the example below, the already static element is placed in the left column:
Updated on: 04/18/2024
Thank you!