Every stack on your site has spacing around it, like the gap above, below, and on either side of your content. You can adjust this spacing by turning on Design mode and dragging the blue handles that appear around your stack.
The Spacing increments setting lets you choose how big each step is when you drag. For example, if you set it to 8, your spacing will jump in steps of 8 (so 8, 16, 24, 32 and so on) instead of changing just 1 pixel at a time. This makes it so much easier to get the same spacing across different sections of your site, giving everything a tidy, polished look.
- Way faster to get consistent spacing – no more trying to hit the exact same pixel value on every stack.
- Cleaner design overall – working in a rhythm (like multiples of 8) gives your site that polished, professional feel.
- Less fiddling, more creating – spend your time on the fun stuff instead of pixel-nudging.
- Works everywhere – the increment applies to in-context spacing handles and the stack-specific sidebar, so everything stays in sync.
How to set your spacing increment
This is a sitewide setting, so you only need to set it once, and it’ll apply to every stack on your site going forward (existing stacks will be unchanged until you adjust them once more).
-
Open your sitewide design settings. Click Change Design in the top left of your site editor.
-
Click on Spacing.
-
Set your spacing increment. Use the + and – buttons to choose your base unit or click the value for a dropdown of options. For example, setting it to 8 means all spacing adjustments will snap to multiples of 8 (8, 16, 24, 32, and so on). A value of 8 is a great starting point and is widely used in design.
-
Click close and then "save changes"
Adjusting spacing on a stack
Once you’ve set your increment, here’s how to adjust spacing on any stack.
Using in-context spacing handles
-
Turn on Design mode. Hover over a stack and click the Design mode toggle (the blue icon on the right of the stack toolbar).
-
Drag the spacing handles. You’ll see blue horizontal and vertical lines appear around your stack. Drag these to adjust the top, bottom, left, right, or column gap spacing. Each drag will now jump in your chosen increment (e.g. 8px at a time).
- Check the numbers. As you drag, you’ll see the spacing value update on screen. It’ll always land on a clean multiple of your increment.
Using the stack spacing sidebar
You can also adjust spacing values through the stack-specific design sidebar. The increment applies here too, so any changes you make in the sidebar will snap to your base unit.
-
Open the stack design panel. With Design mode turned on, click the pencil (edit) icon in the stack toolbar.
-
Adjust the spacing sliders or values. In the Width & Spacing section, you can use the sliders or type values directly. When you adjust these, they’ll snap to multiples of your increment, keeping everything consistent with what you see in context.
Please contact support@rocketspark.com if you have any questions.