How to make this style of landing page in 7.1

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

Hi! 

Is anyone able to help me make this kind of landing page:

https://www.studioproba.com/

I'm wanting to create a few of these image sections that link to other areas of my site but I love how they auto scroll through individually like a slideshow, and really like how the one you don't hover on fades out a bit. I've already used code to remove my header & footer. 

Thanks in advance.

I think you can use List Section, then share link to page where you added list, we can give the code to make it fullwidth, text overlay + autoscroll features.

1 hour ago, tuanphan said:

I think you can use List Section, then share link to page where you added list, we can give the code to make it fullwidth, text overlay + autoscroll features.

Thank you so much for your reply! That would be incredible.  I'd love that! Thanks again! 

When you've done add it, let me know, we can check easier

7 hours ago, tuanphan said:

When you've done add it, let me know, we can check easier

Thanks! Do you think I should make it using a simple list, banner slideshow list or a carousel list? I'm hoping to have it transition between 4 different photos in each section...

On 7/20/2022 at 12:18 AM, tuanphan said:

When you've done add it, let me know, we can check easier

Hey @tuanphan

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 your code 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. Would you happen to have any advice for this? 

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. 

On 7/25/2022 at 4:53 AM, LaurenC said:

Hey @tuanphan

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 your code 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. Would you happen to have any advice for this? 

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. 

 

 

Hi. Sorry for delay. Recently I'm sick.

Which code are you referring to?

3 hours ago, tuanphan said:

Hi. Sorry for delay. Recently I'm sick.

Which code are you referring to?

No worries at all. Hope you are on the mend. This is the code I found from one of your other forum posts:

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

This is EXACTLY the look i'm trying to achieve, too- a two image, full width, split screen, with roll-over effect and text overlay.

Would you or Tuan mind sharing the code you used?

The site i'm working on isn't published yet, so I don't have a link to share.

I have used some code that Tuan gave me to remove the header and footer- it removed the header, but hasn't completely removed the footer:

<style>
  header#header, footer.sections {
      display: none !important;
  }
</style>

Thanks so much in advance 🙂 Any help is much appreciated!

13 hours ago, abigailryan said:

This is EXACTLY the look i'm trying to achieve, too- a two image, full width, split screen, with roll-over effect and text overlay.

Would you or Tuan mind sharing the code you used?

 

The site i'm working on isn't published yet, so I don't have a link to share.

 

I have used some code that Tuan gave me to remove the header and footer- it removed the header, but hasn't completely removed the footer:

<style>
  header#header, footer.sections {
      display: none !important;
  }
</style>

Thanks so much in advance 🙂 Any help is much appreciated!

You can

Option 1. Add 2 Poster Blocks Side By Side (Use Classic Editor, don't use Fluid Engine)

Option 2. Add a Gallery Section - Design: Grid with 2 Images, then add some text/link

Then share link to page where you added it, we will give the code to achieve this layout