How to Add a Full Bleed Hero Section to Squarespace Blog Posts
Introduction
Adding a full-bleed hero section to your Squarespace blog posts can dramatically enhance their visual appeal. While making an image in a Squarespace blog post full width can be achieved with a little CSS, moving an image to the hero section (top of the page) with an overlaying blog title and meta is a little more involved and requires some JavaScript.
Even with the upgrade to Squarespace 7.1 and the introduction of the fluid engine, the blog section still uses the older 7.0 layout engine. This limitation prevents the use of the fluid engine's advanced layout capabilities, which means you can't natively create a full-bleed section with an overlay.
The solution to this problem is a custom enhancement using JavaScript and CSS. This tutorial will walk you through the three steps required to implement this feature on your Squarespace blog. The following guide assumes you have some basic HTML, CSS, and JavaScript knowledge.
Benefits of a Full Bleed Hero Section
A full-bleed hero image spans the entire screen width, providing a striking visual that can captivate visitors from the moment they land on your post. The Blog post title and meta overlay this image, including a transparent overlay to accent the text. This approach offers several benefits:
Enhanced Visual Appeal: A large, high-quality image can significantly improve the look of your blog.
Improved User Engagement: Eye-catching visuals can keep visitors on your site longer.
Professional Aesthetic: Gives your blog a polished, modern look.
Prerequisites
Before diving into the tutorial, ensure you have a basic understanding of the following:
HTML structure
CSS styling
JavaScript fundamentals
A Step-by-Step Guide
Preparation
Blog post edit mode with the first image visible in the body. This will become your Hero image.
This enhancement will move the first image on your blog post to create the hero image. When creating a new blog post, make sure you insert an image to use for the hero.
While in edit mode, you will see this image in the body of the post and the hero section so that it can be edited or changed. Upon previewing, this image will disappear from the body and only show as the Hero image underneath the Title and meta of the post.
Step 1: Accessing the Code Injection Section
First, you must determine where to place the custom code enabling the full-bleed hero section. Depending on your needs, you have two options:
General Code Injection: Use this option if you want all blog posts in all blogs on your site to have this enhancement. Adding the code here will apply the hero image effect site-wide.
Post Blog Item Code Injection: Use this option if you want to apply the hero image effect to a specific blog in cases where you have more than one. This allows for customization on all individual posts in that blog without affecting other posts in other blogs.
Here's how to navigate to the Code Injection section in your Squarespace settings:
Log in to your Squarespace account.
Go to the Pages panel.
Navigate to Website Tools > Code Injection
Here’s how to navigate to the Post Blog Item Code Injection:
Log in to your Squarespace account.
Go to Pages
Navigate to the Blog you wish to enhance.
Click on the Blog setting icon, then navigate to Advanced > Post Blog Item Code Injection.
Step 2: Adding the JavaScript Code
Copy and paste the following JavaScript code into the Code Injection section or the Post Blog Summary Code Injection section. This script will locate the first image in your blog post and use it as the hero image.
document.addEventListener('DOMContentLoaded', function() {
// Create the .custom-banner and .banner-content elements
var customBanner = document.createElement('div');
customBanner.className = 'custom-banner';
var bannerContent = document.createElement('div');
bannerContent.className = 'banner-content';
customBanner.appendChild(bannerContent);
// Locate the .blog-item-inner-wrapper and prepend the custom banner to it
var blogItemInnerWrapper = document.querySelector('.blog-item-inner-wrapper');
if (blogItemInnerWrapper) {
blogItemInnerWrapper.insertBefore(customBanner, blogItemInnerWrapper.firstChild);
// Find the first image in the blog post
var firstImage = document.querySelector('.blog-item-content img');
if (firstImage) {
customBanner.style.backgroundImage = 'url("' + firstImage.src + '")';
// Locate and remove the parent .image-block div
var imageBlock = firstImage.closest('.image-block');
if (imageBlock) {
imageBlock.remove();
}
}
// Adjust .banner-content width to match .blog-item-content-wrapper
var contentWrapper = document.querySelector('.blog-item-content-wrapper');
if (contentWrapper) {
bannerContent.style.width = getComputedStyle(contentWrapper).width;
}
// Move the content of .blog-item-top-wrapper into .banner-content
var topWrapperContent = document.querySelector('.blog-item-top-wrapper');
if (topWrapperContent) {
bannerContent.appendChild(topWrapperContent);
}
}
});
Note: Don’t forget to place this code between an opening and closing script tag: <script> and </script>.
-
Event Listener
The script begins by adding an event listener for the DOMContentLoaded event. This ensures the code runs only after the DOM has fully loaded, making sure all elements are available for manipulation.
Creating Elements
Next, the script creates two div elements: customBanner and bannerContent. These elements are assigned the class names .custom-banner and .banner-content respectively. The bannerContent element is appended to customBanner, setting up the structure for the hero image.
Appending Elements
The script then locates the .blog-item-inner-wrapper element and prepends the customBanner to it. This makes the custom banner the first child of the .blog-item-inner-wrapper, positioning it at the top of the blog post.
Finding the Image
The script searches for the first image within the .blog-item-content class. Once located, the script sets this image as the background of the customBanner.
Removing the Original Image
To prevent duplication, the script identifies the parent .image-block of the featured image and removes it from the DOM. This ensures the image is only displayed as the background of the custom banner.
Adjusting Content Width
The script then adjusts the width of bannerContent to match the width of the .blog-item-content-wrapper. This alignment ensures the content within the banner matches the main content width, maintaining a consistent layout.
Moving Content
Finally, the script moves the content of the .blog-item-top-wrapper into bannerContent. This step integrates the top wrapper content into the banner, ensuring all relevant information is displayed within the hero image section.
By understanding each part of this JavaScript code, you can see how it dynamically creates and styles a full bleed hero image for your Squarespace blog posts.
Step 3: Adding the CSS Code
Next, you'll need to style the hero image using CSS. Add the following CSS code to the Custom CSS or the Post Blog Item Code Injection:
.custom-banner {
display: flex; /* Establishes this element as a flex container */
flex-direction: column; /* Stacks flex items vertically */
justify-content: center; /* Centers the flex items vertically */
align-items: center; /* Centers the flex items horizontally */
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-bottom: 50px;
margin-top: -270px;
padding-top: 100px;
height: 600px; /* Or your desired height */
background-size: cover;
background-position: center;
overflow: hidden; /* Ensures no overflow of child content */
}
.custom-banner .banner-content {
z-index: 2; /* Ensures the content is above the background */
text-align: left; /* Centers the text horizontally */
padding: 0px; /* Provides some spacing */
box-sizing: border-box; /* Ensures padding doesn't affect overall dimensions */
color: #FFFFFF; /* Adjust color as needed */
max-width: 1200px; /* Limit the content width, if necessary */
margin: 0 auto; /* Center the content */
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
.custom-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.67); /* Adjust the overlay color and opacity */
z-index: 1; /* Sits below the content but above the background */
}
Note: Don’t forget to place this code between an opening and closing style tag: <style> and </style> or make sure it is placed in an exsiting style tag.
-
You can customize the CSS to better fit your blog's design. Here are some common adjustments:
Height: Change the height property of .custom-banner to adjust the hero image's height.
Overlay Color: Modify the background property in .custom-banner::before to change the overlay color and opacity.
Text Alignment: Adjust the text-align property in .banner-content for different text alignments.
Troubleshooting Common Issues
If you encounter any issues, consider the following solutions:
Missing Elements: Ensure that the elements targeted by the script exist on your page.
Incorrect Image Paths: Verify that the image paths are correct and accessible.
CSS Conflicts: Check for conflicting CSS rules that might affect the appearance of the hero image.
Advanced Customizations
For those looking to enhance their hero images further, consider the following advanced customizations:
Responsive Design: Use media queries to adjust the hero image for different screen sizes. This script looked fine in my implementation and did not require any further mobile customizations
Additional Styles: Add more CSS rules to style the banner content, such as different fonts, borders, or animations.
Conclusion
Adding a full-bleed hero section to your Squarespace blog posts is a great way to enhance their visual appeal and engage your readers. Following the steps outlined in this tutorial, you can easily implement this feature in all your existing and future posts.
FAQs about implementing this enhancment
-
A full-bleed hero image is a large, high-quality image that spans the entire screen width, creating a visually striking effect.
-
A full-bleed hero image can enhance the visual appeal of your blog, improve user engagement, and give your site a professional appearance.
-
Basic knowledge of HTML, CSS, and JavaScript is helpful, but this tutorial provides step-by-step instructions to guide you through the process.
-
Yes, you can adjust the height, overlay color, and other CSS properties to match your blog's design.
-
Ensure that the elements targeted by the script exist on your page and that there are no CSS conflicts.
-
Yes, you can use media queries in your CSS to adjust the hero image for different screen sizes if required. This implementation did not require any special media queries to work well for mobile and desktop.
Elevate Your Squarespace Site with Contigo Studio
Dennis Pal
Web Designer/Developer
Hey there! If you're looking to take your Squarespace site to the next level, you're in the right place. At Contigo Studio, I specialize in custom web design and development to help you create a unique and professional online presence. Whether you need some snazzy custom code, a personalized design, or advanced functionality, I'm here to turn your vision into reality.
Contact me at Contigo Studio today to elevate your website's functionality and user experience. Let me handle the technical details so you can focus on what you do best.
