Viewing entries in
Branding & Web Design

Comment

3 Built-In Features You Didn’t Know Squarespace Had

Bold & Pop : 3 Built-In Features You Didn’t Know Squarespace Had

Have you ever seen another Squarespace site and thought to yourself, “How the heck did they do that?” Sometimes it’s custom CSS but other times, it’s actually a built-in feature! But sometimes those features are slightly hidden so you don’t quite know where to find them. Not to worry though, we’re sharing 3 of our favorite built-in features and how to implement them!

Form pop-up from a button

Want to hide a form by simply having it pop-up from a button? Something like this:

This is a great option if you want to keep the page short or you have a really long form. To implement this, go to insert a form like you normally would. Once you have all the fields you want added to the form and your storage option chosen, go to the Advanced tab. Scroll all the way to the bottom and click on Enable Lightbox Mode. This will turn the form into a pop-up from a button. Under the enable checkbox, you can also update the text that displays on the button.

The button will default to be left aligned but if you want it centered or right aligned, you can scroll back to the top of the Advance tab and adjust the alignment there!

Animated images

A fun and creative way to help improve your user’s experience is by having small animations. This can help draw your visitor’s eye to specific sections of your site and help guide them to the information that is most important to them. Luckily, Squarespace now has this feature built-in for images! Check it out:

Bold_and_Pop_Hustle_Hard_Wallpaper.jpg

How fun is this?!

So fun!

To implement this on your own, upload an image like you normally would on Squarespace. The go the the Animations tab on the top of the image edit box. In there you can choose which animation you’d like.

If you choose one of the design options with text on top, you can also animate that! You just have to choose the Custom option from the Animate Image Block dropdown. Then you can choose how you want the image to be animated and then how you’d like the text to be animated too!

Alternate social sharing image for blogs

You know when you make those eye-catchy graphics for your blog posts? The ones that are perfect for when people pin your blogs to Pinterest? You know how they also get cut off funky when you post to Facebook and LinkedIn? Well you can now give each individual blog post an alternative image that will be shared in those instances!

To add this image, you’ll want to go to that individual blog posts settings. In the settings, go to the Social tab and there you’ll see you can upload a new image!

And there you have it, three easy to implement features on Squarespace that will help your site look and function just a little bit better! Leave us a comment if there are other features you’d love or you’d like to know how to implement!

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!

Comment

Comment

Why Consistency is Key When it Comes to Your Branding and Website Design

Bold & Pop : Why Consistency is Key When it Comes to Your Branding and Website Design

When it comes to your website or branding, have you ever wondered… How many colors should you have? What about fonts? And how do you make photos look cohesive when they’re from different sources? BINGO, the answers to all of these questions is what makes up your brand identity! Which is why it’s so important that they stay consistent. This is something we help our clients do every day, but whether you’re working with a designer or working on it yourself, here are some good guidelines to follow.

Keeping it Consistent Across the Board

Okay, before we get into the nitty gritty, let’s talk about why it’s important to keep your branding consistent in general. If you still need some help with sorting out your branding design we have a post on that too, but for the purpose of this post, I’m going to assume you already have your branding design and voice all set. So here’s the deal, the logos, colors, fonts, and branding guidelines you developed during that process? You should be following those and using them everywhereeeee. That means, your website… social media… business cards… flyers… those branding elements should appear on all of the above. In other words, you shouldn’t have two fonts on your website and then two others on your social media quote graphics.. and then 2 others on your business cards. I know that may sounds superrrr basic, but the reality is so many people spend time developing these things and then then they don’t stick to them… 🙈Now, that doesn’t mean everything is going to look cookie-cutter either… you can totally have fun with things, but keeping things consistent is key to your brand recognition.

Picking Your Brand Colors

When it comes to picking your brand colors, consider the 60-30-10 rule. Essentially this is a design principle that breaks things up into using your primary colors in 60% of the space, secondary colors in 30% and accent colors 10%. Now that doesn’t mean you can only have 3 colors in your branding… you know we’re BIG color lovers over here at Bold & Pop, but the key is that they should break down into those categories. Typically, in our designs, we’ll use between 3-6 colors. That means 2 colors usually fall into the primary, 2 in the secondary and 1 or 2 in the accents. Again, this doesn’t mean that these colors are going to all be in everyyyy piece of material you put out, but these are some of the key visual distinctions for your brand vs others.

Selecting Fonts for your Website

When it comes to fonts, usually logos include one or two different fonts and if possible, these should also be used throughout your website. Now, if you have a hand-lettered logo, then that might not be possible, but typically you should only have two, maybe three fonts throughout your website. Anything more and things just start to look crazy. The same guidelines go for font sizing. We suggest having one font for your Header 1 (if you have a primary font in your logo use this one), and then for your Header 2 and 3 we recommend using another font with two different sizes and then you’ll have your Body text. Anything more than that and you’ll potentially lose your audience from your actual copy because they’ll be distracted by everything going on with your fonts.

Editing and Selecting Photos and Graphics For Brand Cohesion

The final component of keeping things consistent is making sure your photos flow together. Sometimes that can seem tricky when you’re pulling photos from different time periods or photo shoots though. The key is all about the editing style. You can like dark and moody images and bright and airy at the same time, but when it comes to your website you’re going to need to pick one style you think fits your brand more. Lighting and tones are crucial so those are another thing to consider when selecting your images. Sometimes a little editing in photoshop, other editing software or presets are all you need to tie things together, but those will only get you so far so it’s important to think about these things when selecting photos from the start. Another thing to consider is sometimes you’re going to need some additional stock photos to fill in needs you don’t have photos for. Again, take a look at the lighting, tones and colors used when you make your selections for a cohesive mix.

Next up is graphics styles. If you’ll be using some sort of illustration or icons throughout your website you’ll also want to pay attention to the style. While you can certainly mix and match sometimes, it’s tough to get hand-drawn elements and then structured modern graphics to work in the same design. So keep that in mind when you’re creating them or selecting vectors. We totally get it too, sometimes you just have a tonnnn of different ideas and you want to try to do them all. Keeping things simple and clean will always be the best plan of attack though. That’s a big reason why a lot of people work with designers too so that we can take all of your ideas and create one cohesive design! So keep it clean, keep it simple and let it be your fun website and branding design that captures your audience’s attention and not the 4 different fonts and clip art mess you put on your homepage. As always, if you need some help reining things in, we got you!

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!

Comment

3 Functional CSS Code Snippets You Need for Your Squarespace Website

Bold & Pop : 3 Functional CSS Code Snippets You Need for Your Squarespace Website

Whether you’re a fellow Squarespace designer or someone looking to spruce up their current website, we know how much you love our Squarespace coding snippets and tutorials that we give soooo we’re back with some more! In case you didn’t catch the first five (like adding a custom font to your site, you can get them here or five more we provided, you can get those here too!)

Usually the code snippets we share are fun design elements to make your site look awesome but what about the times you need something to just function better from a user experience point-of-view? Today we’re talking about some of those fixes! We’ll be sharing:

  • How to remove hyphens on mobile

  • How to hide the dates on your blog posts

  • How to force the titles in your grid gallery to wrap so all the text will display

Alright now let’s get to the good stuff!

Remove hyphens on mobile

How many times have you finalized your site to be just the way you want only to look at mobile and see half of your headers hyphenated? It looks messy and can make it hard to read your text. Luckily, adding the below text to the Custom CSS section of your site will fix this problem in 2 seconds! To find the Custom CSS section of your site, go to Design > Custom CSS.

p, h1, h2, h3 {
     -webkit-hyphens: manual !important;
        -moz-hyphens: manual !important;
         -ms-hyphens: manual !important;
             hyphens: manual !important;
   }

Remove blog date

Removing the dates of your blog posts might seem like an odd thing to do but if you have evergreen content, this is essential to keeping that content relevant! If you have a great blog post from 2017 that’s still relevant today, then visitors might discredit the post since it’s “old.” So you can see why it might be a good idea to remove the dates. To do this, you’re going to add the below code to the Custom CSS on your site.

.entry-title-wrapper .date { display: none; }

Force title in grid gallery to wrap

Don’t you just hate when you get your grid gallery looking amazing on your desktop and then you make the screen smaller or look on mobile and the text collapses but doesn’t display all of it? This is almost always an issue for us on client sites but we have an easy solution for you! Add the below code to your Custom CSS and voila! Your text will wrap now!

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
     white-space: normal; 
     line-height: 1.5em;
 }

And there you have it! Three simple codes to add to your site to help improve the functionality and user-experience no matter what screen size they have!

Please note: Because we can’t see the backend of your website, we do not provide assistance with the above code snippets.

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!