Jump to content

Adding a full bleed slideshow on homepage (including header)

Go to solution Solved by Ziggy,

Recommended Posts

Hey friends! 🙂

What is the best way to add a slideshow to the homepage opening? I need it to be the first thing you see when you go to the site. Full bleed and for it to also be the background for the header (navigation + logo etc).

I would provide the URL, but I've literally only started it today so it's just the template (Lusaka)

Thank you in advance.

Link to comment

If you add a gallery section at the top of the homepage and height set to L, that should get you what you want. You'll also want to set the header style to dynamic.

Slideshow: Full - A full-bleed slideshow that displays one image at a time

Let me know if that was helpful and how you get on.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

You just need this Custom CSS, replace the first bit with the section ID from your website:

section[data-section-id="639cd4110c46e15d382e602a"] {
  padding-top:0px !important; 
}

Find the section ID like this:

https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Fantastic! Thanks for marking my post as the solution, if you can give a thumbs up too that would be brilliant!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 4 months later...
  • 11 months later...
3 hours ago, Mannen_i_hatten said:

Great solution, thanks! But let's say I want a nice centered headline that floats in the slideshow, what CSS does that require? See attached screenshot for desired result. (I think all of the above works except the title.)

Can you share your website URL and this page?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Yes I can give you all a short window in time, like a day or so, on this password protected site (without the slider): 

kaptensgarden.squarespace.com

Password: Sqsp9867

The idea is to change the top section slider on the initial page – for which I use a parallax, (guess I have to ditch that going with a slider solution). 

The CSS code I have been experimenting with so far to get this to work is the following, but I can't get the typography to work properly because I have not been able to get it responsive due to lack of knowledge and research, see also my comment in code: 


 

section[data-section-id="662651f55d674b51fcd36d91"] {

  padding-top: 0px !important;

  position: relative; 

  height: 100%; 

}



[data-section-id="662651f55d674b51fcd36d91"] .gallery-fullscreen-slideshow:before {

    content: "Drömkök för livet";

    display: block;

    text-align: center;

    width: 100%;

    position: absolute;

    top: 50%;

    left: 0;

    z-index: 10;

    font-family: inherit; 

  font-size: 78px;  /* Here I also can use the variable for the H1, but then it gets too small */

    font-weight: var(--h1-font-weight); 

    color: var(--h1-color);



}


 

Edited by Mannen_i_hatten
Link to comment
12 hours ago, Mannen_i_hatten said:

Yes I can give you all a short window in time, like a day or so, on this password protected site (without the slider): 

I don't see the slider. I can't offer much if I can't see the problem. Alternatively this plugin is good and would allow you to use parallax on the sections:

https://www.will-myers.com/slider-pro-demo

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Sorry I was unclear, should have said I temporarily removed the slider so as not to confuse the customer, just wanted to show you how I wanted it to look.

Now I have reinstalled the code again in case you want to take a look. Same URL, same password. And I think I got it working now, found some CSS-code to be able to make the font responsive for different screen sizes.

Otherwise, thanks @Ziggy for the link to Will Myers plug-in, he has good stuff. I will check later if it fully solves my problem, looks promising. I I'll need it. Maybe it is better to use plug-ins that are maintained and updated? 

Anyhow: here is the code for how I finally solved it with my own CSS, but I'm always afraid when implementing that I'm doing something that will cause trouble in the future. Feel free to comment if you spot any bad coding. 

section[data-section-id="XXXXX"]

section[data-section-id="XXXXX"] {
  padding-top: 0px !important;
  position: relative; 
  height: 100%; 
}

[data-section-id="XXXXX"] .gallery-fullscreen-slideshow:before {
    content: "The Headline Of Your Choice";
    display: block;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;

    /* Default H1 styles, override as needed */
    font-family: inherit;
    font-size: var(--h1-font-size); 
    font-weight: var(--h1-font-weight);
    color: var(--h1-color);

    /* Responsive Typography Adjustments */
    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {
        font-size: 78px; /* Larger size for desktop */
    }

    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) and (max-width: 991px) {
        font-size: 68px; /* Moderate size for tablets */
    }

    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) and (max-width: 767px) {
        font-size: 58px; /* Smaller size for landscape phones */
    }

    /* Extra small devices (phones, less than 576px) */
    @media (max-width: 575px) {
        font-size: 48px; /* Smallest size for small phones */
    }
}

 

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.