About Element Alignment
Element alignment refers to the positioning of content (such as text, images, or buttons) within a container or layout.
Proper alignment ensures that your design looks clean, balanced, and professional, enhancing both the aesthetics and functionality of your page.
How to Align Row Element
Step 1: Choose the Element to align.
In the GemPages Editor. Click on the row you want to align to open the row’s Settings from the left-hand sidebar.
Step 2: Set Column Width.
The column width determines how content is distributed within the row. GemPages offers two modes for column width:
- Fit to Content: The column automatically adjusts its size to fit the content inside.
- By Ratio: Set fixed proportions for the columns within the row.
Step 3: Align Content.
Adjust how content is aligned within the row for both vertical and horizontal positioning.
Vertical Alignment
Vertical alignment adjusts the position of content along the y-axis (top to bottom). Choose one of the following options:
- Top: Align the content to the top of the column.
- Center: Center the content vertically within the column.
- Bottom: Align the content to the bottom of the column.
- Spacing: Distribute space evenly between content items.
Horizontal Alignment
Horizontal alignment adjusts the position of content along the x-axis (left to right). In this case, this setting is available only in Fit to Content mode. There are 4 options:
- Left: Align the content to the left of the column.
- Center: Center the content horizontally.
- Right: Align the content to the right of the column.
- Spacing: Distribute space evenly between content items.
Step 4: Fine-tuning with Padding and Margins
Padding and margins allow you to fine-tune the spacing around your elements for a balanced look.
Go to the Advanced Tab, and adjust the margin & padding.
How to Align a Single Element
Step 1: Select the Element (image, button, text,etc)
Click on the element. The settings for the selected element will appear in the left-hand sidebar.
Step 2: Navigate to the Align section in the sidebar settings. Choose 1 alignment option.