How to Use the Spacer Block in UniLink (Control Spacing and Layout on Your Page)
How to Use the Spacer Block in UniLink (Control Spacing and Layout on Your Page)
A step-by-step guide to adding the Spacer block to your UniLink page so you can control vertical whitespace between sections precisely, on desktop and mobile independently.
- The Spacer block adds vertical whitespace between other blocks — its only setting is height in pixels, with separate values for desktop and mobile.
- Use it when the default spacing between blocks is not enough and you need a defined gap between major page sections — not as a substitute for block margin settings.
- Always set a smaller height on mobile than on desktop; mobile pages are scrolled heavily and excessive spacing makes the page feel padded and empty.
- If you find yourself adding three or more Spacers in a row to achieve a visual effect, stop — that is a signal the underlying block margin settings or page structure need adjusting instead.
Spacing is one of those design decisions that is invisible when it is right and immediately obvious when it is wrong. Too little space between a CTA section and the next content block makes the page feel compressed. Too much space and the page starts to feel like an endless scroll of nothing between the things that matter. UniLink's blocks have default margins built in, and for most page layouts those defaults are enough. But when you need precise control over the gap between two specific sections — a hero block and a product grid, a testimonial section and a booking widget, a text block and a video — the Spacer block gives you that control without touching any code or CSS.
What the Spacer block does
The Spacer block inserts a fixed-height gap at whatever position you place it in the block stack. It renders as empty vertical space — no background, no border, no content. Visitors do not interact with it. It exists purely to push blocks apart by a specified number of pixels. The settings are minimal by design: height on desktop, height on mobile, and a visibility toggle that lets you show the spacer on desktop only, mobile only, or both.
The desktop and mobile height settings are independent, which is the most important thing to understand about how the block works. A spacer set to 80px on desktop can be set to 24px on mobile, so the visual breathing room that works on a wide screen does not become a yawning gap on a phone. This matters because mobile visitors scroll, and excessive vertical whitespace on mobile translates directly into more scrolling, lower engagement, and lower conversion. The rule of thumb: mobile spacer heights should be roughly 25–40% of the desktop value.
Before you start
- Check whether block margin settings solve it first: Before adding a Spacer block, open the block you want to move and look at its margin or padding settings. Many blocks have a spacing or padding control built into their own settings panel. If adjusting the block's own top or bottom margin achieves the spacing you need, use that — it keeps your block stack cleaner and avoids the maintenance overhead of a separate Spacer block that is easy to forget about later.
- Decide on the height you need: A good starting point for most use cases is 40–80px on desktop and 20–32px on mobile. Larger gaps (100px+) work for deliberate visual separation between major page sections — for example, between a hero area and a product section. Smaller gaps (20–40px) work for minor breathing room between related blocks. Have a rough target in mind before you add the spacer so you are not iterating from zero.
- Know where in the block stack to insert it: Identify the two blocks you want to separate. The Spacer goes between them — below the top block and above the bottom block. In the block editor, you will drag it to the right position in the stack after adding it.
How to add the Spacer block to your page
- Open your page in the Dashboard: Log in to UniLink, go to My Pages, and click Edit on the page you want to adjust.
- Add a new block: Click + Add Block. In the block picker, find the Layout or Basic section and select Spacer.
- Set the desktop height: In the block settings panel, enter the height in pixels for desktop screens. Start with a value in the 40–80px range and adjust based on preview.
- Set the mobile height: Enter the height in pixels for mobile screens — typically 25–40% of the desktop value. If the desktop height is 64px, a mobile height of 20–24px is a reasonable starting point.
- Set visibility: Choose whether the spacer appears on desktop, mobile, or both. If you need spacing only on desktop and want blocks to sit closer together on mobile, set visibility to desktop only — the spacer will not render on mobile at all.
- Drag it to the right position: The new Spacer block will appear at the bottom of the block stack. Drag it to the correct position between the two blocks you want to separate.
- Preview on mobile: Use the Dashboard's mobile preview to check that the mobile height is appropriate. Toggle between desktop and mobile preview before saving to catch any spacing that looks wrong on one viewport.
Key settings explained
| Setting | What it controls | Best practice |
|---|---|---|
| Desktop height (px) | The height of the spacer on screens wider than the mobile breakpoint | 40–80px for standard section breaks; 80–120px for major visual separation between distinct page sections; anything above 120px starts to feel like wasted scroll space |
| Mobile height (px) | The height of the spacer on mobile screens — independent of the desktop value | Set to 25–40% of the desktop height; excessive mobile spacing adds scroll without adding value; 0px hides the spacer on mobile without using the visibility toggle |
| Visibility | Whether the spacer renders on desktop, mobile, or both | Use "desktop only" when you need spacing on a wider layout but want blocks to sit closer on mobile; use "both" for general spacing; "mobile only" is a niche case for content that needs extra separation only on small screens |
When a spacer is the right tool — and when it is not
The Spacer block is the right tool when you have a specific gap between two specific blocks that default margins do not produce and that a block's own padding settings cannot address. It is a precision tool for a precise problem. What it is not is a general-purpose layout adjustment mechanism. If you find yourself adding spacers frequently — three or four across a single page, or multiple spacers in a row between the same two blocks — that is a sign the page structure or the block choice is the actual problem, not the spacing between individual elements.
The most common misuse is stacking multiple Spacer blocks to create the effect of a section break. Two or three Spacers placed in sequence to push content down a large distance works, but it creates a fragile layout that is hard to maintain — delete one accidentally and the layout shifts. A single Spacer with an appropriately large pixel value is the correct approach when you need a large gap. The second most common misuse is adding Spacers on mobile where content simply needs to be reordered rather than spaced differently. If your mobile layout feels off, the issue is usually block order, block sizing, or a block that is not mobile-responsive — not a missing spacer.
Troubleshooting
| Problem | Likely cause | Fix |
|---|---|---|
| Spacer creating too much whitespace on mobile | Desktop and mobile heights were set to the same value | Edit the block and set the mobile height to 25–40% of the desktop value, or set it to 0 if no gap is needed on mobile |
| Spacer is not visible in the block stack and hard to select | Spacer blocks render as invisible gaps — they have no visual handle in the editor when the height is very small | In the block list panel (left sidebar), scroll to find the Spacer entry and click it to select; then edit height in the settings panel on the right |
| No gap appearing on the live page despite a spacer being present | Visibility is set to a viewport that does not match where you are testing, or the spacer was saved with a 0px height | Edit the block and confirm the height value is greater than 0 and that the visibility setting matches the device you are testing on |
| Deleted the wrong spacer and the page layout shifted unexpectedly | Multiple spacers in similar positions made it hard to identify the correct one | Use the Undo function immediately after deleting — most Dashboard editors support Ctrl+Z undo for block deletion; if the session has closed, re-add the spacer at the correct position and match the height from memory or a screenshot |
| Page feels too padded and scrolly overall | Too many spacers have accumulated across the page, or spacer heights are too large relative to the content density | Audit all Spacer blocks in the stack, reduce heights to the minimum that achieves the visual separation you need, and remove any spacers that are between blocks that already have adequate default margins |
Best fit for
- Creating deliberate visual separation between major page sections — hero to product grid, testimonials to booking widget — where default block margins leave insufficient breathing room
- Fine-tuning responsive layouts where desktop and mobile need different amounts of spacing between the same two blocks
- Pushing content down on a specific viewport using the visibility setting — for example, adding desktop-only spacing below a hero to balance a two-column layout without affecting mobile
Not the right tool if
- The block itself has margin or padding settings that can solve the spacing need — use those first and keep the block stack clean
- You need to reorder content on mobile rather than add spacing — block-level reordering or a mobile-specific layout setting is the right solution
- You are stacking multiple spacers in a row to achieve a large gap — use a single spacer with the appropriate pixel height instead
Frequently asked questions
Is there a maximum height for the Spacer block?
There is no enforced maximum, but practical limits apply quickly. A spacer taller than 150–200px on desktop starts to create a noticeable dead zone on the page that visitors scroll through without engaging with anything. On mobile, anything above 60–80px is almost always too much. The Spacer block has no minimum either — a 0px height is valid and effectively makes the block invisible, which is useful for the mobile visibility trick described above.
Can I use the Spacer block to create a horizontal divider line?
No — the Spacer block is purely a vertical whitespace element and has no border, background color, or decorative styling options. For a visual divider line between sections, use a Divider block if one is available in your block picker, or add a narrow-height block with a background color set to match the divider style you want. The Spacer block is for invisible whitespace only.
Will the Spacer block affect my page load time or SEO?
No. The Spacer block renders as a simple empty HTML element with a CSS height value — it has no images, scripts, or resources to load. It contributes effectively zero weight to page load time. It also has no semantic content and no impact on SEO crawling or indexing. The only way a Spacer block can indirectly affect performance is if excessive whitespace increases total page height significantly enough to affect Largest Contentful Paint timing, which would require an extreme amount of spacing to be measurable.
Should I delete spacers I am not sure I need anymore?
Yes — audit your spacers when you make significant changes to your page layout. Spacers that were added to compensate for a block that has since been removed or resized may now be creating unnecessary gaps. The block editor makes it easy to preview the page without a specific block: select the spacer, note its height, and temporarily set the height to 0 to see what the page looks like without it. If the spacing still looks correct at 0, delete the spacer. If something collapses or tightens too much, restore the original height.
- Check whether the block's own margin or padding settings solve your spacing need before adding a Spacer block — keeping the block stack clean is always preferable to adding a dedicated spacer for a gap that a built-in setting can handle.
- Always set a smaller mobile height than the desktop height — the default rule of 25–40% of the desktop value prevents excessive scrolling on mobile without leaving the layout feeling cramped.
- Use the visibility setting deliberately: a desktop-only spacer at 60px and a mobile-only spacer at 0px gives you full independent control over spacing on each viewport from a single block.
- If you have three or more Spacer blocks on a page, audit them — accumulated spacers are a sign that the underlying layout or block structure needs adjustment, not more whitespace.
Ready to polish your page layout? Create your free UniLink page and use the Spacer block to fine-tune spacing between sections for a cleaner, more professional look on every device.
Create Your Free Link-in-Bio Page
Join thousands of creators using UniLink. 40+ blocks, analytics, e-commerce, and AI tools — all free.
Get Started Free