We started Website Wednesday a month and a half ago. We’ve been wandering, homeless, ever since. Today we’re going to build ourselves a home(page).
Website Wednesday is a series designed to get your art a great website. This series of posts builds on itself week by week. If you’re just tuning in, you might want to start with Week One.
Building a Home(page)
The homepage on your website will give visitors your Most Important Thing. That will be the first thing they see. Exactly what you hope will be the first thing they see. We’ll make it so, by design.
So with that Most Important Thing firmly in mind, let’s get our hands dirty, back in our website building tool of choice, Squarespace.
Once logged in to your admin area, click PAGES. Under that first MAIN NAVIGATION area, look for the page that has a little ‘house' icon next to it. That will be your site’s homepage (you can actually make whatever page you want your site’s homepage, in the page’s SETTINGS menu, but we won’t worry about that for today.)
I’m working on Karla Adolphe’s new website, and her homepage is called “Welcome”. When I hover over that page name, a few things happen. Let me explain what they mean.
First, the ‘house’ icon will change to a ‘trash’ icon. If you click that, you can delete this page (after you confirm that you really, really want to do that).
Next to that icon is an icon telling me what type of page this is. In my case, it’s a little stack of lines, which Squarespace uses for an Index page. As I explained last week, and Index page is really a scrollable collection of other ’sub-pages’, all contained in what appears to be a single page for your users. Very handy for a page we want to train to do a lot of little tricks, like Karla Adolphe’s homepage.
Next to that there is the page name. Then, a ‘gear’ icon. If I click that, I will get window giving me the settings for this page.
Next the gear is a little ‘down’ arrow. Clicking that will expand or hide the list of Sections within this Index page. If you don’t see anything under your Index page (if that’s the type of page you have here), then click that down arrow. You may have some filler content, but more likely, like me and Karla, you have have a little dotted-line box that says Empty Index inside. Let’s fix that and add some content.
Right below you’ll see a ‘plus’ icon. Remember that in Squarespace, this icon means you can add something new. Here, we can add a Section. Just what I want to do!
Section by Section
Clicking Add Section, I get a little pop-up asking me to choose the ‘type’ of section I want. Don’t get overwhelmed here. Unlike making a whole new page, we have just three choices. A Page, a Gallery and an Album. As I explained these all last week, we’ll simply choose Page and move on.
Now we name this new Page/Section. By default this will be the first area our site visitors see on the homepage. I think an overview of Karla Adolphe as a musician would be good here. Like a little bio, with her photo. So I’ll call this “Meet Karla". (by the way, you can double-click the Page name at any time to change it).
Not much has changed. We still need to populate this new Section with content.
Simply move your mouse over the empty space in your site preview to the right, and you’ll see a little menu appear. You’ll see the word EDIT in that menu. Click that.
Now you are taken to a full screen view of this Section of content. You are about to learn how to add content to your Squarespace website, and how to make changes to what you’ve added. It’s going to be exciting and you’re going to feel empowered before we’re through.
Adding and Editing Content
If your page is blank, you’ll see some starter text that says ‘Write here…’ You can literally click that and start writing. You can write what you want, click SAVE in the upper left corner and guess what? You just made a web page. A home page no less.
Pat yourself on the back and then realize how boring this looks.
To make things interesting, we’re going to need to do a bit more work.
First, I’m going to make a Heading. I’ll type “Meet Karla”. Then I need to make that stand out.
You’ll notice that as soon as you start editing text in Squarespace, you get handy formatting menu that shows up right where you are editing. You get standard options here that you’ll recognize from programs like Microsoft Word or Google Docs. B for bold, I for italics, etc. You can get in depth help on using a Text Block (which is what this part of your Page is) here, complete with video. What we want right now is the Styles menu, which is right in the middle, and pre-selected to “Normal”.
Click the word “Normal” and you’ll see a drop-down of pre-defined styles. Squarespace has pre-set styles for headings and other types of text, so that everything you create looks great. This means you cannot just change fonts and colours at will, and trust me, that’s a good thing.
Headings are arranged in a hierarchy. They provide a good visual cue for visitors. They make your content more readable as they break it up into smaller bits. They also communicate the layout of your content to software like search engines and screen readers for the visually impaired. You should use Headings.
Making sure my cursor is somewhere within the line of text I want to style, I’ll choose Heading 1. Viola! “MEET KARLA" becomes all capital letters for me, takes on a new font and a new size.
With my cursor after “MEET KARLA”, I hit Enter and begin a new line. You’ll notice that the style resets to Normal for this new line. Fancy.
Now I’ll copy-paste some text I have from Karla Adolphe’s Bio. I cannot write your content for you, but I can direct you back to some guiding content principles. Remember your Why.
We want this whole page to support our Most Important Thing. For Karla, that is to create a digital hub – a place where her various internet adventures are brought together into a digestible banquet for current and future fans. Because of that, I don’t want a long bio here. I want a short intro, so that before the user even scrolls down, they can see there is plenty more to come.
I also want something that is visually more interesting than what I have. So I need to add an image.
Thankfully, I have a great big, beautiful bio shot of Karla to wallpaper this website with. Because I want the image to stretch fully across the website (it’s big and high quality), I won’t actually place it in the ‘content area’ of the page, like I would normal image.
I’m going to make my image a background image. Here’s how I do that.
Setting a Background Image
First, I’ll save the work I’ve done. Click SAVE in the upper left corner.
Like magic, my left-hand menu reappears and my site preview shrinks back down. I need to change the SETTINGS for this page, rather than its content. The SETTINGS are where the background-image magic happens.
There are two ways to do this. First, we could click that ‘gear’ icon next to the page name in the left-hand PAGES menu.
Instead, we’re going to hover over the actual page content again. That pop-up menu returns. You’ll see that you can EDIT, INSERT BANNER IMAGE, or play with the SETTINGS.
If I use INSERT BANNER IMAGE, a top section will be created for my page. The page name (as found in the left-hand menu) will show up overtop of my banner image, and the text I just made will show up below it.
That actually looks pretty good, except it looks at though I just made my “MEET KARLA” heading redundant. I’m not going to worry about that right now, because actually, when I view this ‘page’ in the context of my entire homepage, that won’t be the case.
But just to help you find your way around, let’s try doing this the other way.
I hover over the page content once again, but this time I click the right-most option: SETTINGS.
Here we get a screen called CONFIGURE PAGE. A run down, you ask? Why not.
Navigation Title
Here is the title that shows up in the actual site menu. Not necessarily the same as the title that shows up for the page once a view visits the page. For instance, you might want to use something shorter in the menu (“Words”), and elaborate on the page itself (“Poetry and Non-Fiction Writing”).
Page Title
This is what will show up on the page when you use that INSERT BANNER IMAGE option we tried a few moments ago. This is the more precise title you want to use for the page.
Enabled
A checkbox that allows viewers to see this page, or not to see this page. It still exists either way. Handy for making pages without having to remove the whole page while you work on it.
Description
Some templates will show this. The one I am using will. Others won’t, but it is also used by Search Engines like Google to describe your page to visitors. It’s a good idea to fill it out with something about your page. I’ll fill mine out with some basic information about Karla Adolphe. A couple of lines at most is all you need, so be brief.
URL Slug
This is the part of the website address people will see when they visit this page, that is unique to this page. Think of it as ‘the part after the slash’. Right now mine says ‘new-page’. I want it to be more descriptive so I type in ‘meet-karla’. URLS are not case sensitive, so no capitals are needed unless it helps for readability.
Password
With Squarespace, you can password-protect any page on your website! This could come in handy if you want to offer something special, like a free download, to your newsletter subscribers. Any visitor to the page without the password won’t be able to view its contents. But why on earth would I want to hide my home page?
Thumbnail Image
This is the other way we can add our background image. It is called a Thumbnail Image because in some areas, like blogs, this is the image that will show up next to an excerpt of your content. It is also used, I believe, for sites like Facebook when someone shares your page. You can actually control the image that shows up when people share your content, and this is where you do that.
I can do this a variety of ways. The easiest? I can just drag my image onto the big grey square and ‘drop’ it there. When that works, you’ll see a progress bar show up and start to fill. Then you’ll see you image.
You can also click “Add Thumbnail Image” and choose a file the old fashioned way. Sometimes drag and drop doesn’t work for me, and I can’t figure out why. But this trusty method always works.
Finally, if you don’t have an image ready-to-rock, you can actually buy a high-quality image right in Squarespace, through Getty Images! Click the Getty Images search bar at the bottom there and type in what you want. You’ll get selections, and if you decide to use one, $10 will be charged to your Squarespace account. Pretty slick.
PAGE CONTROLS
Finally, there are some buttons at the end of this screen. One says SET AS HOMEPAGE. I’m sure you can guess what that does.
The next says DUPLICATE PAGE. This is nice if you want to use a page as a template for making a new page that is similar. It could save you a lot of time if your page has a lot of custom formatting.
CANCEL | DELETE | SAVE
Since I want these changes to stick, I click SAVE. CANCEL would get rid of my changes, but keep this page. DELETE would delete the page entirely. Yowsa!
Click SAVE.
Another Section Please
Now I will make another section that pulls Karla’s Social Media profiles in, and get on that digital hub train that happens to be Karla’s Most Important Thing.
Back in the left-hand menu, under the Page I just made (“Meet Karla”) I see Add Section next to a “plus sign”. I click that.
I choose Page.
I call this one Getting Social.
I hover over the little empty content area to the right. I click EDIT.
I click on the placeholder “Write here …” text.
This time I’m going to work some magic.
Rock the Block (And What the Heck a Block Is)
Squarespace works differently from most every other content-creation platform I’ve used, in that it uses a series of Blocks laid out on your pages. This is very flexible, but a little hard to understand at first. It’s a different paradigm from a Word Processor or a tool like WordPress. It’s worth learning, because you can make a lot of different kinds of Blocks and they all do some special stuff. On the last page, we just used a standard Text Block. But we’re about to go block-crazy.
Create a New Block
When you hover your mouse over a spot where you can make a new Block, you’ll see a sort of blobby-shape appear in grey. Hover your mouse left of the content area, underneath the word SAVE, to see this.
Click one of those magical blobs and hang on tight.
You’ll get a pop-up of content types you can insert. It can be overwhelming at first, but you’ll get the hang of it, promise. Thankfully, they have been nice enough to split these up into logical sections for us.
BASIC
These are the most common types of content you’ll use to craft a beautiful web page. Text. Images (yep, this is how you add an image to your content). Videos. Audio. Embeds (code) from other sites. Markdown (a special type of code that you likely won’t use). Quotes (formatted differently from normal Text).
GALLERY
Want to show more than one image or video in a collection? You’ve come to the right place. The different options represent different layouts for your galleries, and can be changed later.
SUMMARY
This is how you can pull blog posts, or upcoming events, into other pages on your website. We won’t get into all that just yet, but it’s pretty darn powerful stuff.
MORE
I won’t get into all of this hodgepodge yet. You can always view the Squarespace help for these explanations. Suffice it to say there are some common things in here, like a Line, that you might use to break up your content, or a Form, that you might use to collect information from your users, like their email address.
FILTERS AND LISTS
This area gives Blocks for users to search and sort your website content. Useful, but not yet.
COMMERCE
These Blocks pull content from your Store. We don’t have that set up yet.
SOCIAL BLOCKS
Ahh yes. There they are. The Social Blocks. These connect your website to your presence on social media. Which is exactly what Karla Adolphe wants her homepage to do.
Let’s start with a Social Links Block.
I choose Social Links and Viola!
Oh wait. Nothing. Right. I need to actually tell Squarespace where to find Karla on social media. I need to adjust some settings elsewhere.
Hold on while I do that (but don’t explain to you how I do it, so we can move on. That’ll come another time.)
There. Done. Let’s move forward.
This time, when I click Social Links, I get some icons for the social networks I have connected to Karla Adolphe’s Squarespace account. Much better.
I can also edit how these links appear. This is a good thing because I can’t even see mine right now, as my background is black, and so are my social icons. Let’s change that.
I can adjust the Size. I make mine “Large”. I can adjust the Style. I like “Square - Solid”. I can adjust the Color. I choose “Standard”, which assigns colours typically associated with each social network.
Get these how you like them and click SAVE.
Pulling In Your Twitter Feed with the Twitter Block
One of the more common integrations is bringing your most recent Tweets right onto your website. It’s a great way to keep your site fresh, and get people to connect with you on Twitter. Both of these are plusses for Karla Adolphe.
To add this, I need to hover around the edges and get that ‘blob’ to show up again. Note that multiple ‘blobs’ may appear, and each represents a different placement for this new Block I want to add. I click the ‘blob’ below my Social Links block. I scroll down my list of content choices. I click Twitter and don’t my Tweets. Yet.
I do see a new options menu.
Under Connected Account, the right account is showing. Good.
I can use the slider just below to select how many tweets I want displayed. I’ll pick the 3 most recent, rather than 10.
Search would allow me to display tweets related to a certain hashtag or term, but I don’t want to use that right now.
The other options are fairly self explanatory, but I won’t bother with them right now.
I click SAVE.
I’m Done. But I’m Not Happy.
OK. I’ve got the content on the site’s home page. I look at what I’ve made and now comes a feeling you’ll need to get used to. Frustration.
I’m frustrated that things don’t show up exactly like I want them to. I’m frustrated by the design of the site overall. I’m frustrated that the text is sitting right on top of Karla Adolphe’s face. I’m so sorry, Karla.
I know how to deal with these frustrations. I need to change the Styles for this site. I need to make it look like I want. But you won’t always know how to fix your frustration. And when that happens, you need to take a breath, know it will all work out soon, and walk away for a bit.
Breathe. Go for a walk. Stop staring a the screen.
Just like I’m doing now.
I’ll see you next week!
Got questions? Ask away in the comments below!