This was super helpful thanks. Maybe you can also explain, is there a way to add text over the top of the carousel? So you can add a headline to your homepage header.
Not natively with this technique. You could use CSS to do this. But if you want complete freedom, I'd recommend this plugin www.will-myers.com/products/p/sliding-image-banner
This is only possible with custom code! If you want us to set it up, you can contact our extra support service bigcatcreative.com/extra-support OR you can ask Google, OpenAi or ask in the Squarespace Forum! :)
Make sure you're adding the image as a background (section background) image instead of an image block. Hopefully that helps but otherwise, send a message to our extra support team and they can help you bigcatcreative.com/extra-support
Hi - this video was so helpful. I'd love for the photos to go all the way to the top of the page, however, the code didnt work for me. Also, is there a way to add a block to this section? I want to add text over the photos
The code is still working for me so make sure that you are following the exact way I set it up. Unfortunately you can't add blocks on top of Gallery Section but you could instead maybe use a LIST Section (instead of Gallery Section) and use a Slideshow which you can then have text on (this video has info about adding LIST sections ruclips.net/video/LqlOoWGLnFA/видео.html) though this code to put it behind the header here won't work as it's for a Gallery
How do you put individual text boxes overlaid on top of each gallery image? On the homepage, gallery images typically require a text headline for context.
I believe this only works with photos. Here's the info about adding videos: support.squarespace.com/hc/en-us/articles/206542397-Adding-videos-to-your-site?platform=v6&websiteId=62b0fe94847f4a6bcb77ed95 Or you can use this great Plugin by Will Myers www.will-myers.com/products/p/sliding-image-banner?peachs_apc=erica-hartwick
This was great, thank you! Do you by chance know the code to put a gallery block/text/buttons on top of this slideshow? I know it requires custom code, but I don't know what the code is.
That's interesting, thank you. However, I'd like to have a hero banner auto-rotating slideshow on the top of my home page that has words on it, and perhaps even a button, on each sliding page. It's possible to make a slideshow like that in squarespace, but it doesn't auto-rotate. I don't think my visitors will think to click on the arrows to see the other slides. Would you be able to share CSS code for that?
Hey! There is an autoplay setting which you can toggle on in the slideshow settings and select how long you want each slide to appear for. The following tutorial should help: www.bigcatcreative.com/blog/slideshow-header-squarespace The following post might also be helpful for tips on adding buttons but this is not something that we have CSS for readily available! forum.squarespace.com/topic/262725-how-can-i-add-a-button-on-top-of-each-of-my-gallery-slides-gallery-type-slideshow-full/
No sorry! It's hard to troubleshoot via youtube comments. The code definitely still works. We can help you via our extra support service if you need bigcatcreative.com/extra-support
Is it possible to re-write this code or use this code to work with a banner slideshow? I would like for people to be able to read the headline of a blog post and navigate from the header?
You can possibly use code to bring up the Image Caption/Title and add a link though it's not something I know off the top of my head sorry. Maybe try this! ruclips.net/video/oc3EoxVEF2s/видео.html
how to do you change the vertical height on mobile? It just looks like a huge skinny vertical image. I want to see the correct 3:2 ratio of my slideshow.
You can also do this with some custom CSS. Try something like this and you can adjust the "60vh" number @media screen and (max-width: 640px){ .gallery-fullscreen-slideshow { height:60vh !important;}}
The fading option is just for the gallery to initially load, it doesn't control fades between slides. Be great if there was an option to control this as the first slide fades in, then it's a harsh immediate transition between Slides.
I always thought it was to control between slides. Did you save and view the page out of the editor? Maybe it's just now showing it correctly in the editor
This was super helpful thanks. Maybe you can also explain, is there a way to add text over the top of the carousel? So you can add a headline to your homepage header.
Not natively with this technique. You could use CSS to do this. But if you want complete freedom, I'd recommend this plugin www.will-myers.com/products/p/sliding-image-banner
very helpful, saved me some frustration. Thank you
Hi again Erica - I solved the issue by using the section ID + your custom code. Thanks so much for your tutorial!
Thanks! This was an amazingly simple and well explained tutorial. Helped a lot!
Love, Annie
Another fabulous tutorial Erica, thank you! I don’t know how well I would have been able to set up my Squarespace without you!
So happy to hear that!!
Is it possible to resize the section only on mobile version with css?
Love this! Thank you 😊Subscribed right away!
Absolutely fantastic, thank you this is brilliant!!!
THANK YOU!!! This was exactly what I was looking for! I don't know anything about coding so this was such a huge help
Great tutorial, thank you. Are there some special settings for the header so the custom CSS works? Because in my case nothing happened, unfortunately.
Hmm no, it should work. Are you using 7.1? Did you Save + Refresh after inputting your CSS?
Thank you so much for that tutorial! :) Do you also know how I could also add a caption/headline on the picture not below? Thanks a lot!!
This is only possible with custom code! If you want us to set it up, you can contact our extra support service bigcatcreative.com/extra-support OR you can ask Google, OpenAi or ask in the Squarespace Forum! :)
Thank you for this. Is there a way to make one of the gallery images a video?
Hey! You could try to make it into a GIF as this can be uploaded into the gallery!
Thank you for the tutorial! Is there a way to add text on top of the gallery images?
Not natively, but you could look into some custom code to achieve this!
Great video. Thank you very much. My header its floating on the images, but i have a kind o white background on it.... how can i remove it?
Make sure you're adding the image as a background (section background) image instead of an image block. Hopefully that helps but otherwise, send a message to our extra support team and they can help you bigcatcreative.com/extra-support
Hi - this video was so helpful. I'd love for the photos to go all the way to the top of the page, however, the code didnt work for me. Also, is there a way to add a block to this section? I want to add text over the photos
The code is still working for me so make sure that you are following the exact way I set it up. Unfortunately you can't add blocks on top of Gallery Section but you could instead maybe use a LIST Section (instead of Gallery Section) and use a Slideshow which you can then have text on (this video has info about adding LIST sections ruclips.net/video/LqlOoWGLnFA/видео.html) though this code to put it behind the header here won't work as it's for a Gallery
How do you put individual text boxes overlaid on top of each gallery image? On the homepage, gallery images typically require a text headline for context.
Not possible with a standard Gallery Block, maybe with Gallery Block + some custom code though!
Unfortunately it doesn't work for me either. Even after refreshing the page.
How do we use videos instead of photos, or a combination of both videos and photos?
I believe this only works with photos. Here's the info about adding videos: support.squarespace.com/hc/en-us/articles/206542397-Adding-videos-to-your-site?platform=v6&websiteId=62b0fe94847f4a6bcb77ed95
Or you can use this great Plugin by Will Myers www.will-myers.com/products/p/sliding-image-banner?peachs_apc=erica-hartwick
This was great, thank you! Do you by chance know the code to put a gallery block/text/buttons on top of this slideshow? I know it requires custom code, but I don't know what the code is.
Sorry it's not something off the top of my head. Maybe Google it, look for a Plugin or ask in the Squarespace Forum!
That's interesting, thank you. However, I'd like to have a hero banner auto-rotating slideshow on the top of my home page that has words on it, and perhaps even a button, on each sliding page. It's possible to make a slideshow like that in squarespace, but it doesn't auto-rotate. I don't think my visitors will think to click on the arrows to see the other slides. Would you be able to share CSS code for that?
Hey! There is an autoplay setting which you can toggle on in the slideshow settings and select how long you want each slide to appear for. The following tutorial should help: www.bigcatcreative.com/blog/slideshow-header-squarespace
The following post might also be helpful for tips on adding buttons but this is not something that we have CSS for readily available! forum.squarespace.com/topic/262725-how-can-i-add-a-button-on-top-of-each-of-my-gallery-slides-gallery-type-slideshow-full/
Hey, thank so much for this tutorial.
I have imputed the code multiple times, but nothing changes. Do you know what I could be wrong?
No sorry! It's hard to troubleshoot via youtube comments. The code definitely still works. We can help you via our extra support service if you need bigcatcreative.com/extra-support
it didnt work for me im struggling :/
Where can I find this custom CSS code?
Squarespace has moved things around - easiest way to find anything now is to hit SLASH on the keyboard which will open search. Type in CSS :)
will this work for the mobile view also?
Yes!
Is it possible to re-write this code or use this code to work with a banner slideshow? I would like for people to be able to read the headline of a blog post and navigate from the header?
You can possibly use code to bring up the Image Caption/Title and add a link though it's not something I know off the top of my head sorry. Maybe try this! ruclips.net/video/oc3EoxVEF2s/видео.html
how to do you change the vertical height on mobile? It just looks like a huge skinny vertical image. I want to see the correct 3:2 ratio of my slideshow.
You can also do this with some custom CSS. Try something like this and you can adjust the "60vh" number
@media screen and (max-width: 640px){ .gallery-fullscreen-slideshow { height:60vh !important;}}
Hmmm, this is not working for some reason.
How do you do this to only the homepage?
Watch this :) ruclips.net/video/h8qfZdaATbU/видео.html
The fading option is just for the gallery to initially load, it doesn't control fades between slides. Be great if there was an option to control this as the first slide fades in, then it's a harsh immediate transition between Slides.
I always thought it was to control between slides. Did you save and view the page out of the editor? Maybe it's just now showing it correctly in the editor
since this upload squarespace has removed many of the features used in this and the tutorial csnt be followed, or even matched anymore.
Worths well, but the only sad is you cannot abble to put any other actions, like butons, yeah?
Oh my GAWWDDD I’ve been looking for this!!! 🫶🏼 thank you thank you!!