Let's Get Creative with Code 👩‍💻

Is there a cool design concept that you wish Squarespace could do, but you’re not sure how to make it work? 🤔
Do you want to try a new hover effect for a button? 
A fancy animated overlay for images?
Or maybe you'd love to customize columns differently on mobile, tablet, and desktop?
 
Comment below with your creative design ideas, and include visuals if you can! There are absolutely NO limitations here – this is your chance to unleash your creativity and dream BIG about what we can achieve with Squarespace. 

Support your fellow Squarespacers and ❤️ your favorite design idea in the comments.  I'll hop back here into the forum later this month to share some creative & innovative code solutions to the most popular design ideas. Be sure to follow this post for the solutions & for design inspiration!

Absolutely! Here are a couple of cool design concepts that would be amazing on Squarespace:

1. Interactive Micro-Interactions:

Imagine hover effects that go beyond simple color changes or fades. We could have buttons that subtly change shape on hover, or image galleries where hovering over an image triggers a subtle zoom or parallax effect.

Opens in a new windowultimateblocks.com

button that morphs into a play icon on hover

2. Multi-State Responsive Layouts:

Wouldn't it be fantastic to have more granular control over responsive design? Squarespace could allow us to define different column layouts for mobile, tablet, and desktop. This would give us the flexibility to create truly optimized experiences for each device size.

3. Integrated Lottie Animations:

Lottie animations are lightweight JSON-based animations that can add a touch of magic to any website. Squarespace integration with Lottie would allow us to easily add these animations to various elements, like backgrounds, buttons, or even illustrations.

Opens in a new windowforum.blocsapp.com

website with a Lottie animation playing in the background

These are just a few ideas, and I'd love to see what other Squarespace users come up with! Let's unleash our creativity and push the boundaries of what's possible on this platform.

Hello love the videos 🙂

I'm looking for a way to achieve this (and be responsive).

I'd love to be able create a carousel like this with buttons underneath and that cold maybe go only half or three quarters of the width of the page .

On 5/12/2024 at 3:43 AM, Cummins456 said:

Absolutely! Here are a couple of cool design concepts that would be amazing on Squarespace:

1. Interactive Micro-Interactions:

Imagine hover effects that go beyond simple color changes or fades. We could have buttons that subtly change shape on hover, or image galleries where hovering over an image triggers a subtle zoom or parallax effect.

pen_spark

 

Opens in a new windowultimateblocks.com

button that morphs into a play icon on hover

2. Multi-State Responsive Layouts:

Wouldn't it be fantastic to have more granular control over responsive design? Squarespace could allow us to define different column layouts for mobile, tablet, and desktop. This would give us the flexibility to create truly optimized experiences for each device size.

3. Integrated Lottie Animations:

Lottie animations are lightweight JSON-based animations that can add a touch of magic to any website. Squarespace integration with Lottie would allow us to easily add these animations to various elements, like backgrounds, buttons, or even illustrations.

Opens in a new windowforum.blocsapp.com

website with a Lottie animation playing in the background

These are just a few ideas, and I'd love to see what other Squarespace users come up with! Let's unleash our creativity and push the boundaries of what's possible on this platform.

Hey @Cummins456 - thanks for your suggestions! I have some feedback on all three points for you and the good news is, most of these are part of Squarespace or easy to create with a little bit of custom code 🙂 

1. Hover effects are such a fun thing to create with code! We have endless possibilities when you apply a hover state to any selector, including colors and shapes. When it comes to image hover effects, Squarespace does exactly what you're describing for many collection items, like products & project thumbnails in portfolios. I think a key part here is that hover effects should be an indicator of a clickable item and not just a cool thing to see. 🙂 

2. Good news: We do have mobile design options inside fluid engine sections! We don't have tablet yet, but it's a start 😅 The rest of Squarespace is designed to be responsive, but you can create your own custom styles using media queries. I have an article about it on my blog at insidethesquare.co/mobile

3. Lottie animations are fun, but I haven't found a need for them in most of the client sites I've created. If you do think an extra level of animation could improve the useability of a site design, you can add your custom Lottie animation to a code block or an embed block. 👍

On 5/13/2024 at 3:06 AM, AntFr said:

Hello love the videos 🙂

 

I'm looking for a way to achieve this (and be responsive).

 

 

Interesting! I would suggest using an HTML table for this in Squarespace. The responsive part can be a little tricky so embedding a responsive based iFrame might be better, but I've had luck with smaller tables inside code blocks. You can see a simple one here: https://insidethesquare.co/themes

On 5/14/2024 at 7:21 PM, estirli said:

I'd love to be able create a carousel like this with buttons underneath and that cold maybe go only half or three quarters of the width of the page .

This is a perfect project for a list section! Found under the "people" page section category, list sections allow you to create collections of items that have an image, title, description, and a button. A carousel list section will have the arrows that are in your screenshot here. For the reduced width, we can use some custom code. If you do opt for a carousel list section, this code will make it fit to 75% of the page width until it's responsively resized to a single column at and stay centered on the page with margin:auto:

@media only screen and (min-width: 576px){
.user-items-list-carousel{
width: 75vw;
margin:auto
}
}

I have a little more info about list sections on my site here if you want to learn more about them: https://insidethesquare.co/list

Custom button creator:

Be awesome if squarespace had a custom button creator. Pick your "before" hover and "after" hover image. Modifiers could be added like hover effects (scale up, fade, particle effects etc). The button you create would be stored and ready to use anywhere on your website.
These things can be coded with css but i'm yet to find a working way to preload my hover img into a button, so there isn't a loading flash before changing to the hover img first time you visit the website.
Also just easier for the casual consumer if it was a block you could add and modify rather than writing css code for each button you create.

Issue I had originally here, seems the code is a bit messy but its so close: 

Hi, not sure if this is the correct place to post this but I guess it's worth a punt.

What I would like to do is change the default CSS for the user-profile-page CSS so that it matches the rest of the website theme.  I can't see where this is achievable but can make changes to the CSS when I inspect the page in Google Chrome.  Below I have changed the Font Weight, and Colour as well as the colour of the dividing lines.  So the question is, where can I access the file (user-profile-page-30235f842f37787aa800-min.en-US.css) and make these changes permanent?

hey @inside_the_square! here's a few things that would be great to see from squarespace:

1. It would be awesome for there to be an inherent option for images to change into the available squarespace image shape forms on hover 

2.  Animation / Transition effects without code. I feel like the new text highlight decor / animations are such a close step in the right direction on this! It would also be cool to have a larger variety of animation options (ability to assign different animations to different sections, etc) in the global site settings animations as well.

3. Ability to upload Videos into Gallery sections alongside Images in fluid editor

PS love your squarespace videos 🤩

L

Hi, it would be great if it was possible to either; display thumbnails on a Slideshow Full or make Slideshow Simple images full bleed. Either one would get to the same place but I just can't find a way to do either.

A general database in Squarespace is probably in the roadmap somewhere, but in the meantime there's a great (and free) solution using Sheetrock.js which pulls in a Google Sheet to a code block table. Check out https://chriszarate.github.io/sheetrock/#about for the JS script and documentation.

I've implemented this on two Squarespace website and it works a treat. On the custom CSS I've styled my tables to be responsive, so in doing that removed the sort function from the table for usability, but left in the search. If you are looking for good responsive tables, check out examples on Codepen (like https://codepen.io/AllThingsSmitty/pen/MyqmdM).

On the custom coded side, I have added a function to Sheetrock.js to change the color of words that match a set criteria (in this example, 'sold' turns red). This approach could be adapted for other styling or functions.

You could also setup a form on your website to post data to the Google Sheet, than pull it back in to your website table.

Happy to share more details if anyone is interested in adding a Google Sheet database to their Squarespace website.

I love the idea of adding more interactive elements to Squarespace! One design concept I'd like to see is a parallax scrolling effect for background images, where different layers move at different speeds for a 3D effect. It would be great for storytelling on a landing page. Another idea is having fully customizable sliders with unique animations for each slide transition. Custom hover effects for buttons, like color changes or icon swaps, would also be awesome. Can't wait to see what creative solutions come up in this thread!

I'd like to use the arc swoosh image under the active menu links in the header. I'm not sure how to replace the straight line under the active menu link with another image that will expand or contract based on the length of the active menu word. 

I've attached an example of the arc/swoosh. 

Thank you! 

I would love to see an option of adding two (or several) different logos to the menu that you set up to change depending on your color theme on the different pages: One logo for light backgrounds and one for dark background e.g. 🙂
Our logo is either dark blue or white, but some of our pages are a light grey and some are darker blue, so one logo doesn't work for the entire website. 

@Camilla_Nielsen You can add a second logo with a little JS code and CSS. The example here uses an svg for the logo so that it dynamically changes color to match the section theme color. You can see it working here: https://www.discoveryspecialists.co.nz/

Here's custom code injection to place in your header:

<!-- Logo on right of navbar -->
<script>
  $(document).ready(function() { 
		$('<a class="second-logo" href="#"><img src=""/></a>').appendTo('.header-display-desktop .header-actions.header-actions--right');
	});
</script>
<style>
  a.second-logo img {
    max-width: 70px;
}
a.second-logo {
    margin-left: 2.5vw;
}
</style>

Here's the custom CSS:

/* CSS for Header Second Logo */
.second-logo img {
 /*visibility: hidden;*/
}
.second-logo {
  @svg: "data:image/svg+xml, ... [add your own SVG data] ...";
content: '';
  width: 80px;
  height: 50px;
  display: inline-block;
  vertical-align: bottom;
 background-color: var(--navigationLinkColor);
   -webkit-mask-image: url(@svg);
  -webkit-mask-size: contain;
 -webkit-mask-position: center right;
 -webkit-mask-repeat: no-repeat;
 mask-image: url(@svg);
  mask-size: contain;
 mask-position: center;
 mask-repeat: no-repeat;
}

Using var(--navigationLinkColor) will change the logo color. I alos use an SVG on the main logo too. I'll paste the custom CSS for that below. 

/* Logo Header as SVG with currentColor theme */
.header-title-logo img {
  visibility: hidden;
  height:0px !important;
}
.header-title-logo a:after {
  @svg: "data:image/svg+xml, ... [add your own SVG data] ...";
  content: '';
  width: 135px;
  height: 135px;
  display: inline-block;
  vertical-align: bottom;
  background-color: var(--navigationLinkColor);  
   -webkit-mask-image: url(@svg);
  -webkit-mask-size: contain;
 -webkit-mask-position: center right;
 -webkit-mask-repeat: no-repeat;
 mask-image: url(@svg);
  mask-size: contain;
 mask-position: center;
 mask-repeat: no-repeat;
}

Hope that's useful.

Absolutely, let’s get creative with code! What project or idea are you thinking about?

On 5/21/2024 at 9:53 PM, inside_the_square said:

This is a perfect project for a list section! Found under the "people" page section category, list sections allow you to create collections of items that have an image, title, description, and a button. A carousel list section will have the arrows that are in your screenshot here. For the reduced width, we can use some custom code. If you do opt for a carousel list section, this code will make it fit to 75% of the page width until it's responsively resized to a single column at and stay centered on the page with margin:auto:

@media only screen and (min-width: 576px){
.user-items-list-carousel{
width: 75vw;
margin:auto
}
}

I have a little more info about list sections on my site here if you want to learn more about them: https://insidethesquare.co/list

Is it possible to make the carousel go off the page while retaining the navigation arrows, like in the original post?

I'm wanting to add a colour change background to my homepage template in 7.1.

Can you tell me where I should copy it to make it work? Yep, I'm pretty new to this 🙂

Hi!

I have been wanting a way to allow visitors to select which email lists they want to be subscribed to, that way they are automatically segmented. Also, if a user wants to 'unsubscribe' I want to give them the option to choose which email list they are unsubscribing from, rather than automatically being unsubscribed from all lists. This would be incredibly helpful!

Another wish-list item is a way to create a duplicate navigation (but being able to use the same pages in multiple navs)

I'd also love a way to create tabs in my website, like how Anthropologie has their main brand and anthro living home in another tab. https://www.anthropologie.com/?brand-switch=1&ref=tab

That would be amazing for segmenting different "faces" of my same website/business.