Today we are going to start building the frame of your new art website. We are going to create your basic pages. By the time you are done this post, you will have made the 5, 6 or 7 most important pages on your website. Or at least, you’ll have framed out those pages. You’ll also have your site’s menu built. Really!
Way back in Episode 1 I asked you some questions. In Episode 3 we focussed on some of the answers. Specifically, we looked at 5-7 key actions your visitors will want to take. Those 5-7 actions, I said, will make up your site’s pages.
Today we are going to build those pages with Squarespace.
If you are using another system to build your website, like WordPress, it’s still worth following along. Many principles transfer across platforms. There are similar tools that you will be able to infer by what we are about to do here. The actual terms we use today will have a lot to do with the specific workings of Squarespace. If you haven’t yet set up your trial site, now is a great time to do that. The 14-day trial is free and you can start today at squarespace.com.
If you’ve been following along, you’ll remember that Karla Adolphe has allowed us to peek behind the curtain of her website rebuild. This gets her a new website, and gets us a working example. Win-win!
We last left Karla with a brand new Template for her site, but no pages built. Today, we will fix that.
Here is the list of pages we came up with way back when. These are the pages Karla Adolphe’s site users will look for.
Music
Words
Workshops
Media
Merch
Tour
Contact
Let’s get our hands dirty in the Squarespace admin, and create those pages for her site. And your site.
I asked you to draw me a site map a few weeks back. Now, each of the circles on that map is going to become a real live web page. And you will make it so.
Order from Chaos
There is no particular order to the way these pages are laid out in the list above. That doesn’t matter. Yet. With Squarespace, we can drag these pages into a new order at any time, so let’s just create them in the order we have them listed for now.
Flipping Through the Pages Area
Once you click PAGES, you’ll see a variety of pages listed. They will likely say DEMO after each page name for now, in light grey text. That is because these pages are there to demonstrate what you can do with the template you chose for your website last week. Some of these demo pages could be adapted to fit your site, but we’re going to delete them and get a fresh start.
You’ll also notice that there may be a ’tree’ structure for some of the pages. That means that some pages are ‘children’ of other pages. They are indented below a ‘parent’ page. In the image to the left, you’ll see that Welcome is a parent page, and Home, Band, Tour, News and Music are sections within that page. A page with ‘children’ is called an INDEX page in Squarespace lingo. You’ll see why that matters soon.
Main Navigation
Before we create our first page, let’s look around a bit more. The top section you’ll see is MAIN NAVIGATION. The pages listed beneath that heading are the pages that will show up in your site’s main navigation menu.
In the screenshot image here, taken from Karla’s actual site-in-progress, notice how the pages under MAIN NAVIGATION to the left are the same ones that show up in the actual menu of the website, in the preview window to the right.
Secondary Navigation
This list of pages, below the MAIN NAVIGATION list, is another navigation menu that shows up in a less prominent place (if you use it at all). Often, you’ll find it in the ‘footer’ of the site (at the bottom of every page). This may be empty right now. It is empty on Karla’s site.
Not Linked
This is an important area that would be easy to miss. These pages are not actually in any of your website’s menus, but they still exist. This is helpful if you want to make a page that regular visitors won’t see, but you can email to your fans (like a secret page of goodies for email subscribers or people who came to your last show). You can create links to these pages from anywhere in your site, or email links to these pages, or even share these pages on social media. They very much exist, but as they are not found in any of your site’s actual navigation menus, they are pretty hard to find.
Just don’t forget they are there.
On Karla Adolphe’s site, there are a few ‘pre-loaded’ pages here that came with the Horizon template when I activated it last week.
You’ll notice a page called Readme here. Don’t delete this. Not yet. This page came with our template and explains the unique things the template can do, as well as how to do those things. Think of this Readme page as a bit of an instruction manual for your template. Handy, right?
We may need to reference that page, but not yet.
First, we need to make our 5, 6 or 7 main pages.
Let’s Make a Page!
This is where things get fun. Where you wield unbelievable, unlimited technological power and prowess. In just a few moments you’ll call someone you love into the room and shout - “Look! Look what I just made!” You doubt me? Just watch.
Scroll back up in that left-hand menu to where it says “MAIN NAVIGATION”. Right next to that is a magical button you might have missed. It’s a big “+” symbol. That is the button you click to make a new page.
Click it.
Now you get a menu popping up telling you what kind of page you can make. You can choose different types of pages based on what you want that page to do. And lucky for us, we know exactly what we want all of our pages to do.
OH THE PAGES YOU’LL MAKE
As I write this there are 10 types of pages we can choose. Bear with me as I explain each as simply and quickly as I can.
Page
A Page is a regular ol’ … page. It is the most generic and flexible item on this list, and you’ll use it an awful lot. It can be filled with nearly any kind of content and formatted in a variety of ways. If there was just one item this list–the Squarespace multi-tool–this would be it.
Products
These pages are used to sell things on your site. If you want to sell paintings, you’ll use this. It ties into a special area on the admin side where you can manage your products and offerings. Karla Adolphe does want to sell things, so we’ll be using this.
Cover Page
This won’t be of much use today, but a Cover Page is basically a standalone page on your website with a singular purpose. Perhaps you have a special project that you want to highlight. A major event coming up. An album release. Your latest film or trailer. A Cover Page can look different from the rest of your site. It generally looks much simpler and cleaner. We used a Cover Page last December for Blue Christmas. We’re using one right now for Bridge Songs Perfict. They can come in handy, but likely not just yet.
Folder
You use Folders to create drop-down menus on your site. Folders can contain other types of pages, but are not pages themselves. They are really a tool for organizing pages in the list to the left. They do show up in your website menus, but when users click them they are simply taken to the first page in that folder. A folder is little more than a container for other pages.
Album
Albums are for musicians. Since Karla Adolphe is a musician, we’ll use this. Albums are a great way to showcase music, and allow site visitors to play through a collection of songs. You can upload album art and information, and add tracks to the album. Visitors can listen in a great player, without being able to download the music. This is good if you want to actually sell your music. You know … for money.
Index
An Index is similar to a folder, with one key difference. Similar, in that it is a way of grouping pages together under a ‘parent’ page. Different in that an Index actually puts all of those pages together into one long, scrollable page. A user can click and view an Index. When a page is added to an Index, it becomes a section of that Index page. But these sections can be moved out from under the Index and live on their own once they’re all grown up. This is a nice bit of flexibility. We’ll actually use an Index for Karla Adolphe’s home page, because we want people to get a lot of information on that one page. Remember Karla’s ‘digital hub’ strategy? Her Most Important Thing?
Blog
A Blog is a collection of dated posts, displayed in a list and sortable by criteria like date, author, tags and categories. It’s a a place where fresh content is added fairly regularly. You’d use this for news updates, or a ‘painting a day’ section. Things like that. Karla will be using her blog regularly, and right now she has to use a whole different tool for that. Not any more, Karla. Life online just got a whole lot easier for you.
Blog posts can also have comments, if you so choose, and buttons for your visitors to easily share your content online. Blogs are the reason people come back to your site regularly and I suggest you find a good way to maintain one.
Gallery
A gallery can be a collection of images or videos. It’s a place to show off your media. Squarespace does a great job presenting your work in Galleries. If you are a visual artist, you may want to throw all of your work into a single gallery, or you may want to create different galleries for each of your series’, and throw those under a Folder or Index page so they all live in one place together, easy for your visitors to find.
Events
Squarespace can host your Events calendar. It’s a pretty special feature. I use it all the time for upcoming events at The Bleeding Heart Art Space. Karla could use it for her travel plans, upcoming shows or workshops. Like the Blog, an Events page is a collection of individual pieces of content - in this case dated events. Events can have special information attached to them, like dates and times and even locations (complete with a Google map)!
Links
Links are not pages, per-se. They are simply a link to another page. A page on your website, or a page somewhere else. Maybe you have gallery representation and want to link to that gallery’s website in your main website menu. You can do that by adding a Link to your Navigation areas. Handy. Or you could, say, put a Link to BleedingHeartArtSpace.com. But since that’ll take up a whole lot of real estate, I don’t recommend it.
Starting from Scratch
First we’re going to get rid of the pages Squarespace has made for us. It was a nice gesture, but unnecessary. You’re going to learn this for yourself.
As you scroll through that left menu, you’ll see a trashcan appear next to the page you hover your mouse cursor over. Hover over that trashcan and it will turn red. Click that red trash can and you can get rid of that page. Don’t be scared.
Delete everything under Main Navigation. Unless your Readme page is there. If it is, you can ‘click and drag’ it down, into the Not Linked area.
You’ll notice one page has a little house icon next to it. That is your site’s homepage, and since your site needs at least one page, you can’t delete it. At least, not until you make a different page your homepage. So don’t delete it. We can live with that for now.
Fleshing it Out
Now we know what we can create. So let’s create something. Let’s return to those magical 7 pages Karla needs. Or those 5, 6 or 7 pages that you need.
Music
I click the “+” symbol next to MAIN NAVIGATION. All of these pages will go in the Main Navigation. I see a music note. I can make an Album. Let’s start there.
I’m asked to name the album. “Lingering" is Karla Adolphe’s latest album so I choose that.
I am taken to a view with settings for this album on the left, and the page I have created on the right (in the live preview area).
Right now it says ‘This playlist is empty’. It will remain empty for now.
On the left, I can add album art. I don’t have that handy right now, but if I did I could literally drag it from my computer onto that big square with the arrow. Squarespace makes it just that easy to add images to your site.
We’ll get into details later. Right now, we’re just building our frame. I need to make more pages.
I click the little word PAGES next to the arrow in the upper left corner.
I notice now that my page is actually called Lingering. That is because that is the name of the individual album I just made. I want a page called “Music”, so I’m making a small change.
I create another new page called Music. This time I choose Index for the page type. I name this page Music. Now I grab the first page I made, called Lingering, and drag it with my mouse under the Music Index page. There. That’s what I want. Now only Music shows up in my Main Navigation, but both pages exist.
Words
This will be Karla Adolphe’s blog. I click the “+” symbol next to MAIN NAVIGATION yet again, this time choosing Blog.
The new Blog page shows up in the left hand area, under MAIN NAVIGATION. It is highlighted, meaning it is waiting for me to give it a name. I type ‘Words’ and hit ‘Enter’.
I am now taken to an empty Blog admin page. I won’t do anything further right now.
I return to the PAGES screen to make my next page.
Workshops
I think I’ll use an Events page to set this up, so that users can see when and where Karla’s next workshop is coming up. I click the trusty “+” symbol once again and choose Events this time.
I’m taken to another blank page. “There are no events…” it says. I know. That’s fine. Carry on.
Media
This will be a Gallery page, as we want to show both photos and videos here.
I click the “+” and choose Gallery from the page type pop-up. Again, I’m asked to name the page. I type “Media” and hit Enter. I get a similar admin screen next to a now-familiar empty page.
Good for now. Back to PAGES.
See? I told you we’d get the hang of this.
Merch
Karla wants to sell things on her site. CDs for sure. Maybe t-shirts? Maybe workshop payments? When sales are involved, we want a Products page.
Click “+”. Choose Products. Type “Merch" to name the new page. Get a familiar “nothing here yet” page. Return to PAGES.
We’re almost done for today. Hang in there.
Tour
This one is not so obvious. Karla wants to list her tour dates, so you’d think Events would be the page type to choose. But that’s not what I’m choosing. I’m choosing a regular Page, and here is why.
Pages act as containers for all sorts of other content. They can actually hold just about anything we’ve mentioned so far, and more. They can hold content drawn in from other sites compatible with Squarespace. Like BandsInTown.
I’m planning to try BandsInTown for Karla’s tour dates, and to pull that information right onto her own website where it will be updated in real time. For today, all I need to do is make the page where that magic will eventually happen.
I click ye’ olde “+” symbol. I select Page as the type. I type “Tour” as the name. I get a fresh blank page. I’m done. Almost.
Contact
At long last. The final page. The Contact page.
This too will be a regular Page. Click “+”. Choose Page. Type “Contact”.
Done.
The Main Navigation Menu
You may not have noticed this yet, but as we built those pages, we also built the menu for our site. Poof. Like magic. Both at once.
You’ll also notice that these pages we just made have fancy icons next to their names that tell us what kind of page they are. A dollar sign for our “Merch” page (because it is a Products page). A letter ‘a’ for “Words” (because it is a Blog page) and so on. Well. That’s pretty neat.
The only problem is that things got put in the order we created them. Which is, in my case, the opposite of the order I want to start out with.
Thankfully, you can drag and drop pages around at will in Squarespace.
So back at that list of PAGES in the left, under MAIN NAVIGATION, I click-and-drag the top page, in my case “Contact”. I pull it down, past all the other pages, to the bottom of the MAIN NAVIGATION list (but not past that).
A word on ‘Click and drag’ here. You want to click, then hold down your mouse button while you drag the item, then let it go when you have the item where you want it. If you just click the item quickly, you’ll actually open it. You don’t want to do that right now. The difference between a ‘click’ and a ‘click-and-drag’ may seem like a cruel invention by the Geeks That Be, but you’ll come to appreciate it’s usefulness once you get the hang of it. Maybe.
I continue to move all of my pages into the order I want them, and there you have it. The frame of my site, all ready to be filled in with yummy content. Next week.
You Have Homework
You’re going to want to prepare some starter content for each of those pages we made today. Decide what text you want on your homepage (if any) and what images. Collect all of that together in a folder on your computer. Decide what photos you want in your gallery. What products you want to sell (at least one to get started). Write your first blog post (even it if it is just, “Hi. I’m here now. Isn’t this great!?”). You don’t need everything, but at least the content for one page to get you started filling in the blanks.
Because, in just one weeks time, the blanks will be filled. Oh you’d better believe it.
For now, just stand back and wonder at the simple elegance of that mighty frame you have constructed. Ahh. That’s good stuff.
I knew you could do it.
PS. If you got stuck along the way, ask in the comments below and I promise to respond. Chances are, others have the same question.