Jump to content

Text and Button overlay on 7.1 Slideshow/Carousel section

Recommended Posts

Hi all,

I have played around in 7.1 for a while now, and I've taken the step to build my first client site using it. Exciting!

I am using a Headline section with full width background image with overlaid text and button — standard out the box stuff. The client has requested that the background image becomes a slideshow so that there are 3 images it cycles between. Unfortunately it's not currently possible to add text and a button to the Image slideshow which would have been the easiest solution. I know that using Brine is an option but I don't want to step backwards to 7.0 at this stage. 

Would anyone happen to have code or could instruct me on how else I could go about this?

Screenshot attached is how the current Headline section looks. The site is jos-kitchen.co.uk but currently doesn't have any of this easily accessible as it's in holding page state.

Thanks in advance,


Screenshot 2020-01-14 at 09.14.30.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Just an update to say I have managed this with the help of another Circle member.

Solution so far:

I inserted a new section below the slideshow section and inputted my title and button into that section.

I then used:

#block-ID for title, #block-id for button
{z-index:99; position:relative; top:-400px;}

Then I had a row of buttons in another section below the previous header image that I needed to move up into the now empty section space.

#block-id for button, #block-id for button, #block-id for button {z-index:99; position:relative; top:-90px;}

The only downside is that the new section which have the z-index applied has to maintain a specific height, and not be display:none which is restrictive. It does mean that my pinky button section is now much deeper than I had wanted it to be. If anyone knows how to reduce it and still maintain the above, I'd appreciate it!


Screenshot 2020-01-14 at 14.14.18.png

Link to comment


This topic is now archived and is closed to further replies.

  • 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.