TheStandVeganCafe Posted January 10, 2022 Share Posted January 10, 2022 (edited) Site URL: https://thestandvegancafe.squarespace.com Hello, I am new to the forum so I will take this opportunity to greet you all. Is it possible to add a floating button with link as on the page from the picture? Bottom floating button with transparent background to follow the style of the site. Example:https://willownewyork.com/ Site:https://thestandvegancafe.squarespace.com Password: 123456 Thank you in advance for your help! Best Regards Edited January 10, 2022 by TheStandVeganCafe Link to comment
tuanphan Posted January 12, 2022 Share Posted January 12, 2022 For top image on homepage or? TheStandVeganCafe 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
TheStandVeganCafe Posted January 12, 2022 Author Share Posted January 12, 2022 14 hours ago, tuanphan said: For top image on homepage or? To always be visible at the bottom of the page. And when it scrolls. Like the site I gave you as an example. https://willownewyork.com/ Link to comment
paul2009 Posted January 13, 2022 Share Posted January 13, 2022 On 1/10/2022 at 9:01 PM, TheStandVeganCafe said: I am new to the forum so I will take this opportunity to greet you all. Is it possible to add a bottom floating button with transparent background? Welcome 👋 As you're using Squarespace 7.1, the easiest way is to add a new section at the bottom of the site's footer. You can do this by scrolling to the bottom of the page and clicking EDIT FOOTER and then ADD SECTION. Design your new footer section to meet your needs, for example with three Button Blocks if that's what you'd like, for example: Once you've added this, we can provide you with some styling code (CSS) to add to your site to make it fixed, reduce the height, change the background colour & opacity, and so on. 🙂 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
TheStandVeganCafe Posted January 13, 2022 Author Share Posted January 13, 2022 8 hours ago, paul2009 said: Welcome 👋 As you're using Squarespace 7.1, the easiest way is to add a new section at the bottom of the site's footer. You can do this by scrolling to the bottom of the page and clicking EDIT FOOTER and then ADD SECTION. Design your new footer section to meet your needs, for example with three Button Blocks if that's what you'd like, for example: Once you've added this, we can provide you with some styling code (CSS) to add to your site to make it fixed, reduce the height, change the background colour & opacity, and so on. 🙂 Thank You my friend! I'll get back to you when I'm done Link to comment
TheStandVeganCafe Posted January 13, 2022 Author Share Posted January 13, 2022 12 hours ago, paul2009 said: Welcome 👋 As you're using Squarespace 7.1, the easiest way is to add a new section at the bottom of the site's footer. You can do this by scrolling to the bottom of the page and clicking EDIT FOOTER and then ADD SECTION. Design your new footer section to meet your needs, for example with three Button Blocks if that's what you'd like, for example: Once you've added this, we can provide you with some styling code (CSS) to add to your site to make it fixed, reduce the height, change the background colour & opacity, and so on. 🙂 Hello, Added section with button (White background). I would like the background to be in this color #E05E5A Opacity 50% with White button. And always be at the bottom of the screen as on the site I gave you as an example https://thestandvegancafe.squarespace.com/ Password: 123456 Thank you very much once again! Link to comment
paul2009 Posted January 14, 2022 Share Posted January 14, 2022 15 hours ago, TheStandVeganCafe said: Added section with button I do not see a new section in the footer. This is what I see: tuanphan 1 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
TheStandVeganCafe Posted January 17, 2022 Author Share Posted January 17, 2022 On 1/14/2022 at 4:34 PM, paul2009 said: I do not see a new section in the footer. This is what I see: Hello, I'm sorry. The section is now in footer. Link to comment
paul2009 Posted January 17, 2022 Share Posted January 17, 2022 (edited) Are we looking at the same site? 🤔 I'm looking at https://thestandvegancafe.squarespace.com where the section containing the Order Now button is in the main part of the page, not the footer. To add a section to the footer you'll need to click the white EDIT FOOTER button and then add your new section there. Does that make sense? Edited January 17, 2022 by paul2009 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
TheStandVeganCafe Posted January 17, 2022 Author Share Posted January 17, 2022 (edited) 2 hours ago, paul2009 said: Are we looking at the same site? 🤔 I'm looking at https://thestandvegancafe.squarespace.com where the section containing the Order Now button is in the main part of the page, not the footer. To add a section to the footer you'll need to click the white EDIT FOOTER button and then add your new section there. Does that make sense? Hello, I added a section above the footer (white bg with red button) Does it have to be in the footer or above it? https://thestandvegancafe.squarespace.com/ Edited January 17, 2022 by TheStandVeganCafe Link to comment
TheStandVeganCafe Posted January 19, 2022 Author Share Posted January 19, 2022 I would not like it to be an integral part of the footer, but to move when you scroll the page and always be at the bottom of the page. As on this site. https://willownewyork.com/ Link to comment
Solution paul2009 Posted January 19, 2022 Solution Share Posted January 19, 2022 1 hour ago, TheStandVeganCafe said: I would not like it to be an integral part of the footer Yes, I understand that 🙂. I asked you to add it to a new section in the footer so that the button can float on every page of the website. If you're happy for it to only appear on the homepage you can leave it where it is, and use this CSS like this: // Fixed Footer Section Sqsp 7.1 .page-section[data-section-id="61e0b613d33f5969b3fba88a"] { position: fixed; background: transparent; bottom: 0px; left:0; right:0; z-index: 9999; min-height: 30px!important; .section-background { background: #000; opacity:0.6; } .content-wrapper { padding: 17px!important; } } tuanphan 1 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
TheStandVeganCafe Posted January 21, 2022 Author Share Posted January 21, 2022 Now I will test the code and let you know. Thanks! Link to comment
TheStandVeganCafe Posted January 21, 2022 Author Share Posted January 21, 2022 It's perfect! Thank you very much. If I have any further questions regarding this section I will let you know Link to comment
TheStandVeganCafe Posted January 21, 2022 Author Share Posted January 21, 2022 (edited) Just tell me how to fix this. I would like the section to go below copyright on mobile devices.And I would like to center the button (desktop) with the section. Edited January 21, 2022 by TheStandVeganCafe Link to comment
MaisOuiCreative Posted July 14, 2022 Share Posted July 14, 2022 On 1/19/2022 at 3:20 PM, paul2009 said: Yes, I understand that 🙂. I asked you to add it to a new section in the footer so that the button can float on every page of the website. If you're happy for it to only appear on the homepage you can leave it where it is, and use this CSS like this: // Fixed Footer Section Sqsp 7.1 .page-section[data-section-id="61e0b613d33f5969b3fba88a"] { position: fixed; background: transparent; bottom: 0px; left:0; right:0; z-index: 9999; min-height: 30px!important; .section-background { background: #000; opacity:0.6; } .content-wrapper { padding: 17px!important; } } Hello I'm hoping you can help me. I'm trying to create a floating button at the bottom of my page. I've created a section in the footer with the button. Where do I insert this code to make it work? I tried adding a code block and it didn't work. Thank you so much for your help. https://dahlia-chrysalis-bsmd.squarespace.com/ Link to comment
paul2009 Posted July 14, 2022 Share Posted July 14, 2022 57 minutes ago, MaisOuiCreative said: I'm hoping you can help me. I'm trying to create a floating button at the bottom of my page. It looks like this is working? About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
pexeldio Posted May 17 Share Posted May 17 After use the above code. website button is not working. Link to comment
pexeldio Posted May 17 Share Posted May 17 On 1/20/2022 at 3:20 AM, paul2009 said: Yes, I understand that 🙂. I asked you to add it to a new section in the footer so that the button can float on every page of the website. If you're happy for it to only appear on the homepage you can leave it where it is, and use this CSS like this: // Fixed Footer Section Sqsp 7.1 .page-section[data-section-id="61e0b613d33f5969b3fba88a"] { position: fixed; background: transparent; bottom: 0px; left:0; right:0; z-index: 9999; min-height: 30px!important; .section-background { background: #000; opacity:0.6; } .content-wrapper { padding: 17px!important; } } after use this code, website others button not working. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment