2 Fun Ways To Customize Your Announcement Bar In Squarespace

 
2 Fun Ways To Customize Your Announcement Bar In Squarespace

One of the funnest things about being a Squarespace designer is learning fun tricks to help Squarespace's starter templates look more custom.

It's honestly amazing what you can do with a little imagination and simple CSS code.

So today I'm gonna show you how to snazz up that announcement bar of yours! It's gonna look so custom and on-brand and YOU'RE GONNA GRAB SO MUCH ATTENTION by making it stand out from normal announcement bars!


K so first thing's first, what the heck is an announcement bar and what do you need to know about it?

announcement bar regular.png

An announcement bar* is a clever little marketing tool built into Squarespace that helps you highlight things going on with your blog or business.

You can use announcement bars to:

  • Promote your newest blog post or project
  • Highlight a special sale you're having
  • Lead potential subscribers to your opt-in
  • Promote an affiliate product
  • Let visitors know your availability (like what months you're booking for or if a spontaneous spot opened up in your calendar)
  • Or simply use it to relay important information (like if your project calendar is full for the rest of the year or to let people know you're away on vacation!)

When enabled, you'll find the announcement bar at the very top of your Squarespace website (see image above).

You can enable and customize what your announcement bar says by going to Design > Announcement Bar (see images below). Be sure to add a click through link!

*Squarespace announcement bars are a premium feature (more info on premium features here).

To customize your announcement bar's font and colors, head to the Design panel and click Style Editor.

Inside of the Style Editor you can click the announcement bar to make it's font and color tweaks show up on the left (screenshot below).

Clic

After you select your font and colors you'll hit Save then it's time to customize with a lil CSS! Keep scrolling for my two favorite customizations 


Customize your Squarespace announcement bar with a customized, branded texture or pattern

Customization #1: Add a branded texture or pattern to your announcement bar

If you saw my post on customizing your Squarespace navigation with an image, this tutorial is gonna seem super familiar! 

I love this quick customization because it's an opportunity to bring in a branded pattern/texture that ties your whole site together.

(Design tip: If you're wondering how to build consistency in your brand, here's a great opportunity! Think of other places you could use this pattern/texture in your marketing and use it to build a super cohesive brand identity. Tr adding it as: a background or border for your social media graphicsa pattern on your business cards or even a digital or print invitation!)

Mmmkay. So first you'll need to find an image or pattern to use. Maybe you have something on hand, otherwise try going somewhere like Unsplash or Creative Market to source an image.

**Be sure to go with something simple and subtle. You definitely wanna grab attention - just make sure your text stands out against the background!**

    Ok! Here’s the cODE WE'LL BE USING for this customization:

    /*CUSTOMIZE ANNOUNCEMENT BAR BACKGROUND WITH AN IMAGE*/
    .sqs-announcement-bar{
    background: url(IMAGEURLHERE.jpg);
    }

    Here's what you do with it (video demo below):

    • Copy and paste the code above into your Custom CSS panel (Design > Custom CSS).
    • Delete /s/IMAGE-FILENAME-HERE.jpg (in pink above) but make sure your cursor stays in between the parenthesis!
    • Scroll down to "manage custom files", click through then click "add images or fonts".
    • Find the image you want to use for your background then select open.
      • As you can see in the video I went ahead and resized my pattern into a wide thin strip to customize the scale of the pattern.
    • After your image uploads, click the thumbnail image and it should fill in it's image URL where your cursor was.
    • Remember, you may need to resize or adjust your image (using something like Photoshop or an online photo editor) to help you properly position your background.
    • Double remember! Make sure you use a simple, not busy image that offers enough contrast against the text above it. Use a light font color if you have a dark/bright background, or a darker color if your background is lighter.

    Customization #2: Add an animated gradient to your announcement bar (watch demo above)

    Big, big shoutout to fellow Squarespace Circle member Marksman Studio for sharing a breakdown of the gradient animation code. This was something totally new for me and so fun to learn - be sure to check out Mark's original post if you wanna take a deep dive into the code!

    So I saw the post, got really jazzed and immediately was like, "YUP I'm doing this on my announcement bar" haha. It honestly makes me so happy every time I land on my site!

      Here’s the cODE WE'LL BE USING for this customization:

      /*ANIMATED GRADIENT ANNOUNCEMENT BAR*/
      .sqs-announcement-bar {
      {background: linear-gradient(99deg, #ff6460, #ebeecf);
      background-size: 400% 400%;

      -webkit-animation: AnimationName 6s ease infinite;
      -moz-animation: AnimationName 6s ease infinite;
      animation: AnimationName 6s ease infinite;

      @-webkit-keyframes AnimationName {
      0%{background-position:0% 51%}
      50%{background-position:100% 50%}
      100%{background-position:0% 51%}
      }

      @-moz-keyframes AnimationName {
      0%{background-position:0% 51%}
      50%{background-position:100% 50%}
      100%{background-position:0% 51%}
      }

      @keyframes AnimationName {
      0%{background-position:0% 51%}
      50%{background-position:100% 50%}
      100%{background-position:0% 51%}
      }

      @-webkit-keyframes AnimationName {
      0%{background-position:0% 49%}
      50%{background-position:100% 52%}
      100%{background-position:0% 49%}
      }

      @-moz-keyframes AnimationName {
      0%{background-position:0% 49%}
      50%{background-position:100% 52%}
      100%{background-position:0% 49%}
      }

      @keyframes AnimationName {
      0%{background-position:0% 49%}
      50%{background-position:100% 52%}
      100%{background-position:0% 49%}
      }}

      Now. I know that code looks pretty intense but I PROMISE I've made this reaaally easy for you!

      All you need to do is:

      • Copy and paste the code above into your Custom CSS panel (Design > Custom CSS).
      • Delete the hex codes I have in pink (at the very top) and replace with hex codes for two of your brand colors.
        • Make sure to use colors that offer contrast. Think a light color and dark color, bright color and light/dark color, etc. 
        • And of course make sure it gives enough contrast so you can easily read the announcement text above it 
      • Click save - BOOM!

      Okay that's it for today! Let me know if you try out either of these CSS customizations - I'd love to see what you create.

      AND A SPECIAL ANNOUNCEMENT! My buddy Jo (remember when I introduced you here?!) has a new Facebook group dedicated to helping Squarespace users sort through their CSS probz.

      You'll get the most out of it if you're somewhat sufficient with CSS, but don't worry if you're not cuz Jo's got a free course here to help you out! Actually check out all of her courses because holy shit these are awesome AND ALSO FREE.

      And If you wanna browse more posts just like this, have a scroll through Some of these: