1. Knowledge Base
  2. >
  3. Results
  4. >
  5. Adding a Spacer in Weebly

Adding a Spacer in Weebly

Any element in Weebly has its own predetermined above and below spacing, and there are times that you may need to get more space in between your elements. It is where the Spacer element comes to use. The Spacer element allows you to add spaces between fields, boxes, and sections, thus giving your other elements and contents a “breathing room.”

While this element is useful when adjusting spaces, you may find that this tool is not consistent with spacing as you need to drag and drop the element and decrease or increase the height of each space. This makes it difficult to have the exact same height of space each time the element is dragged and dropped in your workspace.

How to Use the Spacer Element

With the Spacer element, you can make vertical and horizontal adjustments on your spaces between other Weebly elements.

To add a Spacer element:

  1. Log in to your Weebly homepage.
  2. Under the Build tab, locate the Structure section from the left-side menu.
  3. Drag the Spacer element on your workspace.

    Weebly - Spacer Element

  4. Once you select the Spacer element, you will see three options:
    • Weebly - Spacer - Arrow Menu - Click the arrow icon on the left side of the Spacer to copy or move the Spacer element to other pages of your Weebly website.

      Weebly - Arrow Menu

    • Weebly Box Menu- This icon enables you to move the Spacer on your workspace.
    • Weebly - Close Menu- This icon allows you to delete the Spacer.
  5. Click and drag the blue bar at the bottom of the element to resize.

    Weebly - Spacer Element - Blue Bar to Adjust

  6. Once done, you may want to check your site's mobile version to view how the spacing adjustments would look on mobile devices.
    How to Check Mobile Version in Weebly

    To check the mobile version of your website:

    1. On your Weebly homepage, click the monitor icon on the top menu.

      Weebly - Monitor icon

    2. Select Mobile.

      Weebly - Select Mobile

  7. Once you are ready to publish, click the Publish button located in the top right corner to save your changes.

Additional Resources