Positioning elements correctly is key to creating layouts that look great on all devices. In GemPages Editor, you can control an element’s position using Margins or the Position settings, ensuring flexibility while maintaining responsive design principles.
About Element Position
In web design, the position of an element is relative to its containing parent element.
For example, a button placed inside a column within a row can only be moved within the boundaries of that column unless otherwise specified.
Why Positioning Matters:
Responsive Web Design ensures that your page adapts seamlessly across various screen sizes. Adhering to layout principles and using the correct positioning methods ensures your design looks professional on all devices.
Change Element Position Using Margins
Margins are a simple way to adjust an element’s position by adding space around it.
Step 1: Select the Element:
Click on the element you want to change the position.
Step 2: Open the Advanced Tab:
In the settings sidebar, navigate to the Advanced tab.
Step 3: Adjust Margins in Spacing:
Use positive margins to add space around the element.
Use negative margins to position elements outside the boundaries of their container for unique designs.
Step 4: Test Responsiveness:
Preview your design on different device views to ensure alignment remains consistent.
For a detailed guide on margins, see our Margin Settings Article.
Change Element Position Using the “Position” Settings
The Position setting offers advanced options to control where and how elements are displayed on the page.
Differences Between Margins and Position Settings:
- Margins: Adjust spacing around an element while keeping it within the flow of its container.
- Position Settings: Remove the element from the normal page flow (except for Static position) and allow custom placement.
Here’s how to edit the position settings of an element:
Step 1: Select the Element
Click on the element you wish to reposition.
Step 2: Open the Advanced Tab:
Go to the Advanced tab in the sidebar.
Step 3: Find the Position Section:
Locate the Position dropdown menu and choose one of the following options:
Position Setting Options:
- Static:
- Default setting; the element follows the normal flow of the page.
- No custom position adjustments are allowed.
- Relative:
- Moves the element relative to its original position.
- Adjust custom values for Top, Right, Bottom, or Left to shift its placement.
- Absolute:
- Positions the element relative to its nearest positioned ancestor (e.g., a Row or Section).
- Use Top, Right, Bottom, and Left to place the element exactly where you want within its containing element.
- Fixed:
- Keeps the element in a fixed position relative to the viewport.
- Great for sticky headers or floating buttons that stay visible during scrolling.
- Sticky:
- Acts as a hybrid of relative and fixed positioning.
- The element behaves as relative until it reaches a specific scroll position, then it becomes fixed.
- Useful for creating sticky menus or navigation bars.
