Viewing entries tagged
Squarespace Website Design

Comment

How to Add Hover Animations to Your Squarespace Website

Bold & Pop : How to Add Hover Animations to Your Squarespace Website

Something we've totally become obsessed with lately at Bold & Pop is hover animations on your website! What is that? It's when you scroll over an image or button on a website that changes to something else when you hover over it. Watch the branding party button below! 

Bold & Pop : How to Add Hover Animations to Your Squarespace Website

See the confetti?! 🎉 How fun right?! We implemented this design technique on #ThePopShop and we've had so many people ask us how we did it so today I'm spilling the beans on the steps to make it happen on your website too! It's SUPER easy too so I'm excited to share. If you've been following along for awhile, you know that Squarespace is our web design platform of choice so today's post is specific to that. 

Step 1: Create Your Graphics

The first step to creating hover animation graphics is to design the graphics that you will be including. You'll need two options, the image that will appear when people visit your website to begin with, and then the image that will appear when you hover over the image or button.

Option 2

Option 1

Bold & Pop : How to Add Hover Animations to Your Squarespace Website
Bold & Pop : How to Add Hover Animations to Your Squarespace Website

If you're using text like we did, you'll want to make sure everything lines up exactly except for the things that will vary. So for example, I made sure the Branding Partay!! text was exactly the same in each graphic and I just added an element (the confetti) in the second option. 

Step 2: Upload to your Squarespace Website

The next step in the process is to upload the image to Squarespace. You can do this easily by adding text and hyperlinking the word to upload a file. Squarespace has a page specifically on this if you haven’t done it before. What you’ll want to do is click the “files” options and then you can upload your file.

Bold & Pop : How to Add Hover Animations to Your Squarespace Website
Bold & Pop : How to Add Hover Animations to Your Squarespace Website

Click “add link” when you are done. The nice thing about using a hyperlink is now you can easily get the url or where that file is located, which you’ll need for the next step. If you haven’t done this before it can be a little confusing at first so I added a video below.

Step 3: Implement Code on Your Website

Once you have those links, it’s time to move onto the last step! Start by adding a code block to the part of the page you would like and then copy and paste the code below into that block.

<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

Now it’s just a matter of a little copy and paste action! Start with the first image and place that code within the quotation marks for the first image. Since it is a hover image you will enter this URL into the front of the code as well as the end. This tells your website that you only want the second image to appear when the mouse is over it. Once you have the first entered, repeat the process for the second image and add that URL into the code. Click save and wa-lah you did it! To see your handy work you can refresh the page or view it on your website in live mode (it won’t show up in edit mode).

We've had so much fun with this and hope you will find creative ways to use it on your site as well. If you need some inspiration ideas for what you can do feel free to check out some of the other hover graphics we designed for #ThePopShop!

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

Comment

Comment

Ducks in a Row Branding Design

Bold & Pop : Ducks In A Row Events Logo Design

Sometimes we get the opportunity to work with local clients and actually meet them in person which is always a treat! That was the case when it came to Ducks in a Row Events, a Washington-based business!

They were in the process of changing their business name and needed a new look to go with their new name! We were more than happy to help make their vision a reality.

The Project:

The Design:

After meeting with the ladies behind Ducks in a Row Events and receiving their questionnaire, we knew they wanted something to reflect their new name a little more.

Here are the main things we focused on during their project:

  • Adding more bold colors to their brand

  • Incorporate some waves or swirls to give the illusion of movement

  • Create a brand that is both professional with a little fun twist

Bold & Pop : Ducks In A Row Events Logo Design

Once we received approval of the inspiration board, we got to work on their logo concepts. We played with the new colors as well as different duck silhouettes, wave effects, and fonts. Here’s a look at our initial logo concepts:

Bold & Pop : Ducks In A Row Events Logo Design

The ladies at Ducks in a Row Events really liked the duck and wave shape from concept 1 but wanted to see a few other options for the layout of the logo. Here’s what we came up with:

Bold & Pop : Ducks In A Row Events Logo Design

And just like that, they loved concept 3! Here’s the final logo:

 
Bold & Pop : Ducks In A Row Events Logo Design
 

Not only were we thrilled to work with some local Washington ladies but we were also so excited to help them transition into their new brand name and stage in business! We loved working with them and we especially love how the logo turned out!

Bold & Pop : Banner
Bold & Pop : Digging what you see? Let's Work Together! Branding and Web Design Package
Name *
Name
Bold & Pop : Banner

Comment

Comment

Practically Married Website Design

Bold & Pop : Practically Married Squarespace Website Design

introoooo about project

The Project:

Bold & Pop : Practically Married Squarespace Website Design

The Design:

Working with Paula to bring her business’s website to life was such a joy. Paula was a dream client because she knew exactly what she wanted but just needed some help bringing that vision to reality. Here are a few things that we considered during the design process.

  • ConvertKit integration

  • Simple and easy-to-update

  • Clean and modern design with mass appeal to multiples audiences

The biggest keys with Paula’s website was that she wanted a simply and modern design and something that would be easy for her to update on her own (one of the big reasons why we love Squarespace)! Here’s a peek at how the design turned out.

Bold & Pop : Practically Married Squarespace Website Design
Bold & Pop : Practically Married Squarespace Website Design
It was an absolute pleasure to work with Bold & Pop to create PracticallyMarried.net. They listened to and executed my ideas, but also provided suggestions and feedback. I particularly appreciated their patience with my edits and the quick turnaround time. Once the site was complete, Bold & Pop provided thorough training to prepare me to take over ongoing site updates.

I highly recommend Bold & Pop for their Squarespace expertise, attention to detail and their demeanor while interacting with clients.
— Paula, Practically Married
Bold & Pop : Practically Married Squarespace Website Design
Bold & Pop : banner
Bold & Pop : Diggin' what you see? Let's work together!
Name *
Name
Bold & Pop : banner

Comment