Ep.1: Am I using the right Squarespace Template?
About this Episode
In this episode, Zippy Burman of Studio Tempura asks us about her client’s Squarespace website. Puno walks her through the Squarespace Template Comparison and helps her migrate to the Brine Template Family. Then, she helps her with a little bit of custom code to center the footer in mobile.
⭐️ Don’t forget to check out our Squarespace Design Course ⭐️
Custom CSS
used in this episode
/* FOOTER *************************/ @media only screen and (max-width: 640px) { .Footer { .tweak-site-width-option-full-background .Footer-inner, p.text-align-right { text-align: center; } } }
Transcript
🎵[MUSIC] [BEEP] Ring, ring, ring, ring. ring, ring.
Puno: Hello!
Zippy: Hello000!
Puno: Oh, heyyy, who 'dis?
Zippy: It's Zippy!
Puno: What's up, Zippy?!
Zippy: What's up?
Puno: How are you?
Zippy: I'm doing great. How are you?
Puno: Stoked that you have a 1-800-HEYPUNO question! Let's introduce yourself. Okay, Zippy. Who's Zippy?!!
Zippy: I am a graphic designer and creative consultant at Studio Tempura.
Puno: Ooh. And you actually just created your creative profile.
Zippy: I did. It is up and looks beautiful.
Puno: So you are now freelancing- you're specifically Squarespace freelancing- and I have to say, thank you so much for helping with the Squarespace Online Course. That was really awesome because all of your questions are like, oh yeah, I need to add that and need to add that.I believe that's why we're here today... because you have some more questions about Squarespace, but just to give everybody a taste. Then, more specifically, I'll answer your very specific question.
Zippy: Yeah, they're very specific, but your Squarespace tutorial was awesome. It definitely helped with the beginning of this site and really gave me a lot to think about when I was putting it together. So, thank YOU!
Puno: Yeah, no problem.
Puno: We've got this website that you sent me. It's called Restaurant Bold. No, I'm kidding. It's not called restaurant. But, you've been working on this and this is a client of yours.
Zippy: Mmhhhhmmmmm.
Puno: So tell me what's going on.
Zippy: Yes. So they wanted the imagery of the food that they will be making to be the highlight of their website. So we wanted to make sure that there was a slide show and images very large on every page. But, there are some issues with this template that I'm using, specifically. If you scroll down, like there's that big section in between the images and the footer.
Puno: Mmhhhmm, mmhhmmm.
Zippy: Also when it goes to mobile, the footer gets so weird!
Puno: Booty!
Zippy: We want it to all line up in the same way so it looks really streamlined and professional.
Puno: Yes. Okay, cool. First of all, these images are beautiful.
Zippy: Thank you. They are pulled images.
Puno: See, and I think that that is really important to pull, especially if you're doing client work and they don't have any assets, is to pull the right images. You know, the images that they should have.
Zippy: Yeah. Give them an idea of what the aesthetic would look like.
Puno: Yeah. This is a very wide image, but also when you are in mobile, it needs to either be very close up like this, so the center has to be epic to...
Zippy: Yes, it's got to look yummy!
Puno: Yeah, I mean I'm already hungry. It's two o'clock. So, this is Bedford, and I have a Squarespace template comparison page, which you can get to via ilovecreatives. I go through this in extent in the course, but what I like to do first is kind of see—because I forget what my notes are about each template—and I recall doing some research with Bedford. I'm just going to say I think-
Zippy: I actually used this page when I was looking at templates because I had shown a couple of options to the client to get their understanding of like what they were looking for. That was the one that seemed like it would be the easiest one to work from.
Puno: Yeah.
Zippy: But obviously we're having some issues that are coming up because of the the template I chose.
Puno: Honestly, I've worked with Bedford before because Bedford was before Brine. So, there was just, I just know that the style editor, there are so many different options, but they are varied. What we should do first is change Bedford to Brine. There's a couple of features that Brine doesn't have, and that is a blog sidebar.
Zippy: Mmhmm. Well, we're using it for the menus tab, but that's something we can adjust later on.
Puno: Okay, we've got some things to do. Let's start with...
Puno: I'm installing a new template, and a lot of people get a little worried about this because you're changing a completely new template — but it's not too crazy, and you don't have to push it live immediately. I actually recommend you don't push it live. Before we change anything, we are going to take the styles from Bedford. And, unfortunately for anybody that's not a Squarespace Circle member, which Zippy is and I am, you won't see this yet. It is a Beta feature, but it's a Beta feature, so it should be available soon. If you do need someone to import your style or export any of your style packs, ask a Squarespace Circle member.
Zippy: Yayyy!
Puno: So I'm going to export the style pack, and then I'm going to show this in my finder. Then I'm going to go into template, and we're going to install a new template. It could be Brine, it could be something else too, something that already has a logo on the top, which Pedro does...
Zippy: Mhhhhmm
Puno: And so does Margot. But, let's just use Brine. Okay, so I'm going to search for the Brine family here. I'm going to install this one. So it's installation is successful, but that doesn't mean that it is live. Then I'm going to click on preview, and see if you click this blue button, then that'll be set as live template only you don't want to do that yet. Now I'm going to go back to design, and then style editor, and we're going to import those styles. Okay. So now I'm going to, I'm going to drag this over so I don't have to look for it on the left. It's my little shortcut.
Zippy: Such a good one.
Puno: I think I accidentally dropped a file, and that's how I found out it could happen. All right, what we're going to do is, I want to go back to pages and let's find the old homepage that you created. All of the pages that you've created in Bedford are now in Brine. I'm going to make this homepage your homepage. Set as home page. Confirm. Okay, so we've got home. What else? Help me out here.
Zippy: Uh, the "Menus" folder
Puno: "Menus" folder.
Zippy: "Find Your Way Here." "Book a Table," but that one we need as a button. So that would be a secondary.
Puno: Okay, so that is a secondary navigation, and the reason why is Brine allows you to style secondary navigation separate from primary navigation, which is not something you can do in Bedford. In Bedford, they just automatically make the last navigation style your button. But this one, you can do like two buttons if you want.
Zippy: Mmmmhhmmm.
Puno: Mmmhhhmm, okay. We're going back to design, then style editor. In the previous one with Bedford, she had navigation that was over on a slideshow. So, I am going to click on the primary nav and the most important thing to do is click on bottom right. That way that your images overlayed on there, and then "Book a Table" is going to be bottom right. I'm going to remove inherit private primary navigation styles. Make the style button.
Zippy: Yesss
Puno: I think it was outline?
Zippy: Yeah, we can do outline for now.
Puno: Okay. Square, color #2222 for now. That's good enough. And we can style that later. I'm going to hide the tagline and restaurant is going to be on the bottom left. Getting close.
Zippy: Perfect.
Puno: In Bedford, the way that you would add a slideshow is you create a page and then you put a slideshow within it. Now with Brine, what you do is you add a section called gallery. This is great. I mean I know that these are just placeholder images, but the um, the size is beautiful. 146! Ugh! And then, of course, for SEO, just adding the restaurant's name.
Zippy: Yes!
Puno: That always helps. Okay, so now we have the gallery. We need to move this up, and then I don't want to delete this because- just in case if I mess up- then I'm going to just keep it here, so that it's still alive in Bedford. Now we've got that. I think I need to refresh because it doesn't look like it changed.
Zippy: That's a good time to drink some coffee.
Thinky Thoughts
🎵 [MUSIC]
Think good thoughts! Destiny's Child: Survivor. I'm a survivor, I'm not gonna give up, I'm not gonna stop! I'm gonna work harder! Britney Spears: Lucky. She's so lucky, she's a star! Aaliyah: Try Again. And, if at first you don't succeed, then dust yourself off and try again. Christina Aguilera: Beautiful. You are beautiful, no mater what they sa-ayy-yayy. Thinky thoughts!
Puno: Okay, we're going to go back to design, style editor, and then we are gonna to change this grid into a slideshow. Overlay header on first index gallery. Yes please. Oh, look at that. Oh, no. I'm just going to remove spacing. Is that look the same or what?
Zippy: Looks legit.
Puno: Okay. The other thing that you said you had was the footer.
Zippy: Yes.
Puno: So let's add that right now too. And it was basically some text on the left and text on the right. And what I'm going to do is move this like that. So it's on the side.
Zippy: There we go.
Puno: There we go. Momma got it. And then I'm going-
Zippy: There we go.
Puno: Yeah. Align. Okay. So let's do this. Some texts on the left, some text on the right. The way that we do that, I'm going to go back to design, and then custom CSS. You know, do command, shift, C. What you have to do is, this guys, it's gotta be centered, right? You want this one to be centered.
Zippy: Yeah. Both of them.
Puno: Both of them. Texts align.
Zippy: Yes.
Puno: Center.
Zippy: Oh, there we go.
Puno: So that one was that one. Okay. We're going to add that into a new- When I do the codies, I always have a little code thing open, and I use sublime text for now because it's free. I'm going to use the element selector and then text align right. Oh, see it as the same one. I'm just going to do a +, because now when you do + it actually brings in the style, and then I'm going to do text, align, center. Boom.
Zippy: Do you have to like tell it that on mobile, this is the case-
Puno: Yes.
Zippy: That when it's in desktop it doesn't center as well?
Puno: Yes. The other thing too is I only want to do the footer, so I'm going to use the class.footer right here. Footer. I'm also going to use that as well to identify that it's just this footer. Do it like that. I'm gonna just add this one and then copy and paste and put that that bad boy in there. So now it's like everything that has .footer plus these guys. If you want to, to even be more efficient, you could do comma like that, and then remove this. Now let's do the mobile responsiveness because let's just show what that looks like here. Oh, the other thing I like to do is add where I'm adding this crap. Okay, so now if you haven't opened like this- Ooh, look it's center. You don't want that! It's like, no man, I didn't sign up for this. We're going to go to media only. Let's see if that works. 'K.
Zippy: Crossing all of my fingers and toes. Yayayayay!
Puno: Okay, so we have that done. And you can even play with the menu too, like there is a menu block in Squarespace.
Zippy: Ohhhhh
Puno: Yeah. It's cute.
Zippy: That definitely could be an interesting thing to work with.
Puno: There's a simple one. There's the classic one. Oh, there's one more thing. Just to add here, there was some kind of title.
Zippy: Yes. "Dining at Restaurant. "
Puno: This looks like Bedford. Yeah, it does. All right. We're good. Thanks so much for your question. Good having you on the ol' 1-800-HEYPUNO.
Zippy: Thanks for having me. I'll have to call back soon with more questions.
Puno: I know, it's going to be like a regular, "Hey Zippy!"
Zippy: I'll have to have like a direct line.
Puno: I hope that everybody out there who is a designer sees how much potential there is with Squarespace without having to do too much code. Yes, today we did some code, but, um, there's still a lot you can do with the template, especially if you start understanding what all the templates are about. All right, have a good one and I'll talk to you later.
Zippy: Sounds good. Bye, Puno!
Puno: Byyeeeeee!
Outro:
Puno: Thanks for watching, or listening. Don't forget to click to subscribe because you know, not everybody just remembers to do that. So that's why we have to say that right here. But, uh, yeah, do that.
If you have any questions just to https://ilovecreatives.com/1800heypuno. Would love to hear your questions and maybe have you on a call. So, yeah, we're waiting for YOU!