Add a Slideshow Header to your Squarespace 7.1 site ⚡️ with copy + paste code

Поділитися
Вставка
  • Опубліковано 19 вер 2024

КОМЕНТАРІ • 46

  • @jamesscott1009
    @jamesscott1009 9 днів тому

    very helpful, saved me some frustration. Thank you

  • @AnnieJulian
    @AnnieJulian 10 місяців тому

    Thanks! This was an amazingly simple and well explained tutorial. Helped a lot!
    Love, Annie

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

    Another fabulous tutorial Erica, thank you! I don’t know how well I would have been able to set up my Squarespace without you!

  • @jackiedragonfly2461
    @jackiedragonfly2461 3 місяці тому

    Love this! Thank you 😊Subscribed right away!

  • @calebdegabriel6743
    @calebdegabriel6743 3 дні тому

    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.

    • @BigCatCreative
      @BigCatCreative  3 дні тому

      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

  • @PaisleyPeach12
    @PaisleyPeach12 8 місяців тому

    Absolutely fantastic, thank you this is brilliant!!!

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

    THANK YOU!!! This was exactly what I was looking for! I don't know anything about coding so this was such a huge help

  • @Micksflix-dd3zh
    @Micksflix-dd3zh 4 місяці тому

    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.

    • @BigCatCreative
      @BigCatCreative  4 місяці тому

      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

  • @MrAjjhad
    @MrAjjhad 10 місяців тому

    Great tutorial, thank you. Are there some special settings for the header so the custom CSS works? Because in my case nothing happened, unfortunately.

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

      Hmm no, it should work. Are you using 7.1? Did you Save + Refresh after inputting your CSS?

  • @Sara-k-r-216
    @Sara-k-r-216 4 місяці тому

    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.

    • @BigCatCreative
      @BigCatCreative  3 місяці тому

      Sorry it's not something off the top of my head. Maybe Google it, look for a Plugin or ask in the Squarespace Forum!

  • @DLCA13
    @DLCA13 3 місяці тому

    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?

    • @BigCatCreative
      @BigCatCreative  3 місяці тому

      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

  • @lefthandright01
    @lefthandright01 2 місяці тому

    since this upload squarespace has removed many of the features used in this and the tutorial csnt be followed, or even matched anymore.

  • @PiaSteimann
    @PiaSteimann 11 місяців тому

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

    • @BigCatCreative
      @BigCatCreative  11 місяців тому

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

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

    Thank you for this. Is there a way to make one of the gallery images a video?

    • @BigCatCreative
      @BigCatCreative  Рік тому +1

      Hey! You could try to make it into a GIF as this can be uploaded into the gallery!

  • @BelindaDenney
    @BelindaDenney 3 місяці тому

    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?

    • @BigCatCreative
      @BigCatCreative  3 місяці тому

      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

  • @lilsizzly1982
    @lilsizzly1982 3 місяці тому

    How do we use videos instead of photos, or a combination of both videos and photos?

    • @BigCatCreative
      @BigCatCreative  3 місяці тому

      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

  • @creo-marketing
    @creo-marketing 6 місяців тому

    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.

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

      Not possible with a standard Gallery Block, maybe with Gallery Block + some custom code though!

  • @isaiahnorton9833
    @isaiahnorton9833 11 місяців тому

    Thank you for the tutorial! Is there a way to add text on top of the gallery images?

    • @BigCatCreative
      @BigCatCreative  11 місяців тому

      Not natively, but you could look into some custom code to achieve this!

  • @michelleuziel1568
    @michelleuziel1568 7 місяців тому

    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

    • @BigCatCreative
      @BigCatCreative  7 місяців тому

      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 ua-cam.com/video/LqlOoWGLnFA/v-deo.html) though this code to put it behind the header here won't work as it's for a Gallery

  • @jeanphildu57
    @jeanphildu57 8 місяців тому

    Unfortunately it doesn't work for me either. Even after refreshing the page.

  • @rudyortega3285
    @rudyortega3285 8 місяців тому

    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.

    • @BigCatCreative
      @BigCatCreative  8 місяців тому +1

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

  • @rudyortega3285
    @rudyortega3285 3 місяці тому

    How do you do this to only the homepage?

    • @BigCatCreative
      @BigCatCreative  3 місяці тому

      Watch this :) ua-cam.com/video/h8qfZdaATbU/v-deo.html

  • @SonjaMiro-d6c
    @SonjaMiro-d6c Рік тому +1

    it didnt work for me im struggling :/

  • @promiseofjusticeinitiative
    @promiseofjusticeinitiative 10 місяців тому

    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?

    • @BigCatCreative
      @BigCatCreative  10 місяців тому

      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! ua-cam.com/video/oc3EoxVEF2s/v-deo.html

  • @user-qv8du9hh8y
    @user-qv8du9hh8y 8 місяців тому +1

    Where can I find this custom CSS code?

    • @BigCatCreative
      @BigCatCreative  8 місяців тому

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

  • @peteaguirre2013
    @peteaguirre2013 5 місяців тому

    will this work for the mobile view also?

  • @HeadphonesBrasil
    @HeadphonesBrasil 4 місяці тому

    Worths well, but the only sad is you cannot abble to put any other actions, like butons, yeah?

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

    Oh my GAWWDDD I’ve been looking for this!!! 🫶🏼 thank you thank you!!