Launching on Squarespace can be daunting. While its user-friendly nature makes the platform great, images may pose challenges when trying to design.
Make use of the image block’s built-in spacing options for optimal image alignment; alternatively, try employing some CSS for even greater results!
Image Padding
Establishing even spacing between images is integral to creating a professional-looking website, yet Squarespace’s built-in image padding options may be challenging for those unfamiliar with CSS code. Luckily, there are simple solutions available to you to add or subtract padding between image blocks for an improved appearance of your website.
If you’re using an image block on a page or post, adding space content blocks either side will help adjust its padding so it fits flush with your content and does not protrude beyond its edges. This feature may also prove helpful in cases of multiple image blocks being placed next to one another.
CSS codes that apply globally can also help add or subtract padding, and are particularly helpful if your page or section requires specific layout adjustments. The following code adds 10px of padding around all images on a page or section – feel free to replace this value with something different if necessary!
Stacked Gallery Blocks
Gallery blocks allow you to combine multiple images together and display them as a slideshow, grid, carousel or stack. Each image can have an accompanying description that displays continuously or when hovered over, and you have complete control of how much space exists between each picture.
Add a background color to the stacked gallery block to help your gallery blend in more with the overall design of your site. Doing this also allows customers to easily identify which image they are clicking when opening lightbox images.
One more tip when creating stacked gallery blocks is ensuring the aspect ratios of images are close together; this will make it easier for Squarespace to render properly on all devices and enhance user experience.
Squarespace 7.1 introduced Gallery Sections as an alternative to gallery blocks. Although similar in appearance, these modules allow more flexible layout options by being added directly onto pages and having content above or below them for more flexibility when it comes to layout. They can even be used to create collection pages if you wish to combine multiple galleries into one page. Gallery sections support various layout options when it comes to photos and videos added; including inline, poster card overlay and stack.
Overlaying Two Images
Squarespace provides image layout blocks that make it possible to incorporate images in various styles – including overlapped ones – adding visual interest and creating more website engagement.
However, overlapping images can present several problems for the overall appearance of your website. More specifically, they can leave large gaps that make reading text on mobile devices particularly challenging.
To alleviate this problem, try adding space between your images using a simple trick that adds distance between each of them – this allows readers to avoid large gaps that make reading difficult. Simply add CSS code for this purpose!
This code adds 10px of padding between images. Feel free to change this number as desired; just be sure that your website is tested across different devices to ensure uniform spacing.
If your website utilizes stacked gallery block sections, this hack will ensure that each image’s spacing remains uniform across each section. This can enhance visual appeal while making reading your site simpler for visitors.
Removing Padding Between Images
Dependent upon your layout, you may wish to reduce the space between images in a stacked gallery block. Here, either by altering each image’s sizing manually or by using Column Control you can achieve even spacing for even better results – both methods should help ensure your images look exactly how you’d envisioned them!
Squarespace does provide built-in image padding options; however, these may not always be sufficient to meet all your site needs. For instance, if your image features lots of text around its edges, squarespace’s standard padding may not provide sufficient separation from text-heavy edges; custom CSS code may need to be implemented instead.
Apply this CSS style sheet to all sections and blocks on your site by opening the style editor, clicking on the page with padding you want to adjust, adding this code below (replacing #YOUR-BLOCK-ID with its actual block ID for greater precision), then applying this CSS.
Proper spacing can make your website more visually appealing and increase visitor engagement. Following these tips should help you achieve ideal spacing for stacked image blocks or pages on your site; if any difficulties still remain with their layout please reach out for assistance from us.
