Want to place an image, icon or button at a specific spot in a block, independent of the normal element order? With the free position setting in your landing pages, you can position an element freely within its container. This makes it easy to create overlapping designs, such as an icon floating at the top centre of a block or a logo sitting in the bottom right of a section.
Which elements can be freely positioned?
Not every element supports free positioning. You can use it with:
Images
Icons
Buttons
Groups
Titles, subtitles, text blocks and other elements do not have this option.
Set up free positioning
Edit a landing page and click on the element you want to freely position (an image, icon, button or group).
The element's settings appear in the left-hand sidebar. Select the paint palette, click on Position and turn the switch on.
Choose a starting position using the position grid. The grid has eight positions to choose from. Click your desired position to place the element there.
ℹ️ The grid snaps to the container your element sits inside. In the example below, you can freely position the icon within the column.
Want to position the element more precisely? Use the X and Y fields to shift the element. A positive X value moves the element to the right, a negative value to the left. A positive Y value moves it downward, a negative value upward.
💡 Tip: use the position grid first to choose a good starting position, then fine-tune with the X/Y fields afterwards. This way you'll get to the right placement much faster.
Examples
Use free positioning for buttons on mobile to place them outside the column 👇
Use free positioning for icons and position them halfway through a block for a subtle transition effect 👇
Use free positioning for images to create a playful effect 👇
Frequently asked questions (FAQ)
Within which container is the element positioned?
Within which container is the element positioned?
The element is positioned within its direct container (the column or group the element belongs to). It does not move freely across the entire page.
My element is partially covered by an adjacent block. How do I fix this?
My element is partially covered by an adjacent block. How do I fix this?
When you freely position an element, its surrounding block automatically receives a higher layer order (z-index) than adjacent blocks. If you also freely position an element in a neighbouring block, this can cause overlap again. In that case, it is recommended to adjust the layer order manually.
Can I set a different free position for mobile?
Can I set a different free position for mobile?
You can switch between the desktop and mobile views in the page builder. Adjust the position settings in the desired view to make sure the element is placed correctly on every device.