Learn how to create & customize your Squarespace website with help from InsideTheSquare!
Subscribe to be notified of a new Squarespace tutorial every week. I pledge to keep the tutorials simple, short, and helpful, every time. 🤗
FREE training: How to customize Squarespace with code → insidethesquare.co/learn
A little more info about me, Becca Harpain, self-taught CSS super-nerd and the Squarespace 7.1 expert behind InsideTheSquare.co: ☕ I drink copious amounts of coffee 🥜 I live off peanut butter 😂 I love puns - the cheesier the better ⛰️ I enjoy hiking, camping, and the great outdoors *almost* as much as code 🤓
The term "Squarespace" is a trademark of Squarespace, Inc. 💖
When Squarespace released 7.1 four years ago, they decided to focus on adding new features to the latest version and not making major feature updates to the older version of Squarespace. For support with 7.0 features, you can contact Squarespace directly via support.squarespace.com
Squarespace moved CSS to website > website tools > custom CSS. The codes & concept from this tutorial still work; I'm still in the process of updating all my old videos 😅
Hi Becca, Thanks for sharing! I was wondering what the best approach would be to add a link to the hover text box when selected to take you to another page. Any tips?
This is a great question! You can add a link to the text, but it wont apply to the whole block, so the text has to be clicked for it to work. If you want the entire space to be a clickable area, use a button set to fill (not fit) and place that over the area. Apply the opacity to that button so it will be fully visible and clickable on a hover. Hope that concept helps and best of luck with your project! :)
Thanks for the amazing tutorial! Just wondering, how did you initally add the inline image block? Is there a specific built-in template or is that another coding process as well?
This is a great question! Inline blocks were older versions of images that got replaced when Fluid Engine in July 2022. You'll still find them inside classic editor, like blog posts, individual events, and additional product details.
Help! Great tutorial but Im not able to get the new navigation titles (FAQ and More Info in my case) to link to the corresponding coded sections in the page. I had ONE moment when FAQ linked to its page section. I went about doing the exact same anchor link code for More Info and now, after MANY tries and variations, I cant get either title to link. Obviously Im doing something wrong? As an example, the FAQ is #faq with the corresponding code being <div id="faq"></div> Does that make sense? Any help MUCH appreciated!
The link in your browser becomes domain.comexample/page#anchor so you'll need to refresh that address to have it work multiple times in a row, or link to the whole thing (domain.comexample/page#anchor) instead of just the anchor (#anchor) Hope that info helps and best of luck with your project!
Hi Becca. I'm trying to add text on my home page that looks like script so to portray to my customer that it's my signature. How do I do this? The font options for paragraph text change all text whereas I want to change text for 2 specific text blocks. TIA.
Worked! Thank you! However, I now have a hover bold text effect on home page. So i need to tell it when it goes to "home" or landing page to not have anything bolded. Is there code to just add to this for that to happen.
Thanks Becca, one problem tho - it seems that some sections won't let me scroll all the way to the end of them before it moves on to the next one. any help?
Sounds like your sections are larger than the screen height. You can reduce the content or the size of the font/content blocks inside, or target a specific section using its data section id and set up a negative top margin for a specific section to accommodate. Hope that info helps and best of luck with your project!
This is so incredibly super helpful. We make Squarespace sites for clients and all this SEO insight and direction makes brilliant sense, especially now more than ever. Thank you soooo much!
That feature will only show up if you are linking to a blog from a summary block; other collection pages don't have the read more option. Hope that info helps and best of luck with your project!
Thank you so much for how informative your videos are! Do you know if there’s a way to code in more than 3 add-ons? Or to have add-ons that have variants? For example, if I am selling a sticker/decal but I want to give people the option to choose to put the print on any item or order the decal by itself. Can I give them the option to add-on either a mug, tumbler, t-shirt, or sweatshirt? Without running into the Squarespace barrier of “no add-ons with variants”?
That's a great question! The codes I work with are primarily CSS, so they change the style of a site but not the way it works. For your needs, I would recommend posting in the Squarespace forum to see if anyone has created a javascript solution. Best of luck with your project!
Great question! Titles don't respond the way a text block does, so formatting things like a single bold word isn't possible. But if you look at how I show you edit the event excerpt at the 8:45 minute mark in the video, you'll see the formating text options we have for the excerpt.
You are so welcome! Be sure to check out the live chat with @MariahMagazine - we cover some great tips for beginners: ru-vid.com1xoHiykUGeA?feature=share
Interesting question! If you need people to place an order to make a deposit, you can use a custom form on a product page, but if you only need people to contact you, I would recommend using a different collection page like a blog post with tags and categories so you can sort the items but create a custom font on the page itself. Someone in the Squarespace forum might have a better idea; check that out here: forum.squarespace.com
Seems to be limited. Is there any way to make this code work for Gallery Type > Slideshow: Reel? This code seems to only work for select Gallery options...
Hi InsideTheSquare - love your videos! I'm trying to do this but for some reason the codes aren't presenting on my website - is the shortened versions of Heading still H1, H2 etc?
Yup! Nothing about that base code for a text block has changed. I have some tips at insidethesquare.co/code-help but you can also email me a link for some support anytime: support-at-insidethesquare.co To help, i'll need to see your site, so if it isn't live, please password protect it under Settings > Site Availability > Password Protected
Is there a way for this code to work without having to remove the site's animation settings? I'm finding it won't work unless theres no animation across the site.
Soooo simple compare to all the other tutorials I had found!! Thanks! Would it be possible to not have a burger but a word instead ("menu")? Thanks for your help! Much appreciated
This is a great question! I don't have a tutorial for this yet, but I do have a code that you can use. I added a border, and the code for "close" text, too, and changed the color of both: .burger-inner{ display:none } .burger-box:before{ content:"MENU"; border: 1px solid #000; padding: .25rem } .burger--active .burger-box:before{ content:"CLOSE"; color:red; border-color:red }
Uh, kinda! You can always toggle off the nav and create your own using a page section. Check out this tutorial for more info: insidethesquare.co/squarespace-tutorials/advanced-landing-page
Becca, that is another superb and extremely helpful tutorial, thank you so much. I'm using 7.0, and this video pretty much convinced me to do the upgrade. ❤️👍
I'm so glad! Making the move is a big decision, but I truly think the 7.1 innovations are worth it. If you need any help with your migration, my inbox is always open: support-at-insidethesquare.co
This was super helpful - thank you so much. It'd be great to get some guidance on the mobile layout if possible? I have a logo slideshow that either looks great on desktop, but minuscule and illegible on mobile, or great on mobile, but large and oversized on desktop. So grateful for your support 🙏🏻
This is super cool! Thank you!!! Unfortunately my text is too long and on phone view it disappears into the right edge. :( Any way to repair that? Do you know how to make tagline that would run above navigation on it's separate colour block?
This is a great question! You can add this css to your code to make it wrap: (text-wrap: wrap) like this: .header-title:after { white-space: pre; content: "\A Longer Text Based Tagline Goes Here " !important; text-wrap: wrap }
This is a great question! It's tricky for a group of pages; you can always create a landing page with its own nav and duplicate it. Check out this tutorial for more info: insidethesquare.co/squarespace-tutorials/advanced-landing-page
@@InsideTheSquare Wow, thank you. Do you happen to know if this is possible on Gallery Grid Sections? ...I found nth child code that works for it but interferes with my filter (category) code -ha always tradeoffs I guess. Thx again, much appreciated!
Great tutorial, though there's one thing I'm wondering. Is there any way to manipulate the size of paragraph text? In my case, it's to make the first paragraph of text p1.
Totally! You can adjust the font size of that specific text type by using it's selector class. In the tutorial, we used an H1, but you can replace that with the letter p for paragraph text, like this: .markdown-block p{ font-size:2rem }
Awesome Tutorial! Question! Is it possible to have the menu be half screen on desktop but full screen on mobile? Agreed that taking over the full screen is too much for desktop, but mobile is now almost illegible. Is there a work around? Im on the newest version of Squarespace!
That's a great question! Even though this video is a little old, the codes are for the latest version (7.1) so they will work for you. :) The second code from this blog post has the 50% option (insidethesquare.co/squarespace-tutorials/mobile-menu-desktop) but we can modify it for any screen larger than 950px with a code like this: @media only screen and (min-width: 950px){ .header--menu-open .header-menu { width: 50%!important; } } To scoot it to the right hand side of the screen, modify the code like this: @media only screen and (min-width: 950px){ .header--menu-open .header-menu { width: 50%!important; margin-left:50% } }
Great question! Left is the default, but you can add a margin-left value to counter it, like this: width: 50%; margin-left:50% or this: width: 30%; margin-left:70%
@@InsideTheSquare Thank you so much for coming back to me! I was referring to the hamburger icon itself. I can't seem to get it to the right. Even if I change the nav layout. Hmmmm
I am having an issue with this.. I type in the custom css and the look changes. I hit save, exit the page, reload the cart to check my edits. While some of my changes remain, the most important one, the color changes, don't seem to be carrying over on my desktop or mobile device whether logged in or not... I figure it is breaking my template but I'm not sure why. This is annoying cuz the current background color is hiding the checkout button. Any help would be much appreciated
That sounds frustrating! I need to see your source code to see what is overwriting your custom CSS. Send me a link and I'll take a look: support-at-insidethesquare.co
