Build Your Website With This Squarespace Wireframe Tutorial For Beginners
About this Squarespace video tutorial
Once you have your website copy taken care of, I'll walk you through how to see it in action with my easy-to-use free wireframe that can be accessed by going to designingtherow.com/free. This will give your website an optimized homepage built for conversations that can lead your site to work for you.
Timestamps
0:00 - How To Get Wireframe
1:10 - Editing The Wireframe
3:38 - Adding Additional Copy
10:14 - If You Need Design Help
Want 20% off your new Squarespace subscription?
Subscribe to the Designing the Row® email list and get the exclusive code sent straight to your inbox. You’ll get email updates when new Squarespace tutorials are published, but you can unsubscribe at any time.
How To Get Your Squarespace Wireframe
In last week’s video, we went over how to get website copy that will convert viewers into clients with the Custom Copy Curator program that you can get access to for free by going to DesigningTheRow.com/free. Today, our goal is to show you how to put this copy into a wireframe template that I’ve already built out to make the process as easy as possible for you.
However, before we get started it is important that you do one final pass over the copy that was generated by the CCC to make sure all of the words sound and feel right for you and your business. It’s so much easier to take care of these final copy passes at this point in the process versus trying to fix it later down the line when you have so many pages built off of the information on your homepage.
Once that’s done, you’re ready to go. To get the homepage copy wireframe, all you need to do is go to the inbox of whatever email you signed up for the CCC with; you should have an email invite for the wireframe ready for you.
Editing The Wireframe
Once you have access to the wireframe within your Squarespace account, hit ‘edit’ to get started. No better place to start than the very top of the page, so hit ‘edit site header’ and put in your brand or business name as well as your logo if you have one. If you do have the logo, it will appear at the top of your page instead of text of your business name, but that information is still being logged by Squarespace as the title of the page. It is a good idea to add in some extra content or context to the site title if possible just to have extra SEO value and best explain the purpose of your business to your customers.
These same principles apply to the rest of the page, where it’s just a game of copy and paste. The CCC copy should tell you where it needs to go, and the wireframe is designed to match up perfectly with these sections. One more tip: be sure to hit save as you go just in case.
Adding Additional Copy To Your Homepage
Of course, there are absolutely cases where you’ll want more copy or content on your homepage. In order to get that from the Custom Copy Curator, just keep “talking” to it! For example, you can get a new tagline for your business that may be a little more descriptive/helpful. This is why it’s important to double check the copy that the CCC generated, because you might end up needing greater clarity or specificity than what the first draft offered. Once you’ve gone through this process, it’s time to review your completed wireframe.
Extra Tips
Just a couple of things that it’s important to keep in mind when working with the wireframe:
It’s always good to add real pictures of your team in the picture slots instead of stock photos or AI-generated photos. Even if the quality isn’t exactly how you’d want it with photos of your team and your business, it is always preferred. Real photos go a long way.
If you’re adding in content blocks that aren’t already in the wireframe, always be sure to click the ‘mobile view’ button at the top right of the screen when editing to make sure that your new sections don’t have any issue with padding or spacing. Almost always this won’t be an issue, but it never hurts to double check.
If you want to reorder a section, just click on the section in the edit mode, and in the menu of options that pops up, click the up and down arrow buttons to shift the sections around. They are placed in the existing order on purpose based on how I’ve seen sites work best, but you’re more than welcome to adjust it to better fit your business and the goal for your website.
Design Help
Now that you’ve got this wireframe built out, you might still be needing help with building out design principles, and if so, all you need to do is click on DesigningTheRow.com/services and we can figure out how to best work together to get your business the site it needs! You’ve already done the hard part, after all, which is the copy, so reach out now to keep the website momentum going!
The latest Designing the Row tutorials…
