To change padding in Squarespace, simply navigate to the appropriate settings for your Squarespace version (7.0 or 7.1) and adjust the padding values accordingly.
This article provides step-by-step instructions for changing padding in both Squarespace versions.
What is Padding in Squarespace?
Padding is the space between an element and its border, while margin is the space outside the border.
For instance, at the top of a web page, you might have a logo with padding being the space between the logo and the margin or border of the header. Increasing header padding can enhance your website’s aesthetics and provide a more professional appearance.
This guide will explain the benefits of header padding, padding options, and how to change the header padding in Squarespace.
How to Change Squarespace Padding
How to Change Padding in Squarespace Version 7.1
To control site-wide spacing:
- While editing a page, open site styles, then click Spacing
- Use the Site Margin setting to set the amount of space between your content and the edge of your screen
To change header padding:
- Click Edit on a page, hover over the header, then click Edit Site Header
- Click the desktop icon
- Click Full or Inset to set the width of the header content
- Scroll down and use the padding and spacing settings to set the amount of space in the header
To change padding on individual sections:
- Click Edit on a page, then click the pencil icon on a section
- In the Format tab, use the Section Height and Content Width options to adjust the amount of space in the section
- In the Background tab, click Full Bleed or Inset to set the width of the section content
How to Change Padding in Squarespace Version 7.0
- Navigate to the home menu and click Design and then Site Styles
- Hover over the blank space that you want to change and a blue highlighter box will appear around the padded area
- Click the section you’d like to change to display the style settings for that element only.
- Once selected, an icon will appear with two arrows and a line in the middle. Simply click and drag this icon inwards or outwards to increase or decrease your horizontal padding accordingly
Why Change Padding in Squarespace?
Make the brand or topic stand out
Whether the page in question is a home page, or other pages, they will almost always have a purpose. For example, an about page will feature information about the company.
The same notion can be applied to a home page. A home page will often feature the business or company’s logo.
By having header padding around the logo, it ensures that no other information comes too close to it, and allows it to stand out to the customer.
Make the page more aesthetically pleasing
Many web designers use header padding to provide a high-end customer experience for the website viewer.
When a website is well-spaced out, and there is a good amount of open space, it can provide a more pleasing and calm experience for the viewer. Padding gives whitespace or negative space between elements and provides “breathing room” for the viewer.
For example, have you ever viewed a website that’s crammed full of information without many spaces? Most people will find this overwhelming and be less inclined to take in the available information.
Draw attention to specific elements
When header padding is used correctly, it can point a user’s eyes to specific areas. For example, if the website is for a hotel company, padding can be used to encourage a user’s eyes to migrate towards a “book now” button.
Usually, when there is a lot of space around an object like a “book now” button, users will be able to see it clearly and quickly, and it’s more likely that they will click it. If the button is hard to find, or hidden by a lot of other elements, a user may get frustrated and quit the website, hindering bookings.
Frequently Asked Questions
What is the difference between padding and margin?
Padding and margin are often confused, so it’s important to understand the difference between the two before you begin making changes to your website.
Padding refers to the space between an element and its border, while margin is the space outside the border.
What is the right amount of header padding to use on a website?
The answer to this depends on many variables. Different website layouts, and different brands will work better with varying sizes of max-width and header padding.
Our web design experts have extensive experience both user experience design and website layouts, they can help you ensure that the padding that’s used on your website is the best it can be.
Can I make my own website on Squarespace?
Squarespace is a website building and hosting company that allows people to create an account and make their own websites. However, while it’s certainly possible to make websites, people who aren’t experienced in how to do so may only be able to make basic sites.
If you’re looking to create a unique website that delivers a high-end customer experience, then we’d suggest using a website designer. At White Peak Digital our Squarespace web designers have extensive experience in designing exceptional Squarespace websites and have the coding knowledge to help turn your dream website into a reality.
Looking to Build a Custom Squarespace Website?
If you’re interested in creating a custom website that is designed with a high-end customer experience in mind, then our Squarespace experts are here to help.
If there’s anything else we can help with in the meantime, don’t hesitate to reach out!
To your success,
Jackson
