5 Ways To Make A How It Works Section On Squarespace
One of the biggest mistakes we see on websites for brands and businesses is making things seem way too complicated. Maybe you have way too much text or you make your product or service sound really confusing by using a lot of jargon or techy language. Your audience is left confused and overwhelmed, which leads them to click off your website rather than spend the time sift through your complicated site and figure it out.
Oppositely, we often see people online who don’t give enough information on their website. We land on your homepage and have no idea who you are, what your business does, or how your product or service works. Rather than feel like working with you or buying from you is easy, your potential client or customer feels like they don’t know enough about you or your process to invest in you.
If you’re feeling like people just don’t “get it” when they land on your website, don’t fret! We’ve got an easy solution that not only can add more visuals to your website, but it can also add value to your product or service. If that’s you, you might want to consider adding a clear and easy-to-understand How It Works section to your home page, product page, or services page.
Adding A How It Works Section Can …
Add clarity and make your product or service seem seamless and easy to understand for your client or customer.
Highlight the benefits of working with you or buying from you by showing off aspects of the product or service.
Build credibility for your brand or business. By showing you have a process, you separate yourself from the hobbyists and establish yourself as a pro.
Address potential hangups your potential client may have for booking or buying from you by eliminating confusion.
So, how do you add a How It Works section that isn’t too much text, too cluttered, or just NOT visually appealing? We’ve got 5 easy ways you can use Squarespace content blocks to create beautiful and easy-to-understand How It Works sections for your website.
5 Ways To Make A How It Works Section On Squarespace
1. Use Side-By-Side Image Stack Blocks
We love this option as a go-to for showing how a process or product works because it combines visual elements (photos or graphics) and text. With an Image Stack Block on Squarespace, you can upload an image and add a header and some subheading text below the image. You can even use your Squarespace Site Styles to change the color below the image where the text is to a different color other than white to create even more of a custom design.
To get this look in Squarespace, add an Image Block and select “Stack” under the Design tab. Add 3 to 4 image blocks, and then use Squarespace’s drag-and-drop interface to put the images side by side.
PRO TIP: We refer to a couple of different options (including this customization of an Image Stack Block) using the Image Block on Squarespace. Here’s a helpful article on how to use and customize an image block on Squarespace.
2. Use Alternating Image Card Blocks
This is a great option for a how it works section that you want to be longer on your page, or that you want to really be a focal point of your page. Because the design is longer or larger than using side-by-side blocks, it takes up more visual real estate. We especially love this option if you want to add links or buttons from each step. This setup is really easy for your client or customer to clearly understand how your product or service works!
To get this look in Squarespace, add an Image Block and select “Card” under the Design tab. For each alternating Image Card Block, we’d recommend alternating which side the image is on by changing up the Image Positing option under the Design tab.
3. Use Columns To Visually Break Up Blocks Of Text
This option is perfect if your brand, blog, or business is low on photos that represent your process. That could be for many reasons: perhaps you’re waiting for the budget to do a brand photoshoot, or maybe you can’t find stock photos that really work for your brand.
We see a lot of people make the mistake of just pasting a lot of text vertically down their website page, but using columns to break it up into chunks visually not only makes it more visually appealing, but actually makes it more readable! Studies show that people love to read short line lengths online, so rather than reading all the way across the page, your website viewer is more likely to read something broken into columns.
To get this look in Squarespace, we use a little Squarespace hack! First, type up all of your steps into one Squarespace Text Block. Then, insert Line or Spacer Blocks in between each step or section in your How It Works section. Once the different pieces of text are broken up by Line or Spacer Blocks, it makes it much easier to use Squarespace’s drag-and-drop builder to put the text boxes side by side.
4. Use A Gallery Section To Create A Slider
This is a really easy way to make your website page look dynamic! Plus, this setup actually translates really well on mobile. This is a great option if you have abstract images that could go behind text explaining the steps.
To get this look in Squarespace, you’ll need to make sure your Squarespace base template has Index Page capability. If you’re using one of our Squarespace Templates, you likely are already set! However, you can check if your Squarespace base template has Index capability by checking out this help article all about using Index Pages on Squarespace.
After you’ve made sure you can use an Index Page, add a Gallery section to your Index Page. From there, you can upload the background images for your How It Works section to your Gallery. Click the gear icon on the individual photo to add title text and subtext to the photo.
Lastly, head to your Site Styles and make sure your Index Gallery layout is set to Slideshow.
5. Use A Summary Carousel Block To Create A Slider
This is another great option to create a more interactive How It Works section.
To get this look on Squarespace, we actually use a Blog Page in Squarespace and put it in our Not Linked section. Create each step as its own blog post. Add the title of each step as the blog title. Add the subtext of each step under the “blog excerpt.”
After your “blog posts” are created and published, head to the page you want add your How It Works section to, and add a Summary Carousel Block.
For the Summary Carousel Block settings, set the Content to the “Blog” you’ve created for your How It Works steps. Under layout, choose only 1 item per row. Under Display, just make sure to select the options to display the blog title and blog excerpt for the title and subtext of each step to appear in the slider.
Want more help with this step? We do the exact same steps to build a testimonial slider in Squarespace in this comprehensive tutorial! Follow along and replace the testimonials with your how it works steps.
SAVE THIS TIP FOR LATER
Pin the image below to your Pinterest account so you can have it for safekeeping to refer back to later.
THE WRAP UP
Love this tip for Squarespace? You’ll love our other Squarespace Tips! Check out our other blog posts filed under Squarespace.
Related Articles
