One Page Love
One Page Love
  • 8
  • 189 303
Smooth Scroll with Squarespace 7.1 (two easy methods)
(New Fluid Engine smooth scroll tutorial here: ua-cam.com/video/GjZ6PMhQD8U/v-deo.html) In this new tutorial I show you exactly how to achieve smooth scroll using the new Squarespace 7.1 platform. There are essentially two methods - both not requiring any coding experience. 👇Code snippets are linked below.
Smooth scroll is such a popular feature within the One Page website niche as it creates a more pleasurable reading experience. A visitor arrives, they click a link and it transports them, gracefully, to the information they are after within the same webpage.
### Code Snippets ###
onepagelove.com/squarespace-smooth-scroll
### Squarespace 7.0 Smooth Scroll Tutorial ###
ua-cam.com/video/JfH9y0Yunw0/v-deo.html
## Tutorial: How to create a unique Landing Page design using Fluid Engine
ua-cam.com/video/GjZ6PMhQD8U/v-deo.html
## Tutorial: How to setup Squarespace Member Areas & monetize your content
ua-cam.com/video/A9xmjXt25RE/v-deo.html
### 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
Переглядів: 19 003

Відео

Squarespace Email Campaigns - 2021 Review and Tutorial
Переглядів 8 тис.4 роки тому
In this tutorial I show you exactly how to choose a layout, customize the content and send your first campaign using Squarespace Email Campaigns. Chapter breakdown and discount coupon below 👇 Article Version For the step-by-step written guide with screenshots:: onepagelove.com/squarespace-email-campaigns New 2021 Squarespace Member Areas Tutorial ua-cam.com/video/A9xmjXt25RE/v-deo.html 10% Off ...
How to get started with Squarespace (5 mins from signup to live website)
Переглядів 7394 роки тому
In this tutorial I walk you though the sign up process, template selection, basic editing and then publishing your first awesome Squarespace website. Here are the links to additional resources post-launch: onepagelove.com/getting-started-with-squarespace (bottom of article) Tutorial: How to create a unique Landing Page design using Fluid Engine ua-cam.com/video/GjZ6PMhQD8U/v-deo.html Tutorial: ...
How to achieve Parallax Scrolling in Squarespace 7.0 websites
Переглядів 23 тис.4 роки тому
In this tutorial I show you how easy it is to integrate Parallax Scrolling in your Squarespace 7.0 Landing Page and impress your website visitors. Please note: Squarespace v7.1 templates do NOT support Parallax Scrolling: support.squarespace.com/hc/en-us/articles/205815488-Parallax-scrolling - here is the list of Squarespace v7.0 Brine family templates: onepagelove.com/squarespace-parallax-scro...
The Top 5 Squarespace Photography Templates
Переглядів 21 тис.6 років тому
With online portfolios still being as important as ever to get work, I've handpicked 5 Squarespace templates that do justice to great photography. Full article with demo links and screenshots: onepagelove.com/photography-portfolio-with-squarespace 10% Off Coupon: OPL10 Squarespace has been kind enough to give One Page Love readers the exclusive coupon OPL10 for 10% Off your first website or dom...
How to Smooth Scroll to Landing Page sections using Squarespace 7.0
Переглядів 38 тис.6 років тому
(Using Squarespace 7.1? Find the new tutorial here: ua-cam.com/video/GjZ6PMhQD8U/v-deo.html) In this video I’m going to show you how to get that sweet Smooth Scroll action in a Landing Page using Squarespace. This means when a visitor arrives, they click a button or navigation link and it takes them, gracefully, to the information they are after in the long-scrolling page. It’s a common questio...
Nike Better World (2011) - One Page Website Award
Переглядів 7 тис.6 років тому
One Page Website for the iconic 2011 Nike Better World campaign. What makes it iconic is this was the first mainstream use of the Parallax Scrolling effect in a Landing Page. The website is no longer online but preserved in this video. onepagelove.com/nike-better-world Review by Rob Hope robhope.com robhope
How to create a long-scrolling Landing Page using Squarespace 7.0
Переглядів 72 тис.7 років тому
(Update! Find my brand new Fluid Engine long-scrolling Landing Page tutorial here: ua-cam.com/video/GjZ6PMhQD8U/v-deo.html - includes Smooth Scroll header navigation with code) In this video I cover exactly how to make a long-scrolling Landing Page for any business using Squarespace 7.0. I go through adding page sections, content creation and fine tuning styles. Chapter breakdown and discount c...

КОМЕНТАРІ

  • @user-xb5lj7vy3j
    @user-xb5lj7vy3j 5 місяців тому

    Thank you this works but it only seems to work once, so if you scroll back up and hit the button again nothing happens... any ideas?

  • @user-zf8xo2nn3f
    @user-zf8xo2nn3f 6 місяців тому

    Much kudos bro! Haven't found a tutorial like this.

    • @RobHope
      @RobHope 6 місяців тому

      So glad you enjoyed it Oluwaseyi!

  • @P4NDA_WRLD
    @P4NDA_WRLD 9 місяців тому

    cool video really helped my dad

    • @RobHope
      @RobHope 9 місяців тому

      Glad it was helpful! :)

  • @Maffue_
    @Maffue_ Рік тому

    Really helpful tutorial, thank you! Is it possible to smooth scroll back to the top of the page? If I put in the codeblock anchor in my first section, it doesn't seem to bring me all the way back to the top.

  • @liviazambolim4724
    @liviazambolim4724 Рік тому

    Thank you for this!

    • @RobHope
      @RobHope Рік тому

      So glad you found this useful Lívia - thanks for the comment:)

  • @martinacosta986
    @martinacosta986 Рік тому

    I tried method a but it only works once... If I go back to the button and click on it again it doesn't do anything. Anybody with the same problem?

  • @CatherineAEllis
    @CatherineAEllis Рік тому

    I'm trying to make the first option work, but the teardrop cursor doesn't show up for me at all. Any advice?

    • @CatherineAEllis
      @CatherineAEllis Рік тому

      The second doesn't work when searching by the code either.

  • @SeptemRoptem
    @SeptemRoptem 2 роки тому

    This is the best tutorial on the matter. Easy to follow, no problem. Worked fine with the first method, trying method B soon. Thank you!

    • @RobHope
      @RobHope 2 роки тому

      Really glad you enjoyed it Andrei - thanks for commenting! :)

  • @gabagoolpictures
    @gabagoolpictures 2 роки тому

    wexley FTW

  • @LexLeung
    @LexLeung 2 роки тому

    Thanks for this -- however the smooth scroll doesn't work for me either! Tried both methods.

  • @wiseoblivion3291
    @wiseoblivion3291 2 роки тому

    I'm not sure why but that tear drop to link is not showing up.... I have a business account.

  • @jakejakejakejakejakejake
    @jakejakejakejakejakejake 2 роки тому

    Dude, fucking nailed that tutorial! Thank you ✌️❤️ x

    • @RobHope
      @RobHope 2 роки тому

      Stoked you enjoyed it Jake - thanks for the comment! :)

  • @TheDevindahlgren
    @TheDevindahlgren 2 роки тому

    Smooth Scroll is working great as long as I'm using Chrome. It doesn't work in Safari, however. Are you aware of a solution for Smooth Scroll in Safari? Thanks!

  • @milk344
    @milk344 2 роки тому

    wait... you have to manually input each new subscriber onto your mailing list???

    • @dgainx8852
      @dgainx8852 2 роки тому

      He added one manually for demo. At the end of step 1 he created a newsletter sub that will automatically add them to that newly created mailing list

  • @willdidth3shot
    @willdidth3shot 3 роки тому

    I follow your steps but I can't make this smooth scroll....why?

  • @NiqueLynn
    @NiqueLynn 3 роки тому

    loved this tutorial. would you recccomend it over convertkit?

  • @mishaross3007
    @mishaross3007 3 роки тому

    Hi there! I've been trying to figure out how to have a page with smooth scroll and came across your 7.1 tutorial first and then saw this one. So helpful, thank you! Is there an easy way to know which templates allow for smooth scrolling? Also, I'm currently using 7.0; do you think it is worth changing over to 7.1?

  • @matthewtaylor8312
    @matthewtaylor8312 3 роки тому

    Question - first of all, this is great and works wonderfully in Chrome. Method B is what worked for me, but when it scrolls to the section it goes too far and cuts off the top of the section, about 150px or so too far (i'm in 7.1) - do you know how this might be able to be resolved so it doesn't go too far?

    • @matthewtaylor8312
      @matthewtaylor8312 3 роки тому

      Going to answer my own question here - this is CSS you can add to take care of the issue I mentioned above: :target:before { content:""; display:block; height:120px; /* fixed header height*/ margin:-120px 0 0; /* negative fixed header height */ }

  • @Moeller-eh2bu
    @Moeller-eh2bu 3 роки тому

    I tried linking contact button with contact formular, but my page just jumps to the formular even though i put in the smooth scroll code - anyone got a solution?

  • @scarface808
    @scarface808 3 роки тому

    Is there an easy way to add locomotive js or gsap into the templates? This looks like some default transition setting in squarespace, but it's not very smooth tbh. Is there an easy way to implement gsap animation or perhaps use those types of libraries in here to help with easing or time properties?

  • @michaldziekonski3162
    @michaldziekonski3162 3 роки тому

    Great content! Thank you!

    • @RobHope
      @RobHope 3 роки тому

      Thanks Michal! If you are using Squarespace 7.1 here is the latest tutorial using their new interface:) ua-cam.com/video/oqAl-8Py2pg/v-deo.html​

  • @TheArtbyartemis
    @TheArtbyartemis 3 роки тому

    everything works fine but the smooth scroll . when i put it is messing up all my page and nothing works after :(

    • @RobHope
      @RobHope 3 роки тому

      Hi Petter - I'm sorry you are having issues. Often when a page "breaks" or "disappears" this is due to an element within the code not being closed/completed. It's best to share the issue with Squarespace support (I don't work for them) who should help sort you out!

  • @IDMENTAL
    @IDMENTAL 3 роки тому

    WOOOW IMAGE slider! That is the future ! 21 century!

  • @jerkzilla3000
    @jerkzilla3000 3 роки тому

    Thank you so much for your video. This has worked perfectly for Google Chrome and unlike comments I've read, I don't have the "one time use issue". ONE ISSUE I DO HAVE though is that the smooth effect DOESN'T SEEM TO WORK IN SAFARI. It works perfectly in Google Chrome but, in Safari it just jumps like any other standard anchor link effect. Would really love if someone could give any tips on how to get the effect to work on both applications. Thank You!

    • @beewellbox9975
      @beewellbox9975 3 роки тому

      would also like to know why it doesn't work with safari

    • @michaels.cannjr.1578
      @michaels.cannjr.1578 3 роки тому

      Rob, this does not seem to work with Safari, which is important. Do you have a solution to this?

  • @OnlineBusinessGuy-NonsoEOkpala
    @OnlineBusinessGuy-NonsoEOkpala 3 роки тому

    WOW. This is awesome. Just curious, why should I use external sites such as Mailchimp over Squarespace for email campaign? Does Squarespace have any limitation that I should be aware of?

  • @chrissimorales41
    @chrissimorales41 3 роки тому

    Looking for clarification on squarespace's "campaigns per month" is a campaign referring to a singe email design? Does that mean you can only have (for example) 5 types of emails active at once? Does this include automated emails such as welcome emails, etc?

    • @FabioPoianMusic
      @FabioPoianMusic 3 роки тому

      I am wondering about the same thing as I really only have 2 newsletters with a couple of different mails each so I'm not sure if I should be getting Campaign Starter or Campaign More. Let me know if you have solved the issue

  • @nourishingrowth
    @nourishingrowth 3 роки тому

    Great video ! Thanks!

    • @RobHope
      @RobHope 3 роки тому

      Thanks for watching Sophie - glad you enjoyed it!

  • @aerialchains
    @aerialchains 3 роки тому

    Searching how to smooth scroll, your video was the winner because of your voice <3

    • @RobHope
      @RobHope 3 роки тому

      Thanks for the kind words Cicely - it's a good mic ;)

  • @AlisaDamaso
    @AlisaDamaso 3 роки тому

    What about the other nav links and not just the button link?

    • @RobHope
      @RobHope 3 роки тому

      Hi Alisa - check out the full tutorial here where I link the main nav: ua-cam.com/video/oqAl-8Py2pg/v-deo.html including shuffling them around:)

  • @LaShanaLatrice
    @LaShanaLatrice 3 роки тому

    I don't even get the external option 😞

    • @RobHope
      @RobHope 3 роки тому

      Hi La Shana - if you are using Squarespace 7.1 check out this video: ua-cam.com/video/JXBj_4ubmW4/v-deo.html

  • @TommyLellan
    @TommyLellan 3 роки тому

    There is no Main Overlay option...

    • @RobHope
      @RobHope 3 роки тому

      Hi Tommy - I can confirm Squarespace v7.1 templates do NOT support Parallax Scrolling: support.squarespace.com/hc/en-us/articles/205815488-Parallax-scrolling - I assume your are on 7.1 ?

    • @TommyLellan
      @TommyLellan 3 роки тому

      Rob Hope Yeah did some research after this - why would they do that when it’s so popular!? Why!? 😂

    • @RobHope
      @RobHope 3 роки тому

      @@TommyLellan I'm unsure too Tommy. Must involved a considerable about more admin/support - also a clearer separation from 7.0 to 8.0 (and not 7.1) probably would have create less confusion. 7.1 assumes it's "similar" IMHO.

  • @Miss_Toi
    @Miss_Toi 3 роки тому

    From the voice, to explanation of step by step tutorial, this is one of the best I’ve seen. Thank you.

    • @RobHope
      @RobHope 3 роки тому

      Thanks so much for this comment Unoma - it definitely takes time creating these, but these comments keep me motivated to create more! :)

  • @robertpoe7194
    @robertpoe7194 3 роки тому

    Thank you! What template are you using?

    • @RobHope
      @RobHope 3 роки тому

      Glad you enjoyed it Robert! I built the template from scratch using the default Squarespace template on 7.1, watch the full tutorial here: ua-cam.com/video/oqAl-8Py2pg/v-deo.html

  • @TM-bo4gk
    @TM-bo4gk 4 роки тому

    Thank you! Also works with <div id> anchors

    • @RobHope
      @RobHope 4 роки тому

      Thanks TM - yeah the second half of the vid talks about linking to section div IDs 🙏

    • @TM-bo4gk
      @TM-bo4gk 4 роки тому

      @@RobHope oh, I didn't watch that part. The first part worked well enough for me. What's the difference between anchor links and div id?

  • @tomrichards7267
    @tomrichards7267 4 роки тому

    Hey brother looks good! Only thing is the smooth-scroll isn't changing the way it scrolls - just skips down to the anchor for me. Any tips? Does that line only work for certain templates? (on 7.1)

    • @RobHope
      @RobHope 4 роки тому

      Hey Tom! Apologies I missed this comment 2 weeks ago. Are you saying after inserting the custom CSS for Smooth Scroll, it still doesn't "smoothly scroll" down?

    • @NealTenEyck
      @NealTenEyck 3 роки тому

      @@RobHope That is correct. It won't scroll smoothly for me either. I've tried both the hash tag version and page section id version, and just jumps to link.

    • @inoubli4ble
      @inoubli4ble 3 роки тому

      It depends a lot on your browser. Try google chrome maybe.

    • @adrianabeljo6716
      @adrianabeljo6716 3 роки тому

      @@NealTenEyck This is happening for me as well. Does not smooth scroll, only flicks to that part of the page

    • @NealTenEyck
      @NealTenEyck 3 роки тому

      @@adrianabeljo6716 I found another solution somewhere, think I even may have paid for it. Was months ago, so have moved on. Good luck.

  • @Zitrixa
    @Zitrixa 4 роки тому

    Hello there - I can't make it work. It does move to the section however there are no smooth scroll even though I added it in the CSS also - I can only use the link once? I need to refresh my page to use it again... Any fixes? I use the first solution with a code block. Thanks!

    • @RobHope
      @RobHope 4 роки тому

      Hi Sofie - are you winning with the code block? Regarding refreshing the page, make sure you are linking to the hashtag only and not a full URL eg. #contact and not: example.com/page/#contact - let me know - I'm quite interested to learn

    • @Zitrixa
      @Zitrixa 4 роки тому

      @@RobHope Hey Rob - I apologies the slow response. Summer break happened :). I still have the problem, even though I just use a '#' and no full url. I've tried with both a code block that has an ID but I also used the section Id's that you can find in the HTML code. I can make smooth scroll happening, but the link only works once until I refresh the page. I have this problem occur on all my subpages and also another website I am making. Have you any ideas how to fix it?

    • @liannabagtas6780
      @liannabagtas6780 3 роки тому

      I'm having the same problem and I followed the tutorial exactly (both with the smooth scroll and having the link only work once). If you have a solution I'd love to hear it!

    • @inoubli4ble
      @inoubli4ble 3 роки тому

      It depends a lot on your browser. Try google chrome.

  • @farynsand512
    @farynsand512 4 роки тому

    Might consider slowing a tutorial video WAYYYYYY down....great to share but more effective to do it slowly. Just a suggestion!

    • @OnePageLoveVideos
      @OnePageLoveVideos 4 роки тому

      Thanks for the tip Faryn - appreciate it and will try!

  • @OnePageLoveVideos
    @OnePageLoveVideos 4 роки тому

    Update! Find my brand new Fluid Engine long-scrolling Landing Page tutorial here: ua-cam.com/video/GjZ6PMhQD8U/v-deo.html - includes Smooth Scroll header navigation with code🙏

  • @fallofmanbrand
    @fallofmanbrand 4 роки тому

    amazing content

  • @OnePageLoveVideos
    @OnePageLoveVideos 4 роки тому

    Update! Find my brand new Fluid Engine long-scrolling Landing Page tutorial here: ua-cam.com/video/GjZ6PMhQD8U/v-deo.html - includes Smooth Scroll header navigation with code🙏

  • @davidthomson1315
    @davidthomson1315 4 роки тому

    Mate - this is a really well laid out tutorial. Great work

    • @RobHope
      @RobHope 4 роки тому

      Thanks so much David! I've just published a brand new 2020 version of it here: ua-cam.com/video/oqAl-8Py2pg/v-deo.html <--- the big differences are not needing to start with a templates, the new page section adder, inline styles and fixing the header position so it's always visible when scrolling.

    • @davidthomson1315
      @davidthomson1315 4 роки тому

      @@RobHope - thanks mate. I'll check out this new link now. I just checked out your other vid on Parallax scorillong (ua-cam.com/video/4e5poedWGG4/v-deo.html). Can I add this feature to a singlr page scroll page?

  • @Owlch
    @Owlch 4 роки тому

    This was super helpful! Thanks so much for clicking through the different templates and describing how they work. You saved a lot of time on my end :)

    • @RobHope
      @RobHope 4 роки тому

      Only a pleasure Annelise - ICYMI I did a brand new video on how the new Squarespace 7.1 works: ua-cam.com/video/oqAl-8Py2pg/v-deo.html

    • @Owlch
      @Owlch 4 роки тому

      Rob Hope thank you again! I’ll check this out!

  • @jonathanngwolo9059
    @jonathanngwolo9059 4 роки тому

    Thank you very much. Do brine family support fixed header?

  • @happinessis...5114
    @happinessis...5114 4 роки тому

    Thanks sooooo much. I've been trying to figure out how to develop a scrolling landing from my cover but when I use index page, of course I get my existing template. How can I incorporate this scrolling landing page into another template? Right now, I have a cover with links to secondary navigation pages, which seems like too much work for a visitor.

    • @RobHope
      @RobHope 4 роки тому

      So glad you found it useful:) I've just uploaded a new version of this video for the new Squarespace 7.1 interface if you are interested: ua-cam.com/video/oqAl-8Py2pg/v-deo.html

    • @happinessis...5114
      @happinessis...5114 4 роки тому

      @@RobHope Happy to take a look see if it resolves my issue. Thank you

  • @thedesignorder
    @thedesignorder 4 роки тому

    Love it. Thanks for the info!

    • @RobHope
      @RobHope 4 роки тому

      Glad you found it helpful Zoe! :)

    • @shamseel101
      @shamseel101 4 роки тому

      @@RobHope but in mobile version when i click in the link it remains on the menu

    • @RobHope
      @RobHope 4 роки тому

      @@shamseel101 Hi Shamseel - if you're using Squarespace 7.1 Find the new smooth scroll tutorial here: ua-cam.com/video/oqAl-8Py2pg/v-deo.html

  • @andyfidler5786
    @andyfidler5786 4 роки тому

    thanks really useful !!

    • @RobHope
      @RobHope 4 роки тому

      Glad you found it useful Andy!

  • @cliffg7459
    @cliffg7459 4 роки тому

    I'm trying to add a section now to my website and it's just not possible. Where the "add section" was is just "add page". I'm looking all over Square Space to just add another section but I can't find it. Is that even an option anymore?

    • @RobHope
      @RobHope 4 роки тому

      Hi Cliff - I'm busy with a new video on how to create a long-scrolling landing page in 7.1. It's quite different but much easier. I'll message you when it's up next week!

    • @RobHope
      @RobHope 4 роки тому

      Hi Cliff - the brand new 7.1 version of this long-scrolling Landing Page video tutorial is up: ua-cam.com/video/oqAl-8Py2pg/v-deo.html <--- the big differences are not needing to start with a templates, the new page section adder, inline styles and fixing the header position so it's always visible when scrolling. Please let me know what you think on the new video, I've come a long way since making this one in 2017:)

  • @roseamandalind1835
    @roseamandalind1835 4 роки тому

    Thanks! Your video is easy to understand and follow! Nice, smooth and simple.

    • @RobHope
      @RobHope 4 роки тому

      Glad you found the video helpful Rose! :)

  • @suzanne3t
    @suzanne3t 4 роки тому

    This is fantastic! Because your delivery is smooth and confident, I feel I've learned so much in a relatively short amount of time. I'm subscribing NOW and will see what else OPL has to offer. Thanks!

    • @RobHope
      @RobHope 4 роки тому

      Thank you Suzanne - it's looking like my next video tutorial will be using the newer 7.1 interface. Glad you enjoyed the video!

    • @RobHope
      @RobHope 4 роки тому

      Hi Suzanne - the brand new 7.1 version of this long-scrolling Landing Page tutorial is up: ua-cam.com/video/oqAl-8Py2pg/v-deo.html <--- the big differences are not needing to start with a templates, the new page section adder, inline styles and fixing the header position so it's always visible when scrolling. Please let me know what you think on the new video, I've come a long way since making this one in 2017:)

  • @suzanne3t
    @suzanne3t 4 роки тому

    So, it doesn't work with SS 7.1?

    • @mmazz414
      @mmazz414 4 роки тому

      Would like to know this, too!

    • @RobHope
      @RobHope 4 роки тому

      @@mmazz414 Hi Mike - I just got word from Squarespace and can confirm Squarespace v7.1 templates do NOT support Parallax Scrolling: support.squarespace.com/hc/en-us/articles/205815488-Parallax-scrolling

    • @big1ne
      @big1ne 3 роки тому

      @@RobHope This 7.1 and 7.0 thing is annoying. They should not remove things from older versions. Thanks Rob

    • @RobHope
      @RobHope 3 роки тому

      @@big1ne Yeah, you'd think the new one was at least an 8.0 😅