No video :(

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

Big Cat Creative - Squarespace Tips & Templates

Подписаться 10 тыс.

Просмотров 8 тыс.

50% 1

⚡️FREE TRAINING⚡️ DIY Your Dream Site: 5 key steps to a stress free + beautiful website
- Join instantly here: bigcatcreative.com/free-train...
Learn how to create a stunning full-width header slideshow for your Squarespace 7.1 website and captivate your visitors from the get-go! Whether you're a photographer, designer, or creative, showcasing your style is essential, and a header slideshow is ideal to showcase a hand-picked selection of your best work to truly highlight what you're capable of! Follow our easy step by step tutorial and get your copy + paste custom CSS from our full blog post via the link below.
MENTIONED IN THE VIDEO:
👉🏼 Read the written post on this topic: www.bigcatcreative.com/blog/slideshow-header-squarespace
👉🏼 Squarespace: squarespace.syuh.net/bigcatcr... *
👉🏼 Squarespace Asset Library: www.bigcatcreative.com/blog/m...
👉🏼 10 fun customisations for your header navigation in Squarespace: www.bigcatcreative.com/blog/cu...
💰 SQUARESPACE DISCOUNT CODE: Use code BIGCATCREATIVE10 for 10% off your first year of Squarespace! Sign up here squarespace.syuh.net/bigcatcr... *
📣 Want Squarespace Tips straight to your inbox every week? Sign up here: bigcatcreative.com/tips
💻 Ready to up your Squarespace Website Design? Check out our Squarespace Template Kits: bigcatcreative.com/templates-yt
MORE GOODIES:
👉🏼 Visit our blog full of Squarespace Tips & Tricks: bigcatcreative.com/blog
👉🏼 Follow us on Instagram: / bigcatcreative
TIMESTAMPS:
00:00 Intro
0:36 Add a Gallery Section
2:36 Add your Images
04:14 Edit your Slideshow Settings
08:16 Add Custom CSS to put the slideshow behind the header
*This is an affiliate link. I may earn a commission if you sign up using this link, at no cost to you, of course :) I only promote things that I love and recommend.

Опубликовано:

7 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 43

@AnnieJulian 8 месяцев назад

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

@jackiedragonfly2461 2 месяца назад

Love this! Thank you 😊Subscribed right away!

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

@BigCatCreative Год назад

So happy to hear that!!

@PaisleyPeach12 6 месяцев назад

Absolutely fantastic, thank you this is brilliant!!!

@anjaemzen5507 11 месяцев назад

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

@MrAjjhad 8 месяцев назад

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 8 месяцев назад

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

@user-pf8sc1sd3k 10 месяцев назад

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 9 месяцев назад

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 10 месяцев назад

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

@BigCatCreative 10 месяцев назад

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

@DLCA13 Месяц назад

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 Месяц назад

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

@isaiahnorton9833 10 месяцев назад

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

@BigCatCreative 9 месяцев назад

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

@Micksflix-dd3zh 3 месяца назад

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 3 месяца назад

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

@Sara-k-r-216 2 месяца назад

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 2 месяца назад

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

@michelleuziel1568 5 месяцев назад

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 5 месяцев назад

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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LqlOoWGLnFA.html) though this code to put it behind the header here won't work as it's for a Gallery

@jeanphildu57 6 месяцев назад

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

@promiseofjusticeinitiative 9 месяцев назад

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 9 месяцев назад

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! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-oc3EoxVEF2s.html

@BelindaDenney Месяц назад

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 Месяц назад

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

@creo-marketing 5 месяцев назад

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 5 месяцев назад

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

@user-sd9ll2nm2r 10 месяцев назад

it didnt work for me im struggling :/

@rudyortega3285 6 месяцев назад

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 6 месяцев назад

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

@lilsizzly1982 Месяц назад

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

@BigCatCreative Месяц назад

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

@rudyortega3285 Месяц назад

How do you do this to only the homepage?

@BigCatCreative Месяц назад

Watch this :) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h8qfZdaATbU.html