Jump to content

Split Screen landing / cover page with multiple full slideshows - 7 or 7.1

Recommended Posts

Site URL: https://www.studioproba.com/

Hey all. 

I was wondering if anyone out there might be able to help me create a split screen landing page / or cover page with multiple full slideshows. I'm trying to make something like this but with three sections instead of two: https://www.studioproba.com/

I have both 7 & 7.1 sites so ideally whatever way gets this working would be amazing if anyone has any ideas or tips? 

Thanks for your help! 

Link to comment
11 hours ago, LaurenC said:

Site URL: https://www.studioproba.com/

Hey all. 

I was wondering if anyone out there might be able to help me create a split screen landing page / or cover page with multiple full slideshows. I'm trying to make something like this but with three sections instead of two: https://www.studioproba.com/

I have both 7 & 7.1 sites so ideally whatever way gets this working would be amazing if anyone has any ideas or tips? 

Thanks for your help! 

I think we can implement this layout via some steps:

- Use Css to hide the header & footer only for this page

- create 3 gallery sections

- Using Css code display 3 section into 3 columns

- Using pseudo element to set the caption for each section.

...

Some additional codes also needs to be considered for the mobile display 

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

 

This is my first try to approach your idea

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
5 hours ago, bangank36 said:

I think we can implement this layout via some steps:

- Use Css to hide the header & footer only for this page

- create 3 gallery sections

- Using Css code display 3 section into 3 columns

- Using pseudo element to set the caption for each section.

...

Some additional codes also needs to be considered for the mobile display 

Thanks so much @bangank36

This is exactly what I am after. It looks great! 🙂 

So I've managed to hide the header and banner and created my three galleries in 3 different sections. 

Would you mind sharing the css code you used to display 3 the sections into 3 columns? 

And how you Used pseudo element to set the caption for each section?

Thank you so so much again for your help! Really appreciate it. 

Link to comment
On 7/21/2022 at 12:39 AM, bangank36 said:

 

This is my first try to approach your idea

 

Hey again @bangank36

I've been able to get to this point using two gallery slideshows. 

https://www.laurencampbell.net.au/test-landing-page

I'm also using a code I found here for the transition fade but it only seems to work every couple of times, not every time and not for both galleries. It seems super random. Here is the code:

///SLIDESHOW TRANSITION EFFECT FADE///
.gallery-fullscreen-slideshow-item-img{
    transition: opacity 1600ms ease-in-out !important;
    -webkit-transition: opacity 1600ms ease-in-out !important;
    -ms-transition: opacity 1600ms ease-in-out !important;
    -moz-transition: opacity 1600ms ease-in-out !important;
    -o-transition: opacity 1600ms ease-in-out !important;
}

//.gallery-fullscreen-slideshow[data-transition="fade"] 
.gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src{
    transition: opacity 1400ms ease-in-out !important;
    -webkit-transition: opacity 1400ms ease-in-out !important;
    -ms-transition: opacity 1400ms ease-in-out !important;
    -moz-transition: opacity 1400ms ease-in-out !important;
    -o-transition: opacity 1400ms ease-in-out !important;
}

I'm still trying to figure out how to overlay the text over the top of each image and make mobile view split like the image attached. Would you happen to have any advice for this?

Screen Shot 2022-07-21 at 6.49.04 am.png

Link to comment
16 hours ago, LaurenC said:

Hey again @bangank36

I've been able to get to this point using two gallery slideshows. 

https://www.laurencampbell.net.au/test-landing-page

I'm also using a code I found here for the transition fade but it only seems to work every couple of times, not every time and not for both galleries. It seems super random. Here is the code:

///SLIDESHOW TRANSITION EFFECT FADE///
.gallery-fullscreen-slideshow-item-img{
    transition: opacity 1600ms ease-in-out !important;
    -webkit-transition: opacity 1600ms ease-in-out !important;
    -ms-transition: opacity 1600ms ease-in-out !important;
    -moz-transition: opacity 1600ms ease-in-out !important;
    -o-transition: opacity 1600ms ease-in-out !important;
}

//.gallery-fullscreen-slideshow[data-transition="fade"] 
.gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src{
    transition: opacity 1400ms ease-in-out !important;
    -webkit-transition: opacity 1400ms ease-in-out !important;
    -ms-transition: opacity 1400ms ease-in-out !important;
    -moz-transition: opacity 1400ms ease-in-out !important;
    -o-transition: opacity 1400ms ease-in-out !important;
}

I'm still trying to figure out how to overlay the text over the top of each image and make mobile view split like the image attached. Would you happen to have any advice for this?

Screen Shot 2022-07-21 at 6.49.04 am.png

I testing on my site with pseudo element and it works simply fine. Can you share your site?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 hour ago, LaurenC said:

https://www.laurencampbell.net.au/test-landing-page  This is my test page for my site 🙂

You can try it

/*Hover effect*/
#collection-62d72079a1c57133b8bcd4f7 main .gallery-fullscreen-slideshow-item-img:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #000;
  opacity: 0.5;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.2s linear;
}


#collection-62d72079a1c57133b8bcd4f7 main section:hover .gallery-fullscreen-slideshow-item-img:after {
  opacity: 0;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
21 hours ago, bangank36 said:

You can try it

/*Hover effect*/
#collection-62d72079a1c57133b8bcd4f7 main .gallery-fullscreen-slideshow-item-img:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #000;
  opacity: 0.5;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.2s linear;
}


#collection-62d72079a1c57133b8bcd4f7 main section:hover .gallery-fullscreen-slideshow-item-img:after {
  opacity: 0;
}

 

Hi! Thanks so much for this. Would this go in the advanced code injection page or the custom css? (I don't know much about coding - just little things picked up in forums)

Link to comment

You can add to Home > Design > Custom Css

the page ID (#collection-62d72079a1c57133b8bcd4f7 is page ID on my site) can be found by using the following extension: Squarespace Id finder

How to get page Id: http://recordit.co/qwnj09oNCa

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.