Colors and Squarespace web design
Hello hello and happy Tuesday!
WELCOME BACK to Day 12 (!!!) of the Live Video Training Extravaganza, we’re at it again with another week of free live video trainings and I am so excited to continue sharing this content with you! Week 3, hot dang.
Quick summary: every day for the past 2 weeks, I’ve hosted a free live video training over on my Youtube channel and shared those replays here on the blog. And honestly, it’s been so much fun that I wasn’t ready to stop quite yet… so I decided to continue these live video trainings into this week too! LET THE GOOD TIMES ROLL!
So we’re back for more and you can watch even more of these daily lessons as I keep creating content for you!
Today’s video was really fun, even featuring a guest appearance from a low-flying helicopter haha!
On top of all that excitement, we talked all about incorporating color into your Squarespace website design.
From color as an accent in buttons/links/logos/site titles to background sections on index pages to colored footers, we cover it all!
Alright, that’s enough intro for one video… let’s get to the goods.
Click the live video training replay below to watch now!
Color and Squarespace website design
Click play to watch the video above or on my Youtube channel
Here’s what we talked about in this video training:
Color and branding elements
Not too long ago I recorded a collab video with my friend Mariah Althoff all about how to use color as a branding element on your website, so be sure to check out that video to learn more about the similar topic.
Depending on the type of website you have (whether it’s to support a services-based business, online shop or e-commerce store, event, blog, etc.), the whole point of your website is to connect with your ideal audience, facilitate sales of your products/services/events/offerings, and attract an online audience.
Branding is a SUPER important element of any website and color plays a huge role in it. Think of it as a core pillar.
Branding elements include:
Images & photos & graphics
Etc.
Color also carries over from your website to other things like:
marketing materials
invoices
product & services receipts
free downloads or email newsletter opt-ins
social media
email marketing
Etc.
Having a solid, defined color palette is huge!
If you don’t know how to choose the colors in your color palette, you have a few options:
Work with a designer to establish an on-point brand & brand identity (always worth the money)
DIY route - search “color palettes’ and ‘color palette generator’ in Google or Pinterest
Choose 1-3 primary colors and then fill out the rest of the colour palette from there. These 1-3 primary colors will dominate your website, marketing materials, branding elements, etc. but you will need a few more for supporting color elements.
Colour & minimalist web design
Personally, I prefer minimalist web design and always choose to use color strategically as accent elements on the websites that I build.
Logo
Incorporate colour in your logo. The logo always sits at the top of a website, often in the centre or over to one side.
Site Title
You can set the color of your site title on your Squarespace website
Buttons
Squarespace has 3 different size buttons (small/medium/large) and you can style them on the back end under “style settings” and set different colors for each button type. You will use different button sizes differently throughout your website so this is a great way to use color in web design.
Color works really well for buttons that are used as calls-to-action (CTA) - learn more, buy now, purchase today, whatever type of action you want visitors to take when they’re on a web page or blog post.
Certain colors work really well for CTA buttons - red, bright orange or pink are particularly effective and convert well.
Related : How to add and style buttons on your Squarespace website
Links
Set link color on the back end ‘style settings’ of your Squarespace website. Choose a color that fits within your color palette but make sure that it’s dark enough to see and easily read on the web page.
Color & Background sections
I do this a lot on the websites that I design and you can see it in action on my own website’s home page. See how certain sections of the index page have different coloured backgrounds? Really makes those sections pop and differentiates them from what’s above and below.
As you create index pages, go ahead and set a background colour to break up the entire page, make it stand out. You can go with something really bright and eye catching, or else a color that’s softer and more subtle.
This is different from a header/banner image that sits at the top of the page.
All you have to do here is create an image file that is a solid background colour (I love using Canva but Adobe Illustrator or Photoshop also work) and then upload it to the Media setting of the page within the Index page. From here, you can add text or even images/video content onto the index page section and it will display on top of the colored background. Super easy to do but it’s a web design feature that packs a lot of colored punch!
Color in the footer sections
Depending on the type of Squarespace template that you choose, you might have up to 3 footer options, especially if you’re using one of the templates in the Brine family (which is what I always use and recommend). This is great because you have 3 different section that can be customized and you can set them up with different colored backgrounds!
Top footer section
This is my favorite place to put your email list opt-in or freebies across your website - see it in action on my own website.
Set a background colour for this top footer section using the code below:
@media all and (min-width:640px) {
.Footer-inner {
max-width: 100%!important;
padding: 0 0;
.Footer-blocks--top {
background: #d0dfe2 !important;
}
}
}
Note: this works on desktop and will revert to the normal color on a mobile screen. Also this bit of code can sometimes cause some trouble when you try to edit your footer, so if you’re ever having trouble editing the footer after the code is in use, simply copy and paste it into a note, delete/remove it out of your custom CSS, edit your footer and then paste it back in.
Colors and the photos & images you use on your website
Related : Where to find photos or images to use on your website
Pick photos & images & graphics that include colours from your color palette. If you have a custom lifestyle photo shoot, try to link those colors in the photos - e.g., the shirt you wear, background setting, accent furniture, etc.
FREE RESOURCES MENTIONED IN THE VIDEO TRAINING:
DAILY VIDEOS FOR THE LIVE VIDEO TRAINING EXTRAVAGANZA
As I mentioned, this video is for Tuesday, Day 12 and we’re continuing with another week of my Live Video Training Extravaganza! I’m PUMPED to be sharing so much free content, knowledge, information, strategies and tech tips with you for another week :)
I’ll be going live every day over on my Youtube channel again all week, sharing a free video training all about Squarespace, SEO, web design & development, online business, and a whole lot more.
We’re going to be talking about how you can grow your website, connect with your ideal audience online, attract dream clients and customers, and improve the look/feel/functionality of your website. Ready to up-level? PERFECT because my friend, you are in the right place and I’m sharing all my “secrets” to get you there.
I have a few topics in mind but I’d LOVE to hear from you! If there’s anything you want me to talk about, any questions you want answered, any strategies you want me to debunk or explain, please let me know by leaving me a comment below. I’m open to suggestions because I want to make sure that these video trainings are super valuable and exactly what you’re dying to learn from me. So don’t be shy, consider this your invitation to pick my brain! I’ll be doing another Q&A video on Friday.
See you back here tomorrow or over on my Youtube channel every day this week for even more of the Live Video Training Extravaganza! Thrilled that you’re here xoxo
