Jump to content

Adding tabs at the top of sections

Recommended Posts

Hello! I am revamping my website and I came up with this idea to have labelled tabs at the top of every section on my homepage. Please see attached photo for reference. I love the vintage look it gives. Is this possible to do with code? I've seen other sites do this design, so I know it is somehow! Any advice or recommendations greatly appreciated! They don't need to link out to anything, just looking to add it as a static design element.

Screen Shot 2024-06-11 at 4.36.14 PM.png

Edited by abbyleighton97
Link to comment
  • Replies 4
  • Views 210
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

@abbyleighton97 Hi! This can be achieved without writing any code. First, add an empty section right before/after a section with content. Customize the empty section by selecting 'no gap' under 'Edit Section'. Also, style the empty section's height and background color accordingly. After that, inside the empty section, add a text block with a background and style and align it to look like the tab in your shared screenshot.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
3 minutes ago, Lesum said:

@abbyleighton97 Hi! This can be achieved without writing any code. First, add an empty section right before/after a section with content. Customize the empty section by selecting 'no gap' under 'Edit Section'. Also, style the empty section's height and background color accordingly. After that, inside the empty section, add a text block with a background and style and align it to look like the tab in your shared screenshot.

Omg you are SO RIGHT! Thank you!!
The only thing is that I can't make the section with the tab as thin as I want. the lowest row count I can go is 6. Is there any way to do a custom row count less than this that can make it flush with the button (2 rows)? 

Screen Shot 2024-06-11 at 5.14.57 PM.png

Link to comment

@abbyleighton97 You should be able to adjust the number of rows up to 2. You might need to drag the text block to the top first and then reduce the section height by dragging the icon that appears at the bottom of a section.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.