Jump to content

Floating Button on Bottom

Go to solution Solved by paul2009,

Recommended Posts

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

Screen Shot 2022-01-10 at 10.00.05 PM.png

Edited by TheStandVeganCafe
Link to comment
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:

2050112336_Screenshot2022-01-13at10_36_06.thumb.png.806ff31fb3f196e7dfa89b4d86b4e2c7.png

 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. 🙂

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
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:

2050112336_Screenshot2022-01-13at10_36_06.thumb.png.806ff31fb3f196e7dfa89b4d86b4e2c7.png

 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
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:

2050112336_Screenshot2022-01-13at10_36_06.thumb.png.806ff31fb3f196e7dfa89b4d86b4e2c7.png

 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
15 hours ago, TheStandVeganCafe said:

Added section with button

I do not see a new section in the footer. This is what I see:

2080788335_Screenshot2022-01-14at15_32_50.thumb.png.d970e7f94bca8fcf0acb6cefd2de10ef.png

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

436284578_Screenshot2022-01-17at21_17_22.thumb.png.acc00ea4bf182efe5828204d9c44609f.png

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 by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
2 hours ago, paul2009 said:

436284578_Screenshot2022-01-17at21_17_22.thumb.png.acc00ea4bf182efe5828204d9c44609f.png

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 by TheStandVeganCafe
Link to comment
  • Solution
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:

sDZrovZuBg.thumb.gif.3a02a77d91db1c39242f5ce851034749.gif

// 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;
  }
}

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

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.

Screenshot_20220121-151453_Chrome.jpg

Screen Shot 2022-01-21 at 3.18.24 PM.png

Edited by TheStandVeganCafe
Link to comment
  • 5 months later...
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:

sDZrovZuBg.thumb.gif.3a02a77d91db1c39242f5ce851034749.gif

// 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
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?

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 10 months later...
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:

sDZrovZuBg.thumb.gif.3a02a77d91db1c39242f5ce851034749.gif

// 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
  • 4 months later...
On 1/11/2022 at 2:01 AM, TheStandVeganCafe said:

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

Screen Shot 2022-01-10 at 10.00.05 PM.png

have the same problem.

Link to comment

Folks please post the URL for a page on your site where we can see your issue. Without being able to see the issue live there is little chance we can begin to help you.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.