Jump to content

How to set up landing page with slideshow that autoplays + centred text overlaid on the images + white header navigation text?

Recommended Posts

Site URL: https://www.janeashleygardendesign.co.uk/

I've been trying to set up a landing page style homepage with a slideshow that autoplays + centred white text overlayed on top of the slideshow images + a transparent header (with the header text in the colour white).

I couldn't figure out how to do this so hacked a solution together by playing the images as a video in the background, rather than making it a slideshow - but the video is quite large and the quality of the images is less good so I really want to solve this. Any help will be very appreciated.

Full context and what I've tried is below:

  • The current homepage (https://www.janeashleygardendesign.co.uk/)
    • This is a background video
    • Initially this was the only way I could figure out how to show 3 pictures with text sitting on top, centred on the page
    • The only code on the current home page is to remove the footer:
      • <style>
      •  #footer-sections {
      •   display: none!important;}
      • </style>
    • However, the pictures in the video are slightly low quality and the video is quite a large file to download
 
  • So I want to switch to using a slideshow on the homepage
    • Note that I want the new homepage to look essentially the same as the current homepage - but using a slideshow should mean the pictures are higher quality and also quicker to download
    • I am not sure how to make the new homepage look like the current one using a slideshow
    • I have looked at this video and tried to do what it says: https://www.youtube.com/watch?v=PF45Wz5dAX0&ab_channel=InsideTheSquare-SquarespaceTutorials
    • I have tried using a ’slideshow full’ and then overlaying a text box on top of it with the following code: (you can see this at this link https://www.janeashleygardendesign.co.uk/home-test-2-1 and use the password ’test’)
      • <style> #page .page-section{height:75vh!important}
      • #page .page-section:nth-child(2) {margin-top:-100vh!important;}
      • #page .page-section:nth-child(2) , #page .page-section:nth-child(2) .section-background{background-color:transparent!important}
      • #footer-sections {display:none!important} <style>
    • This has made it look like the homepage except the navigation text in the header is black not white - which means you can’t really see it. 
    • How can I turn the text in the navigation header to be white (not black?)

Can someone tell me how to do this by starting from scratch or by turning the header text colour from black to white on the above test page?

Thanks so much in advance

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

On 4/13/2022 at 6:23 PM, Ben92 said:

Site URL: https://www.janeashleygardendesign.co.uk/

I've been trying to set up a landing page style homepage with a slideshow that autoplays + centred white text overlayed on top of the slideshow images + a transparent header (with the header text in the colour white).

I couldn't figure out how to do this so hacked a solution together by playing the images as a video in the background, rather than making it a slideshow - but the video is quite large and the quality of the images is less good so I really want to solve this. Any help will be very appreciated.

Full context and what I've tried is below:

  • The current homepage (https://www.janeashleygardendesign.co.uk/)
    • This is a background video
    • Initially this was the only way I could figure out how to show 3 pictures with text sitting on top, centred on the page
    • The only code on the current home page is to remove the footer:
      • <style>
      •  #footer-sections {
      •   display: none!important;}
      • </style>
    • However, the pictures in the video are slightly low quality and the video is quite a large file to download
 
  • So I want to switch to using a slideshow on the homepage
    • Note that I want the new homepage to look essentially the same as the current homepage - but using a slideshow should mean the pictures are higher quality and also quicker to download
    • I am not sure how to make the new homepage look like the current one using a slideshow
    • I have looked at this video and tried to do what it says: https://www.youtube.com/watch?v=PF45Wz5dAX0&ab_channel=InsideTheSquare-SquarespaceTutorials
    • I have tried using a ’slideshow full’ and then overlaying a text box on top of it with the following code: (you can see this at this link https://www.janeashleygardendesign.co.uk/home-test-2-1 and use the password ’test’)
      • <style> #page .page-section{height:75vh!important}
      • #page .page-section:nth-child(2) {margin-top:-100vh!important;}
      • #page .page-section:nth-child(2) , #page .page-section:nth-child(2) .section-background{background-color:transparent!important}
      • #footer-sections {display:none!important} <style>
    • This has made it look like the homepage except the navigation text in the header is black not white - which means you can’t really see it. 
    • How can I turn the text in the navigation header to be white (not black?)

Can someone tell me how to do this by starting from scratch or by turning the header text colour from black to white on the above test page?

Thanks so much in advance

Have you figured it out? Do you still need help?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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.