Adjusting the margin in a column helps you control the space around it. This can make your content feel more balanced, improve readability and ensure everything looks well-spaced and aligned. By setting custom margins, you can create a cleaner design that fits your brand style and enhances the user experience.
When adjusting margins in your page, it's important to note that desktop and phone views have separate margin settings. This allows you to optimize the design for different screen sizes. You can first set your margins for the desktop view in the Default settings, and once you're satisfied, switch to Phone settings to adjust the margins for mobile devices.
Step 1: Open the margin settings (desktop view)
Click “Add empty row” to start.
A new row will automatically include one column.
(You can add up to 5 columns in one row.)Click the gear icon in the top-left corner of the column.
In the menu on the right, click "Margin" to open the margin settings.
Step 2: Adjust the margin for each side (desktop view)
You can adjust the space on each side of the column:
Top: Adjust the space at the top of the column.
Right: Adjust the space on the right side.
Bottom: Adjust the space at the bottom.
Left: Adjust the space on the left side.
You can either use the predefined margin options or manually set the values.
Alternative 1: Use predefined margin options (desktop view)
Alternative 1: Use predefined margin options (desktop view)
You can quickly control the overall look of your page using predefined margin options:
None: No margin applied (no space around the column).
A little: Adds a small margin around the column.
A bit more: Adds a moderate margin around the column.
Top and bottom: Adds a larger margin to the top and bottom of the column.
Spaceous: Adds a large margin around all sides of the column.
Alternative 2: Set custom margins (desktop view)
Alternative 2: Set custom margins (desktop view)
If you prefer more control, you can manually adjust the margin values.
Here's an example:
Top: Enter 200 to create more space at the top.
Right: Enter 8 to create a small space on the right side.
Bottom: Enter 8 to add margin at the bottom.
Left: Enter 8 for a small space on the left side.
Step 3: Adjust for phone view
Once you're happy with the margins on the desktop version, it's time to adjust for mobile devices:
In the right menu, switch to Phone settings.
You’ll need to repeat the steps for adjusting the margins (as you did in Default settings).
Adjust the top, right, bottom, and left margins for the phone view as needed to ensure the layout looks great on mobile screens.
Step 4: Save your changes
After adjusting the margins for both desktop and phone views, click "Save" in the top-right corner.
Done! Your column will now have the margins you set for both desktop and phone, making your page more visually appealing and well-structured for any device.
Summary
Remember that desktop and mobile views have separate margin settings. First, adjust your margins for the desktop view in Default settings, then switch to Phone settings to make adjustments for the mobile layout. This ensures your page looks great and is properly aligned on all devices.
We hope this article has helped you understand how to adjust the margin in a column. If you have any further questions, please don't hesitate to reach out to our customer support team for assistance.