--- title: How to Adjust Spacing and Grid Settings in Website Builder? description: Learn how to use the Size and Values tab to adjust object spacing, grid layouts, and heading spacings for better website structure and design. --- [Skip to content](https://success.ministrydesigns.help/how-to-adjust-spacing-and-grid-settings-in-website-builder#main-content) English Show submenu for translations [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) [![MD Logo 1\_Black-2](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-2.png?width=200&height=73&name=MD%20Logo%201_Black-2.png)](https://ministrydesigns.com/) Open main navigation Close main navigation - English Show submenu for translations - [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) How can we help you? - There are no suggestions because the search field is empty. 1. [Ministry Designs Success Hub](https://success.ministrydesigns.help/) 2. [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega) 3. [Design](https://success.ministrydesigns.help/sites-formerly-omega#design) # How to Adjust Spacing and Grid Settings in Website Builder? ## Modify object spacing, grid settings, and heading spacings on the entire website 1\. The Size and Values tab allows you to modify object spacing on your website. Click the Size and Values tab ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-06/385a54de-df62-4060-8368-3346d58a961e/ascreenshot.jpeg?tl_px=0,0&br_px=859,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=222,355) ### Spacings 2\. The Size and Values tab consists of three tabs: **Spacings, Grid Settings, and Heading Spacing** The spacings tab allows you to configure spacings for all site objects on each screen resolution. Click the Spacings tab. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-02/901acf79-6577-43fd-803b-eb7c873a69c2/ascreenshot.jpeg?tl_px=0,7&br_px=859,488&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=235,212) ### Spacings - General Settings 3\. Specify the Small, Medium, and Large spacings for the Desktop resolution. To apply spacing to widgets, you should enter the "Pages" section and choose the necessary widget (see Step 11 of this guide as an example) Click a device icon to adjust the settings for that particular device resolution ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-02/cb36a41a-3af0-442c-9619-07aa01a8d307/ascreenshot.jpeg?tl_px=0,235&br_px=859,716&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=39,212) ### Spacings - Adding Custom Spacing 4\. You can also use custom spacing for any widget on your website. Click "Add" to add Custom Spacing. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-02/7b4bcad0-e193-4160-a358-adcb21396abc/ascreenshot.jpeg?tl_px=0,12&br_px=859,493&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=122,212) 5\. Enter the name for the Custom Spacing and click "OK" ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-02/52719c5f-136b-4ba4-8e50-332c77b166eb/ascreenshot.jpeg?tl_px=290,0&br_px=1150,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,183) 6\. Specify the value for the Custom Spacing ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-02/1aafdfa4-22a1-41ca-83ac-0b96adc8f712/ascreenshot.jpeg?tl_px=0,396&br_px=859,877&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=46,212) 7\. If needed, use the pencil icon to rename the Custom Spacing to something else and the bin icon to delete it respectively ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-02/fbdceace-a9d4-4b77-8e4c-219afd2e8e99/ascreenshot.jpeg?tl_px=0,361&br_px=859,842&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=203,212) 8\. Click the "Save" button to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-02/ec5426dd-1601-4f1f-aa38-02de3f616057/ascreenshot.jpeg?tl_px=0,464&br_px=859,945&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=187,416) ### Spacings - Applying Custom Spacing 9\. Navigate to the "Pages" section and select a widget for which you wish to set Custom Spacing ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-02/8edb8f25-e991-41bb-90d7-5a81c3ea39ae/ascreenshot.jpeg?tl_px=0,0&br_px=859,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=210,3) 10\. Select the required widget, for example, Text Widget ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-02/82eaacb0-92e2-4811-a5f2-60d75c7b07bf/ascreenshot.jpeg?tl_px=108,108&br_px=968,589&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 11\. Click on "Auto" and select the Custom Spacing from the dropdown ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-02/22f4fa32-5e8a-4aad-89c2-cc7f65ae1605/ascreenshot.jpeg?tl_px=681,44&br_px=1541,525&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=690,212) 12\. This is how it will look if you have created a Custom Spacing ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-02/b375b4ff-bb7a-404f-bb56-19ac729ad933/ascreenshot.jpeg?tl_px=681,184&br_px=1541,665&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=694,212) 13\. Click "Save" to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-05/f6e8b325-31ec-4bc4-be68-9219f3083cac/ascreenshot.jpeg?tl_px=681,0&br_px=1541,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=777,66) ### Grid Settings 14\. The Grid Settings tab allows you to set custom Column Spacing and Fixed Row Width for the [Row Widget](https://success.ministrydesigns.help/how-to-work-with-a-row-widget). Click the Grid Settings tab ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-06/e30e98c1-1db5-442f-be6b-8d14649ef063/ascreenshot.jpeg?tl_px=0,57&br_px=859,538&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=223,212) 15\. Specify Column Spacing (from 10px up to 60px) and Fixed Row Width (from 980px up to 1920px) ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-06/69044e64-1666-4c3c-b3d6-54e55217181f/ascreenshot.jpeg?tl_px=0,51&br_px=859,532&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=213,212) 16\. Click the "Save" button to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-06/fc2b0051-d43d-4050-b258-7c43ced833b5/ascreenshot.jpeg?tl_px=0,464&br_px=859,945&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=179,414) ### Heading Spacings 17\. The Heading Spacings tab allows you to set top and bottom spacing for [h1, h2, h3, and h4 headings](https://success.ministrydesigns.help/how-do-i-seo-optimize-my-website). Click the Heading Spacings tab ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-06/0f6f6a77-998e-4cf6-be9e-52c925148c46/ascreenshot.jpeg?tl_px=0,114&br_px=859,595&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=222,212) 18\. Specify the spacing for the Heading 1. A 1 em size is equal to the element's font size. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-06/7a56037e-8bdf-4eba-ad62-348d724dac96/ascreenshot.jpeg?tl_px=0,42&br_px=859,523&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=230,212) 19\. Here's how it will look on the preview. The Heading 1 font size is 145 pixels, so the spacing on top and bottom will also be 145 pixels ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-06/8de7db19-325c-4888-b286-a81f479c0446/ascreenshot.jpeg?tl_px=183,260&br_px=1043,741&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 20\. Click the "Save" button to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-10-06/c680152a-c257-4914-b7dd-0aa4536f4e26/ascreenshot.jpeg?tl_px=0,464&br_px=859,945&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=187,412) - [Account](https://success.ministrydesigns.help/account) - [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega#main-content) - [Next-Steps Framework](https://success.ministrydesigns.help/sites-formerly-omega#next-steps-framework) - [Video Guides](https://success.ministrydesigns.help/sites-formerly-omega#video-guides) - [Site Builder Profile Settings](https://success.ministrydesigns.help/sites-formerly-omega#site-builder-profile-settings) - [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) - [Design](https://success.ministrydesigns.help/sites-formerly-omega#design) - [Media Library](https://success.ministrydesigns.help/sites-formerly-omega#media-library) - [Extensions](https://success.ministrydesigns.help/sites-formerly-omega#extensions) - [Blog](https://success.ministrydesigns.help/sites-formerly-omega#blog) - [Events](https://success.ministrydesigns.help/sites-formerly-omega#events) - [Small Groups](https://success.ministrydesigns.help/sites-formerly-omega#small-groups) - [Sermons](https://success.ministrydesigns.help/sites-formerly-omega#sermons) - [Settings](https://success.ministrydesigns.help/sites-formerly-omega#settings) - [SEO](https://success.ministrydesigns.help/sites-formerly-omega#seo) - [Website Management](https://success.ministrydesigns.help/sites-formerly-omega#website-management) - [FAQ](https://success.ministrydesigns.help/sites-formerly-omega#faq) - [illume for Church Members](https://success.ministrydesigns.help/illume-for-church-members#main-content) - [Signing Up](https://success.ministrydesigns.help/illume-for-church-members#signing-up) - [Giving](https://success.ministrydesigns.help/illume-for-church-members#giving) - [illume for Church Administration](https://success.ministrydesigns.help/illume-for-church-administration#main-content) - [Getting Started](https://success.ministrydesigns.help/illume-for-church-administration#getting-started) - [Managing Your Account](https://success.ministrydesigns.help/illume-for-church-administration#managing-your-account) - [Using People](https://success.ministrydesigns.help/illume-for-church-administration#using-people) - [Using Giving](https://success.ministrydesigns.help/illume-for-church-administration#using-giving) [![MD Logo 1\_Black-3](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-3.png?width=200&height=73&name=MD%20Logo%201_Black-3.png "MD Logo 1_Black-3")](http://ministrydesigns.com) 15 Carlyle St Floor 2, Battle Creek, Mi 49017 [mailto:email@email.com](mailto:email@email.com) Copyright © 2025,