![InsideTheSquare - Squarespace Tutorials](/img/default-banner.jpg)
- 484
- 2 366 489
InsideTheSquare - Squarespace Tutorials
United States
Приєднався 10 сер 2017
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. 💖
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. 💖
Відео
How to Customize the "View Event" Button on Your Squarespace Event List with Cool Hover Effects!
Переглядів 247 годин тому
When you create an event collection in Squarespace, you’ll find the view event button is designed to match your primary button style. Using the editing features built into Squarespace, we can’t change it, but with a little custom CSS you can! In this tutorial, you’ll learn how to modify the style of that button with code. We’ll change the background color, text style, and even create a hover ef...
How to Change "View Event" Button Text on a Squarespace Event List Page
Переглядів 187 годин тому
The event collections in Squarespace are a great way to organize a scheduled of events, but the view event button is pretty boring. You can customize the style of it with code, but you can also change the text too! In this tutorial, you'll learn how to use custom CSS to change the view event button text into your own custom call to action. Be sure to watch the video before you get started with ...
Squarespace SEO Secrets with special guest Mariah Magazine
Переглядів 3194 дні тому
Join me for a chat with a special guest, Squarespace SEO whiz Mariah Magazine! We'll be diving deep into 2024's SEO landscape and how to optimize your Squarespace site for the latest trends like AI answers. Important Chapters: 02:38 Jump to the start of the video Here are links for info we talked about in this live session: 📺 SEO title & Description tutorial: ua-cam.com/video/Lo6bEtUVO08/v-deo....
Beginners Guide to Squarespace SEO: How to add SEO page titles & descriptions to Squarespace 7.1
Переглядів 1794 дні тому
In this Squarespace beginners tutorial, you'll learn how to edit SEO for all your Squarespace content, from standard pages and blog posts to events, courses, and even your online store! Get special tips and tricks for those trickier areas like courses, portfolios, and stores (spoiler alert: editing SEO for individual products is a little different!). By the end of this video, you'll be a Square...
How to create a visual sitemap for Squarespace & why you should / ThinkInsideTheSquare Episode 48
Переглядів 775 днів тому
📝Full Show Notes: insidethesquare.co/podcast/48 This episode of Think Inside the Square dives into the importance of website structure for Squarespace websites. You'll learn how to create a well-organized website structure that can improve user experience, boost SEO, and help you achieve your website goals. In this episode, you'll learn: 🔑 The five key questions to define your website structure...
Full Width Event Page: Squarespace Design Hack
Переглядів 1897 днів тому
If you have ever tried to edit an event page in Squarespace, you might have been disappointed with the lack of flexibility. The classic editor we use on event pages isn't as customizable as a standard page, but with a little custom CSS, we can get creative. This tutorial will show you how to create a full width event page in Squarespace 7.1 with custom CSS. The codes from the tutorial are below...
Beginner's Guide to Squarespace Event Collections (2024 Edition for Squarespace 7.1)
Переглядів 1817 днів тому
Squarespace has a type of collection page that can help you showcase events at specific dates and times on your website. Perfect for webinars, workshops, and more, each event in the event collection will have it's own page where you can add content blocks and share more with your site visitors. This video is an overview of this Squarespace feature and it will show you how to create an event col...
Squarespace Update Roundup: What’s New in 2024 // ThinkInsideTheSquare Episode 47
Переглядів 18912 днів тому
📝Full show notes: insidethesquare.co/podcast/47 6 months in to 2024 and Squarespace is on a roll! This episode of ThinkInsideTheSquare dives deep into the exciting new features and updates they've released in the first half of 2024, focusing on Squarespace 7.1 (the latest version). Get ready to discover: 🤖A Smarter AI Assistant: Learn how the upgraded Squarespace AI uses your brand information ...
Squarespace Gallery Section Hover Effects // Gallery Image Hover Effects
Переглядів 62214 днів тому
Squarespace offers a cool feature called "gallery sections" to showcase multiple pictures inside a section on your site, and thanks to some creative CSS, we can add unique hover effects to those images! In this tutorial you’ll learn how to add a hover effect using image filters. For a list of image filters, check out this article on my blog: insidethesquare.co/image-filters Important Info: This...
Beginner's Guide to Squarespace Gallery Sections
Переглядів 24814 днів тому
Squarespace offers a cool feature called "gallery sections" to showcase multiple pictures on your website. This is a great way to display your photos with short descriptions, like a vacation album or a visual portfolio. ⭐️Get the step by step training you need to confidently create your first Squarespace website at insidethesquare.co/start How Gallery Sections Work: This information is for Squa...
5 Pages That Belong In The Not Linked Section of Your Squarespace Site
Переглядів 21218 днів тому
In this episode of Think Inside the Square, you’ll learn about some essentials pages for your Squarespace site that belong in the "not linked" section and not your main navigation. From safeguarding your business with comprehensive Terms and Conditions and Privacy Policy pages to enhancing visitor experience through a custom 404 error page, we cover it all. These often-overlooked pages not only...
How to add a symbol between links in your Squarespace navigation
Переглядів 45421 день тому
In this tutorial, you'll learn how to add a symbol or character between the text links in your main navigation. You might be wondering why the heck you might need code - can’t you type the symbol into the navigation title?! You absolutely can, but if you want this link to be a different size, color, font family, or to be placed in the center of the links, you’ll need to use the CSS from this tu...
Add a drop-down folder to #squarespace in 30 seconds. Drag, drop, done 😎 #squarespacetutorial
Переглядів 17125 днів тому
My Six-Month Squarespace Website Maintenance Checklist // ThinkinsideTheSquare Episode 45
Переглядів 9826 днів тому
Is your Squarespace website feeling a little neglected? Don't worry, it happens to the best of us! But just like houseplants, websites need TLC to stay happy and healthy. In this episode of Think Inside the Square, Rebecca Harpain shares her simple, 6-month website maintenance checklist that ensures your website runs smoothly, looks polished, and delivers an amazing experience for visitors. Lea...
Vertical Video: Squarespace Video Collection Pages Hack
Переглядів 36728 днів тому
Squarespace video collection pages have some cool features, but they are not designed for vertical videos. In this tutorial, you'll learn how to use custom CSS to change the layout so your 9:16 ratio videos look great. Only need to change one video block, and not a collection? Check out this tutorial instead: insidethesquare.co/squarespace-tutorials/video-block-size For the full tutorial descri...
I spent quite some time researching before getting to this video which solved all my problems, quick and well explained. TYSM <3
Is this code still applicable for Version 7.1??
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?
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!
Hello! Becca! Help! where is the video you mention about different time zones!?! How can I modify it?! Thanks!
Here is a link to that tutorial for you: insidethesquare.co/squarespace-tutorials/event-time-zone
@@InsideTheSquare Thank you!! 🥰
I can’t get my ‘read more’ to open up to the rest of the blog it just returns to the same page.
If that feature isn't working the way it is supposed to, you need to contact Squarespace support: support.squarespace.com
are the read more link feature in summary blocks removed? cuz I can't find in here. hope you can help me, thanks.
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!
Great webinar! Thanks for sharing it
You're welcome - glad you enjoyed it! :)
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!
What if I wanted to make the square frames into a circle?
Great question! You can add a border-radius of 50% to any square sized image as long as you're using the correct selector.
Now...how to change the font colour for events-can we not format them in terms of colour, size, bolded, etc??
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.
Thank you for just getting to the point. It really helps folks who just want to get things done. Great teaching.
You are so welcome - glad you like my style 😎
Becca, I am a DIY site designer revising my first attempt. You are so great! You seem to know exactly what I need to know. Thank you again!
You are so welcome - happy to help, and welcome to the Squarespace community! 🙌
How sweet! Lots of work, fingers crossed. You make it seem so easy!
Thanks so much for having me & for diving into the world of SEO with me. This was such a blast!! 🥳
So good! Thanks for sharing your SEO passion. So crazy how many small businesses have not set up their Google search console.
Agreed! I'm so glad that Mariah was here to share the actionable advice that we all need to take.
Becca you are reading my mind again! You seem to put up a video that I badly need before I even know I need it! Thank you so much!❤
You are so welcome! Be sure to check out the live chat with @MariahMagazine - we cover some great tips for beginners: ua-cam.com/users/live1xoHiykUGeA?feature=share
So cool!🎉
Im looking to turn my shopping into a quote request form any help
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
@@InsideTheSquarethank you
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...
Yup - it's for the only option that has the automatic scroll animation...
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.
Nope - unfortunately you can't overwrite site-wide animation for an individual element.
@@InsideTheSquare Thanks for the quick reply! So does that mean this effect will only work if there is no site wide animation?
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 }
Can you add a different nav on a different page?
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
Great job!
Thanks! :)
youre really a life saver! thank you! you deserve so much happiness for your hard work!
Thank you so much! :)
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 a great question - I have a separate tutorial that can help: insidethesquare.co/squarespace-tutorials/gallery-section-mobile-size
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?
Did you figure this out?
Ooh thats cool🤔
Thanks - glad you enjoyed this tutorial! :)
How do you add a different navigation header for a different group of pages?
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
This is great, thanks. Do you know if swapping the image is possible? Happy to hire if available.
This tutorial can help: insidethesquare.co/squarespace-tutorials/second-image-on-hover
@@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!
DOES THIS WORK FOR WIX TOO?
I have no idea - I don't use wix, but I don't think you can add custom code to a wix site 😬
THANKS.... IT GIVES ME SOMETHING TO WORK WITH.
Happy to help! :)
Thank you for explaining this!! So appreciate that you took the time to make it simple.
You are so welcome! Glad you like my style :)
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 }
@@InsideTheSquare Thanks very much for that, you're a darling. I tried it myself, but it wasn't coming off.
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% } }
Mine keeps defaulting to the left. I want it on the right! Any tips? Thanks heaps :)
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
is there a code to change the aspect ratio for the thumbnails in the summary blocks across all blog posts? I'd like to set mine to three-four
wow invoice for the personal plan could be a game changer for people just starting out in there business
the 2nd half of this video is really interesting they really put a separate feature for blogs and videos, this is really interesting to check out
SO SOOOO GOOD! Thank you
You are so welcome - glad you liked this tutorial! :)
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
Hello, thank you for this video. I keep on trying to change the button text because the French translation of checkout is the word PAIEMENT meaning PAYMENT. This leads to a lot of customers not finalising their purchase. Can this word be changed by CSS? If yes, what would be the code? Looking forward to hearing from you. Thank you
This is a great question! I would recommend reaching out to Squarespace support about this; I think a better translation for everyone is a good idea. In the meantime, I’ll make if we can change that text with some custom code; stay tuned.
These videos are so useful! Really helping me get the grasp of CSS for my works website. However, some of these things don't work when there are site wide animations on (we have the fade on and we aren't allowed to turn them off) is there any way around this?
So kind :) Thank you!
You are so welcome! 🤗
Firstly - oh my goodness I'm so glad I've found you! Thank you for making coding easy to follow and understand! I'm playing with my audio player design and can't work out what the right code is to change the color of the download button. Do you have it?
You are so welcome - I'm glad my content is helping you with your site! I think that link responds to this selector class: .sqs-widgets-audio-player a
Hi there! Is this code tutorial up to date? I am not seeing the accordian item, accordian item title, and accordian item description at the bottom of the accordian in my site. Therefor I cannot copy an paste them on 1:16 of your video. I tried putting in the code .accordion-item* {color: black} but nothing is happening.
The is up to date. Make sure you are using an accordion block - here is an official article from Squarespace about this feature: support.squarespace.com/hc/en-us/articles/4411581892749-Accordion-blocks
So helpful thank you!
You're so welcome - happy to help! :)
Is there a way to make it 2 or more rows (wrap around)?
This is a great question - and yes! Here is a tutorial that will show you how to create a multi column dropdown menu in Squarespace: insidethesquare.co/squarespace-tutorials/column-dropdown
@@InsideTheSquare I think I worded my question wrong. I made the full-width drop down from this video, so my dropdown is running the length of the screen, but there's not enough room on a single line to see all of the pages I have in the dropdown. Is there a way to continue the pages on the next line?
Thank you!
You're welcome! :)