Squarespace templates feature Index pages to allow for creating stacked or slideshow-style pages that create a more cohesive aesthetic on your site.
However, if you use an Index page and notice your content is pushed down by padding, this article will show how to reduce this padding so it will appear more aligned on both desktop and mobile.
Increase the Site Margin
Content too far away from the edge of the page may make it more difficult for users to locate and click essential elements like your “book now” button, so bookings may decline accordingly. Padding may obscure these buttons from view and may prevent users from clicking them resulting in bookings being missed out entirely.
Increased site margin in Squarespace can create visual breaks between sections and increase space for customization, making your website appear more professional and polished! Plus it’s simple!
If an image in your Index page requires excessive padding, using Section Height settings can help. These can be quite tricky to use at first; to prevent too much or too little padding being added by mistake, try placing spacer blocks over top and underneath your image to simulate this effect without changing Section Height settings directly.
To do this, hover your cursor over a padded area of your image to activate a blue highlighter box and display only its style tweaks – this should reveal only those related to padding or margin, etc. Scroll through your site styles until you find tweaks containing words such as padding, margin or full bleed – then use either sliders to increase/decrease padding as desired or manually enter numbers manually if you prefer – don’t forget to test on mobile as changes could alter how your site displays on smaller screens!
Increase the Header Margin
Header padding refers to the space around an element such as a logo or header that allows it to breathe. By increasing this space, your element can stand out more and give your website an improved professional aesthetic.
Each Squarespace template comes equipped with padding and spacing options, but you can further tailor these settings using CSS. Most often these options can be found within Page Settings or Site Styles menu; to change line height on paragraphs simply add: * line-height: 1.5em * in your CSS file.
Adjusting padding and spacing of individual sections in your Index can also be useful. This feature can be especially beneficial if your Index features image blocks that may be hard for mobile readers to read.
However, for more advanced modifications of Index pages, custom CSS snippets provide the means to achieve targeted customizations of specific elements on your website – an effective way of adding some extra flair and personalized touches to home, about or contact pages.
Remove Extra Blocks
Squarespace makes creating an index page easy, but sometimes it can be tricky knowing how best to group image/text/button blocks together. Sometimes the best approach may just be taking out some extra blocks from the page altogether.
Squarespace’s new Fluid Engine in version 7.1 also changed how you delete blocks. Before, multiple blocks could be deleted in one go by dragging over them; now each individual block needs to be clicked individually in order to delete. If your page contains many extra blocks, this could become tediously time-consuming!
However, you still have the ability to eliminate extra blocks through some creative problem-solving. There are various approaches you can take; one requires advanced web development knowledge (i.e. using Chrome’s “Inspect” feature to explore your website’s HTML code).
Option 2 is to simply delete an extra block in the classic editor by highlighting and dragging it towards the trashcan icon. However, this only works with basic blocks (text, spacer and button) – not Embed or Code blocks which contain 3rd party scripts.
Increase the Footer Margin
The footer of any website is a crucial feature that can define its design, and make or break how professional a site appears. Too much text or too little can create clutter; too little makes navigation difficult; Squarespace makes adjusting footer margins easy by offering simple controls to do just this.
One way to add padding to a footer is with text widgets or blocks, which you can find by hovering over the page and clicking “Add Content.” For more information on using blocks for content creation purposes, refer to Squarespace’s guide on this topic.
Increase your header padding is one of the key ways you can enhance the aesthetic and navigation experience on your Squarespace website, giving visitors an unblemished navigational journey. Plus, the process is relatively painless – nothing to lose by giving it a go!
While Squarespace’s default section height settings can usually meet your website needs, sometimes they can create too much extra space at the top and bottom of each section. Thankfully, you can decrease desktop padding using CSS techniques by adding full-width spacers at both ends – Squarespace will then cancel them out on mobile!
