Jump to content

Homepage background slideshow

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 11
  • Views 2.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

@Syd001 Will Myers has a plugin that allows you to add a slider that autoplays! https://www.will-myers.com/products/p/sliding-image-banner

I recently used it on a client's website: https://drshenell.com

Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan | Westerly Creative Studio
  
 🍪  Still need your website policies?
Termageddon makes it easy.  
Get 10% off your first year! (< affiliate link) 

Link to comment

You can use List Section Banner Slideshow to achieve this. It is free

(When you add a section > Choose People on the left list > Choose section with (i) icon on the right > Then edit section > Change to List Banner Slideshow).

Or another way, you can add 2 sections, top is Gallery Section Slideshow, second is a Section with Text, Buttons, then share page url, we can give you code to move second section over Slideshow section.

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/5/2024 at 4:10 AM, Syd001 said:

I will have to do the second solution. I don't like how the text slides with the images.

 

I added the gallery slideshow section and the text/buttons section. Since this site is live and actively used for my business, I'm keeping the current top section the same until we add this coding. https://www.kowalskipainting.com

You mean move this section over slideshow section above it?

image.thumb.png.3cf57a64c86f73b23fb1308fe35e95a2.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
12 hours ago, Syd001 said:

yes please!

If you use a Business Plan/higher, let me know, I can another code, I think it is better

With Personal Plan, use this code to Custom CSS box

section[data-section-id="65bffcaf5222f71b6bc666c9"] {
  position: relative !important;
  margin-top: -100vh !important;
  background-color: transparent !important;
  .section-background, .section-border {
    background-color: transparent !important;
  }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
On 2/15/2024 at 3:05 AM, Syd001 said:

I have a Business plan. What's the code for that?

Is there a way to make the header/nav bar transparent? This code requires it to have a solid background color.

Use this code to Website > Website Tools > Custom CSS

body.homepage article section:first-child {
    padding-top: 0px !important;
}
body.homepage header#header, body.homepage .header-background-solid {
    background-color: transparent !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
On 9/23/2024 at 7:16 PM, CKOnline said:

@tuanphan What would be the code for the business plan?

You mean move text + 2 buttons over slideshow or?

With Business Plan, do similar, but we will use JS code to cut text/button from a second section and append it over slideshow.

You can share link to your site, I can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.