Design hack - How to create custom maps on Squarespace
The map block is a great feature to use on your website if you are a brick-and-mortar business, or provide services and certain locations. Not only are they super useful for your audience, but they also contribute towards good SEO practices.
Squarespace has a couple of built-in design styles (3 examples can be seen below), but they’re pretty uninspiring and can stick out like a sore thumb if they don’t match your brand or website style.
The good news?
I have a nifty design hack that can be used to customise the colour of map blocks, making them more on-brand and in line with your overall website look and feel!
For this trick to work, the section you’re working on must be on the drag-and-drop style Fluid Engine as it involves a shape block (shape blocks are only available on Fluid Engine).
What are the steps?
Once you have your map in position (the greyscale design works best) add a shape block and position it over your map. Within the Shape edit panel switch the Colour Blend option to overlay and update the colour to one from your colour palette, or any custom colour you choose. Now you will see that the map has a custom colour tint!
Don’t forget to check how the section looks on mobile view as you may need to reposition the shape block over the map again.
Voila!
Jazzy, playful, custom map sections that match the design of your website!
Want to watch a video walk through?
Do you have questions about your website? Drop me a message, I’d love to help : )
If you liked this post you might also like:
