Back to Community
Home / Community / Plugin → Page builder by siteorigin

How to Control Spacing Between Rows in Page Builder by SiteOrigin

23 threads Sep 16, 2025 Plugin → Page builder by siteorigin

Content

One of the most common questions from new users of the Page Builder by SiteOrigin plugin is about the default, seemingly large gap between rows. While this spacing is intentional for design clarity, it's not always what you want for your specific layout. This guide will explain why this happens and show you the simple built-in controls to adjust it to your liking.

Why is there so much space between my rows?

The plugin applies default bottom margins to rows and widgets to create a clear visual separation and prevent content from appearing cramped. This is a standard design practice that ensures readability, especially for users who are quickly building a page without fine-tuning each element's style. However, the desired amount of spacing is highly subjective and depends entirely on your theme and design preferences.

How to Adjust the Row Spacing

Fortunately, Page Builder by SiteOrigin provides two straightforward methods to control this spacing: globally for your entire site, or on a per-row basis for precise control.

Method 1: Adjust Spacing for a Single Row

This is the quickest way to change the gap below one specific row.

  1. In the Page Builder interface, click on the row you want to edit to select it.
  2. Click the Edit Row button (it looks like a pencil).
  3. In the row settings panel that opens on the right, navigate to the Layout settings group.
  4. Look for the Bottom Margin setting. By default, this is likely set to a value like 30px or 1.5em.
  5. Reduce this number to decrease the space, or increase it to add more. You can use units like px, em, or %. Setting it to 0 will remove the gap entirely.
  6. Click Done to save your changes for that row.

Method 2: Change the Global Default Spacing

If you find yourself consistently changing the spacing for every row, it's more efficient to change the default value site-wide.

  1. From your WordPress dashboard, go to Settings > Page Builder.
  2. Click on the Layout tab.
  3. Look for the setting named Widget/Row Bottom Margin.
  4. Enter your new desired default value (e.g., 10px, 0.5em, 0).
  5. Click Save Changes. This new value will now be the default for all new rows you create.

Pro Tip: You can use these two methods together. Set a global default that you're happy with for most rows, and then use the per-row settings for any exceptions that need unique spacing.

What if the spacing doesn't change?

If you adjust these settings and don't see a change on the front end of your site, it's likely that your theme is applying its own CSS margins that are overriding the Page Builder settings. In this case, you would need to add custom CSS, either in your theme's customizer or in a custom CSS plugin, to target the specific rows and apply your desired spacing.

By using these built-in settings, you can quickly gain full control over the layout and spacing of your pages, ensuring they look exactly how you envision.

Related Support Threads Support