How to Make a Fixed Call to Action Button in Squarespace

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ม.ค. 2025

ความคิดเห็น • 54

  • @Mazon717
    @Mazon717 6 หลายเดือนก่อน +6

    GREAT TUTORIAL BUT FOR ANYBODY WHO'S BUTTON OVERLAYED THE ENTIRE SCREEN AFTER DOING THIS, INSERT
    width: 40%;
    height: 10%;
    (OR CHANGE TO WHATEVER DIMENSIONS YOU PREFER)
    UNDERNEATH THE "right" PROPERTY. FIXED IT FOR ME.

    • @Conno-S
      @Conno-S 5 หลายเดือนก่อน +1

      🙏

    • @LINKRGH1
      @LINKRGH1 3 หลายเดือนก่อน +1

      Thanks Mazon! I really appreciate the help

  • @SONUYADAV-ci5el
    @SONUYADAV-ci5el ปีที่แล้ว

    Loving all the squarespace videos by you Carl. Thank you very much.

  • @AliciaTisdale-q2j
    @AliciaTisdale-q2j ปีที่แล้ว +2

    Ok, so I tried this but it made the buttom take up the whole page. what did I do wrong?

  • @lyndawhite1463
    @lyndawhite1463 4 หลายเดือนก่อน

    which version of squarespace do you have? I don't have the settings icon in the bottom right corner like yours is showing. Where else can i find that option to select email/phone? Thanks in advance!

  • @KarlSandor88
    @KarlSandor88 2 ปีที่แล้ว

    Carl you legend, please keep making videos like this!

  • @tapocketa
    @tapocketa 2 ปีที่แล้ว

    This is brilliant. Love the injection of humour too. Worked a treat. Thank you. Subscribed 🙂

  • @clarkwickstone4666
    @clarkwickstone4666 7 หลายเดือนก่อน

    Really helpful. Thank you!

  • @johnrichardson7380
    @johnrichardson7380 2 ปีที่แล้ว +1

    Can this button go across all pages on the website or just the page that you set it up on?

  • @d.nicolaevsky
    @d.nicolaevsky 2 ปีที่แล้ว

    your tutorials are amazing, a real discovery, thanks a lot!

  • @jond661
    @jond661 ปีที่แล้ว +4

    My button now overlays the entire page for some reson

    • @rafathemedany4216
      @rafathemedany4216 5 หลายเดือนก่อน

      Dear Sir,
      How did you solve this problem kindly?

  • @MikeDeath
    @MikeDeath 2 ปีที่แล้ว

    Thank you Carl! Going to implement this on one of the site being built.

  • @SourenAryan
    @SourenAryan ปีที่แล้ว +2

    Hi Carl, worked great! just when i scroll it disappears on other sections of the home page. I have even tried building it into the footer but it does not scroll on any other sections of the page. Any idea on how to fix this?

  • @amirdaryani
    @amirdaryani 2 ปีที่แล้ว

    Thanks again for the useful tips.
    about the mobile version, I was wondering is it possible to have a different home page on mobile than the PC version?

  • @baloconcept864
    @baloconcept864 2 ปีที่แล้ว +3

    My button enlarge itself and filling up the screen instead, What I the cause pls?

    • @Natalia-if8yx
      @Natalia-if8yx 2 ปีที่แล้ว

      hi, did you figure this out?

    • @Natalia-if8yx
      @Natalia-if8yx 2 ปีที่แล้ว +2

      I added width: 20%; height: 10%; in the end and it worked

    • @baloconcept864
      @baloconcept864 2 ปีที่แล้ว

      @@Natalia-if8yx yes I did

    • @floreverschueren9944
      @floreverschueren9944 ปีที่แล้ว +1

      you can also make the button fit the text in the button settings. It'll either fit the text or fit the frame in which you put it. Mine did the same cause it was trying to fill up the sectioan I put it in, which was a full width section.

    • @Orion33759
      @Orion33759 ปีที่แล้ว

      @@floreverschueren9944I set it to Fit, it APPEARS better, but in actuality it’s still sitting on top of everything. I still can’t click or access anything under its invisible huge boarders

  • @Melody-tu4fn
    @Melody-tu4fn ปีที่แล้ว +2

    It worked! BUT it seems to sits on top of everything so none of the other buttons can be clicked now. Any idea how to get around this? I tried the footer suggestions below, same issue sadly. Thanks!

    • @Orion33759
      @Orion33759 ปีที่แล้ว

      SAME ISSUE! Desperately trying to fix this before a site launch

    • @rafathemedany4216
      @rafathemedany4216 5 หลายเดือนก่อน

      Dear Sir,
      How did you solve this problem kindly?

  • @rmd7425
    @rmd7425 ปีที่แล้ว +2

    Great video! BUT for some reason, the button gets hidden behind some sections even with the z-index set to 9999. Any idea why this is happening?

    • @DanielGiraldofuturaico
      @DanielGiraldofuturaico ปีที่แล้ว +3

      I solved: add the button inside the footer and put this extra code in CSS: #footer-sections {
      z-index: 9999;
      }

    • @Leonhart407
      @Leonhart407 ปีที่แล้ว

      ​​@@DanielGiraldofuturaico This worked perfectly for me! Thank you. Is there a way to make it so the button hides behind the mobile menu when it's open?

    • @DanielGiraldofuturaico
      @DanielGiraldofuturaico ปีที่แล้ว +1

      @@Leonhart407 you need to create a @media query defining the position or the display

    • @Orion33759
      @Orion33759 ปีที่แล้ว +1

      @@DanielGiraldofuturaico My button appears small and normal but behind the scenes it’s eating up half my page and huge in size. On mobile I can only click things on the top half of my screen. The only thing I can click on the bottom half is the button itself. Any ideas?

  • @jermundur
    @jermundur 2 ปีที่แล้ว

    Hi! I`m an doing excatly as you are showing, but the button is just in the middle of the page following down and up when I`m scrolling? It won`t stuck in the corner. Please help. Thanks. Mvh Jermund

    • @Carl_Johnson
      @Carl_Johnson  2 ปีที่แล้ว

      Can you share the code exactly as you've put it into Squarespace please?

    • @floreverschueren9944
      @floreverschueren9944 ปีที่แล้ว

      @@Carl_Johnson I have the same issue. The code I used is
      #block-yui_3_17_2_1_1689258998833_3019{
      position: fixed;
      z-index: 9999;
      bottom: 1%;
      right: 1%;
      }

    • @Melody-tu4fn
      @Melody-tu4fn ปีที่แล้ว

      @@floreverschueren9944 @jermundur I had the same issue. I changed the horizontal and vertical alignment of the button and it worked as expected. Change to align to bottom and align to right in the edit on fluid engine.

  • @impactjiujitsuabq279
    @impactjiujitsuabq279 ปีที่แล้ว

    Hey there, is there anyway to apply this across all pages without doing it on each page?

    • @Carl_Johnson
      @Carl_Johnson  ปีที่แล้ว

      Unfortunately not using this method. It can be done with code though, but you would have to build a button with HTML and CSS.

    • @impactjiujitsuabq279
      @impactjiujitsuabq279 ปีที่แล้ว

      Figured out if you build it into the footer it works across all pages!

    • @contticg
      @contticg ปีที่แล้ว

      @@impactjiujitsuabq279 Hello, would you be so kind and share the code please?

  • @karand653
    @karand653 2 ปีที่แล้ว

    Can you do a video on integrating an aesthetic live chat option through squarespace?

    • @Carl_Johnson
      @Carl_Johnson  2 ปีที่แล้ว

      Thanks for the suggestion, Karen. I'll definitely put it on my list of potential tutorials. In the mean time Elfsight do a bunch of chat plugins if you wanted to give them a try bit.ly/3t4tRfd

    • @karand653
      @karand653 2 ปีที่แล้ว

      @@Carl_Johnson I have tried their free versions, it just doesn't fit the aesthetic at all.. would be great to do a video on different options maybe. such as adding whatsapp live chat, fb messenger, or any other way css..

  • @chenesebeanmua
    @chenesebeanmua 2 ปีที่แล้ว

    That’s cool. Can this be done for emails?

    • @Carl_Johnson
      @Carl_Johnson  2 ปีที่แล้ว

      Sure! In you button settings select Email instead of Phone, and voila!! 😊

  • @dakotarice2535
    @dakotarice2535 9 หลายเดือนก่อน

    For some reason, my button takes up the foll space of the screen now.

    • @rafathemedany4216
      @rafathemedany4216 5 หลายเดือนก่อน

      Dear Sir,
      How did you solve this problem kindly?

  • @rolandvandenhout
    @rolandvandenhout 2 ปีที่แล้ว

    Hilarious! Thanks Carl...

  • @Carl_Johnson
    @Carl_Johnson  2 ปีที่แล้ว +1

    Poor Daniel 🤪