How to build a long-scrolling Landing Page using Squarespace 7.1 (with smooth scroll)
Вставка
- Опубліковано 2 лип 2024
- Kicking off the first out a bunch of new Landing Page content is this tutorial on how to create a long-scrolling Landing Page, for any business, using Squarespace. I start from scratch with a blank page, go through adding page sections, content creation and setting a fixed header navigation that smooth scrolls to page sections.
For lesson context I've put together a website for a New Orleans dog-walking side hustle by (an ambitious but fictitious) Sarah Young.
Code snippets not allowed in the UA-cam description but can be found here:
onepagelove.com/squarespace-l...
Tutorial Index ###
00:00 Intro
00:28 Start with a blank page
00:59 Add page sections
06:46 Fix the header position
07:25 Add header navigation links
08:43 Add page section anchor links
09:51 Add smooth scroll (bonus tip!)
Tutorial: How to create a unique Landing Page design using Fluid Engine
• Squarespace Fluid Engi...
Tutorial: How to setup Squarespace Member Areas & monetize your content
• Squarespace Member Are...
10% Off Coupon: OPL10 ###
onepagelove.com/opl10
Squarespace has been kind enough to give viewers the exclusive coupon OPL10 for 10% Off your first website or domain purchase. There is a free 14-day trial with no credit card needed, so you can try risk free.
Hey! I'm Rob Hope ##
Website: robhope.com
Twitter: / robhope
Heard of Squarespace Member Areas? I've just published a brand new 2021 tutorial on how to setup it up: ua-cam.com/video/A9xmjXt25RE/v-deo.html - it's a great way to help monetize your website content 🙏
You are a great example of a UA-camr who can explain things clearly and in a straight to the point kind of way without adding fluff. This video was extremely helpful and I've almost finished my website in about a day. Thank you so much for this and keep up the great work!
Really appreciate this Bilal - they take time but really proud of it:) I'm also trying to create the videos I'd want to watch.
OMG I can just give you a huge hug right now! This was super easy to follow and answers EXACTLY what I needed!!!!!!!!!!!!
So glad you enjoyed Mieya - and thanks for the comment, the edits are quite intense so means a lot to hear it! 🙏
Honestly best SquareSpace tutorial I've ever seen. 🙌🏾
Thanks so much - appreciate you commenting, they take long but stoked on this one!
Great video mate thanks very much for your help
Glad you found it helpful, thanks for the comment!
The best, most clear and concise tutorial out there. Thank you!!
Thank you Ricky - appreciate that!
Wow the 7.1 changes are really smooth, I really like how the image widget allows you to get those difficult layouts done so easily
It really is Marc! It's quite difficult to build a bad looking site with their platform. And in 7.1 they've actually simplified the design-setting side of things with a curated range of color schemes.
What a life-savior of a video!!! Thank you!!!
Glad you enjoyed it Lucie! Thanks for the comment:)
When the part time dog walker’s page looks better than any business page 😂
ha! Great comment, thank you Ashley:)
THIS WAS SO HELPFUL! Thank you so much, you're a great teacher, but most importantly, very to-the-point. Thank you thank you!
Thanks for the kind comment Maegan - appreciate it! :)
That was great, Rob!
Squarespace has a darn beautiful interface. Admirable.
Glad you enjoyed the walkthrough Geffrey! There is no question it's the right (website builder) choice if you want a great looking website without having to dabble on fine-tuning etc.
Great explanation.
Thank you - appreciate the comment! :)
Thank you so much for that great easy tutorial. It is so helpful!
Thanks so much Tascha - comments like these make the hours to make them worth it! :)
Just applied this so useful thank you!
Glad it was useful AJ - all the best! 🙏
Great video, thank you :)
Glad you enjoyed it Torjan! :)
Your tutorial index really slaps (that's good)! Thanks for the code snippets, too. Searching SqS's Forum for quick answers is no fun.
Thanks for the kind words Suzanne! I'm considering getting involved in the forums there but might just stick to the videos:)
Clear and precise. Thanks!
Thanks for watching - really happy with this one vs the 2017 tutorial. It involves a considerable amount of extra work but worth it as it saves the viewers maybe 10-15 mins :)
@@RobHope The effort paid off!
This is the best long-scroll and anchor links video I've ever seen for Squarespace. Finally makes sense to me. Thank you!
This comment makes me so happy Hannah - glad it was helpful! Thank you:)
Thanks Rob!! This was very helpful!! It'd be helpful if you could cover SEO when it comes to long scrolling pages. Thanks again for this terrific boost!
Thanks for the kind words Marlise - I am working on One Page vs SEO content at the mo, but might not be a UA-cam video.
@Rob this is fantastic - thank you ! One thing I'm struggling with is the URL slug appearing as, for example : "/#Products". Is there a work around to this to eliminate the # in the URL slug?
Hi John - glad you enjoyed the tutorial! Unfortunately, and as far as I know, the hashtag is what creates the magic smooth scroll to sections in the Landing Page.
Great video. My mailing list subscribers will love this. Cool if I share the video link to send people your way?
I'd really appreciate that Forest Park team. Thank you:)
Thanks for the fantastic video, Rob!! This has been incredibly helpful to me setting up my new landing page for my business as I am super new to web design. Any idea why the smooth scroll code isn't working for me?
Hi Walker - glad you enjoyed the video! Check out this follow up video I did diving a bit deeper: ua-cam.com/video/JXBj_4ubmW4/v-deo.html - here is related article with code snippets etc: onepagelove.com/squarespace-smooth-scroll
Great video! I have one question. If I'm on a separate page and want the header buttons to take me back to the landing page and scroll to the right section, how do I do that?
Thanks for the great tutorial. I have added a portfolio page with subpages. Unfortunately, when I am now on the subpage, I can't click back through the main navigation. I can only click back to the main navigation via my logo. Do you have any idea why this is happening? The navigation is then simply not clickable, although it is visible.
Is there a setting or certain subscription I have to have in order to get the teardrop icon so I can add different types on content?
This is super helpful and easy to follow, thank you! I was wondering if there's a way to do it without changing the URL at the top? I noticed it adds a hashtag at the end of the domain as if it were a new page, but I wanted to see if you know of a way to keep it the same regardless of your clicks? Thank you in advance!
Hi Sheri - as far as I know this is the only way to achieve it with clean code. I think the alternative is JavaScript code, which I wouldn't recommend for Squarespace sites.
Hi thanks for the video but I'm surprised nobody else is running up against this problem: I have a single anchor link. If I click on that it scrolls to the section perfectly. But then if I scroll away and want to go back to it I can't because the url is still set to that anchor. How do I clear that so that my users can scroll to the section every time they click?
Hi Camilla - yes I've had this happen too. But can't really replicate it every time. Is it consistent for you? A little tip is make sure there is not a full URL in the link (so just the #section) and also I've seen users add the Landing Page URL eg. /competition/#contact
@@RobHope i have the same problem. any fix to this? thanks
Thanks for the awesome tutorial. One of my sections is a gallery where each image links to an individual video page. Once I'm on one of those video pages, my header links no longer work. Is there a way to get the header links to work even if I'm no longer on the long scrolling homepage?
Glad you enjoyed the tutorial Colin! The workaround here is to hardcode in the full page URL within the navigation. eg. yourdomain.com#section-name and not just #section-name
Hi Rob, thank you so much for this helpful video. I was wondering why im not successful with linking the buttons, i set my points and #link but seem that its not going though. Thank you in advance.
Hey Yev! Check out this dedicated video: ua-cam.com/video/JXBj_4ubmW4/v-deo.html + article (with code snippet examples) I published with 2 methods: onepagelove.com/squarespace-smooth-scroll - let me know if that helps!
Thank you so much Rob @@RobHope
Wow! Great video! Many of the templates have both scrolling sections and linked pages. I haven’t been able to find out why one would use one over the other. I love your simple design with anchors. Is this a best practice for small customer sites? Thanks for this very helpful video!
Found your one page website video. It answered my question. Thank you!
@@shaunaoc Glad you found it Shaun - and thanks for the kind words:)
Hi Rob, this is really helpful, thanks. Is there a way to do this for pages that aren't the homepage, and therefore have drop down links from a title on the main menu that corresponds to the points on a separate page? (e.g About page). Thanks so much.
So I actually worked out how to do this. For anyone interested. Create a folder, make the first page in the folder the main, scrolling page you want to be linked to in your header. Then follow Rob's steps to create links to your scrolling page but put the links in the folder, underneath your main page. For example, I have an About page with subsets 'About us', 'Team' and 'Blog' (all on one long scroll page). I created a folder and named it About (About now appears on my home page link). I put the single page in the folder and named it About us. I then created #team and #blog links and put them in the folder underneath About us. Sorted!
@@jessv93 You nailed it Jess - thanks for sharing your findings with the community, it will definitely help someone else!
This was so helpful! I added the anchor links and the smooth scrolling works, however, when I click on a section in the main nav, it scrolls to the middle of each section, instead of at the top of that section. What am I doing wrong? Thank you!!
Hi Alison - glad it was helpful! Check out this follow up video I did on adding anchor positions ABOVE the sections to solve this: ua-cam.com/video/JXBj_4ubmW4/v-deo.html - here is related article with code snippets etc: onepagelove.com/squarespace-smooth-scroll
Thanks for this helpful tutorial!
The only downside is the blank space that is created with the code block for some reason, do you know of a way to input the name code into a section without taking up physical space?
Ah, I figured out a partial solution. The CSS code:
.sqs-block.code-block.sqs-block-code {
padding: 0;
}
can be used to remove the padding. It still takes up a single line which is still not ideal, if anyone knows how to get rid of this completely without having to change the other elements of the page to manual code. But much better now.
@@iamjonchau Hi Jon - just want to say thanks for this little CSS hack. FYI I dropped a new vid on how to create a landing page (with smooth scroll) using the new Squarespace Fluid Engine: ua-cam.com/video/GjZ6PMhQD8U/v-deo.html
Thanks for the tutorial! It seems that when I add the scrolling behavior code in the css, there is some issues with Squarespace. The scrolling is achieved but when I publish my site the whole css file is not being applied. Do you know how I can solve this?
Hi Eirini - so the smooth scroll works when you are editing your website, but final publish and sharing does not work?
works fine on desktop... but on mobile it wants to keep scrolling to that section automatically. i have seen others commenting with same issue but none of the recommendations fix this. does anyone have the solution?
Hi! Do you know how you can add a blog page and be able to click from any of the rolling scroll sections back and forth to the blog page? so If I'm on the blog page and go to select contact nothing happens.
Hi Tara - if I'm understanding correctly you would either need to link to the full URL in the main navigation so: tara.com/#contact and tara.com/#bio and tara.com/blog and not: #contact #bio and /blog - if that does not work, then you would need to create manual text links on either the Landing Page or the Blog section (while hiding/removing the main navigation that remains on the other)
Hi , this was super helpful and cool but the smooth scolling css is not working for me.. any help? Thanks
Hi Marc - stoked it was helpful! Check out this follow up video I did specially on the smooth scroll: ua-cam.com/video/JXBj_4ubmW4/v-deo.html - here is related article with code snippets etc: onepagelove.com/squarespace-smooth-scroll
did you ever get it to work Marc? Cause it's not working for me either
Very helpful! I'm just starting with 7.1 and couldn't believe that anchor links were no longer an option. As for needing custom CSS for smooth scrolling, WTF! Everyone is going to want this, so why not just add a button?
Glad you enjoyed the tutorial Edac
Hi is there a way to add back the underline that lets you know what page you're on?
Hi Sophie - unfortunately I don't know how to do this but Squarespace support should point you in the right direction (I don't work for them), so hit them up here: support.squarespace.com/hc/requests/new#choose-topic - they usually reply pretty fast
Hey Rob, I did this which worked well, but the sections with the custom css above it are underlined. Is there a fix for this? Thanks!
Hi Callan - it sounds like there is a bit of code not closed off. Do you mind sending me a screenshot of your code to: rob@onepagelove.com - thanks!
possible to make it smooth on mobile?
Hi Rob. I was really enthusiastic - but it's not working at all in my page..
When I go into the header I cannot edit the menu-links. Do you have any idea about the reason for this?
Hi Silke - are you getting an error when editing links or just cannot edit the header at all? (this is definitely a question for Squarespace support, I'm only reviewing the functionality and not really best for tech level stuff)
After following this tutorial I have an issue on the mobile version where the links are unresponsive. Whats the best way to combat that?
Hi Zack - I've just double checked my mobile version and seems to still smooth scroll. Are you saying the links doesn't scroll at all? Do you by any chance have a link to the site online?
Hey Zack - just following up here - how did you go?
Smooth scroll (step 6) won't work. Everything else seems to work fine. What could be the issue?
Hi Driss - I just published a dedicated 7.1 Smooth Scroll video: ua-cam.com/video/JXBj_4ubmW4/v-deo.html - can you let me know fi this solved your issue?
A quick follow up here Driss - are you winning?
Not exactly sure what you mean by winning😂 i shall have a look at your video dedicated to smooth scroll but in the meantime the cool animations provided by squarespace are just as useful 👌 cheers
When is Yo! Season 2 ?👀
Yo Rik! So Yo! has pivoted into the Yo! newsletter + Yo! podcast: robhope.com/yo - I've been interviewing such talented designers, devs and makers. Have you been following at all? People are definitely digging it.
S2 on UA-cam is not totally binned though (I also have a bunch of new sections/ideas I already spent time on) but would only green-light if this UA-cam channel grew a lot more via other videos. That, and if the Podcast grew (which it is!).
smooth scroll code is not working for me, I don't know why, there are some other links that they use this code also but not working for me!
Hi Amir - this tutorial (on my other channels) shares 2 methods to achieve Smooth Scroll. Can you give it a go? ua-cam.com/video/JXBj_4ubmW4/v-deo.html
@@RobHope Thanks Rob, I guess it was a misunderstanding, I was trying to make a smooth scroll like this website www.providerstore.com.au/ , I mean doing scroll smoothly, not jump between sections
I could not find add sections
Hi Fasih - Do you know what version of Squarespace you have? Are you on 7.1? In this video I share how to identify which version you are on... ua-cam.com/video/JXBj_4ubmW4/v-deo.html (timestamped)
@@RobHope thank you