Viewing entries tagged
Squarespace

Comment

2019 Website Trends: Micro Animations and How to Do Them

Bold & Pop : 2019 Website Trends: Micro Animations and How to Do Them

If you haven’t noticed having an interactive element to your website has become increasingly more popular over the last few years. And we’re here to tell you this trend isn’t going anywhere anytime soon!

Luckily, you don’t have to go crazy when it comes to adding these interactive elements. Think banner slideshows, rotating testimonials, hover animations, and our new favorite… micro-scroll animations! This is where an element appears on your screen (slides in, floats up, bounces in, etc.) as you scroll through the site. Having an interactive element like this on your website keeps the user engaged and actually helps improve their user experience as well!

Keeps the User Engaged:

Our eyes are naturally drawn to movement meaning that elements appearing upon scrolling is more visually interesting than static text and images. This means your website visitor’s interest will be held longer as they continue to scroll further down your page.

Improves User Experience:

Along with keeping users’ engaged, scrolling animations can help direct your website visitors around your website. These animations can help draw attention to specific sections or key content on the page. It’s almost like giving your visitors a map of where they should go next while on your site, but in a fun and interactive way! For example, you may have static text and the animation piece is when a “Read More” button appears as users begin to scroll. Their scrolling indicates that they have finished reading and are now ready for the next action on the site (the “Read More” button). This helps provide them with easy navigation throughout the site and ultimately, a positive user experience.

So what do micro-scroll animations look like?

There are a lot of options out there but here are a few examples:

Fade In

Slide Up

tada



Cool! How do I add this to my site?

First thing you need to do is add the below code to your sitewide code injection. To find this, go to Settings > Advanced > Code Injection and then copy and paste this into the header code injection.

<!--Micrco-Scroll Animation Code Injection-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Next up, you need to add a code block to the page you’d like the animation on. (Pro tip: Make sure this block is below what you’re animating or it won’t work. We typically add it to the bottom of the page!)

Once you add the code block, copy and paste the below code into the block. You then need to change the spot where it says #block-name and className. Block name is the block ID so you can target that specific content block to animate. If you don’t know how to find this and you use Chrome for your browser, add this extension.

Then to change the className, you want to head over to this site. Here you can see the different types of animation options available. Once you choose, the className is literally just the name in the dropdown you chose (case sensitive!).

So you’ll simply add the #block-name and className to the code in the code block then hit save!

<!--Code Block-->

<script>
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
</script>


<!-- Duration -->
<script> $('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'}); </script>


<!-- Init. script -->
<script>
       new WOW().init();
</script>

If you want to add more lines than the 5 provided (or you have less than 5), just add another (or delete the remaining):

$('#block-name').addClass('wow className');

at the end before </script>.

If you want to have the same animation for all, you can just add the #block-names all in the same section. For example, it would look like:

$('#block-name, #block-name, #block-name').addClass('wow className');

in that particular section of the code.

And last but not least, if you want to change the timing of your animations, go to the section that says <!-- Duration -->. You’ll add the #block-name again and then you can adjust 'data-wow-delay':'0.4s'. For example, it would look something like:

<script>
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'});
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.5s'});
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.6s'});
</script>

This will change the timing of when your animations float onto the page (like the examples we provided above).

And there you have it! Simple animations to make a BIG impact on your Squarespace site!

If you add this to your site, we’d love to see! Drop a link to your site in the comments!

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

Comment

Comment

2018 Year in Review: Celebrating our Biggest Wins and Fav Projects

Bold & Pop :: 2018 Year in Review: Celebrating our Biggest Wins and Fav Projects

2018 is on its way outta here! This year was really a transformative one for our business. We grew a TON… 38% to be exact, hit a lot of our yearly goals early and just felt like we reallyyyy hit our stride. Now don’t get us wrong, it wasn’t all easy and breezy and we learned a lot of great and not so great lessons along the way, but it was a year of so much growth and that’s where the gold is at.

Before we get to the celebration part of our year though we want to take a minute to THANK each and every one of you reading — the ones who have worked with us, the ones who have tuned in to our blog, the ones who are a part of our Facebook Group or the ones who follow us on Instagram or another social media channels! YOU guys are the ones who have showed up for us around each bend and are the reason we have had such an amazing year, so for that we truly want to thank you for being apart of our journey. You da best! 🙌🏻 Now with that, let’s get down to some of the things we accomplished this year shall we?

Bold & Pop :: 2018 Year in Review: Celebrating our Biggest Wins and Fav Projects

Eek! See, we told you it was a big year! And this is just a glimpse! Another one of our favorite things to do at the end of the year is to reflect on our work and some of our favorite projects. Although, this one is always tough because we really do love alllll of the projects we take on! Here’s a peek at some of our favs!


Favorite Squarespace Website Design Projects of 2018

Bold & Pop :: 2018 Year in Review: Celebrating our Biggest Wins and Fav Projects

Magnolia Rhapsody

This simple site got a few custom features to give it the oomph it deserved! Layered photos and graphics with micro scroll animations gave it just the touch it needed.

Bold & Pop :: 2018 Year in Review: Celebrating our Biggest Wins and Fav Projects

Run Like Clockwork

Another site we really got to flex our creative muscles on! Everything from hover animations to pop up text! There was a new interactive element around every corner.

Bold & Pop :: 2018 Year in Review: Celebrating our Biggest Wins and Fav Projects

EC Beauty Studio & Spa

Can you really go wrong with a gorgeous spa website?! We wanted to keep that tranquil vibe while also giving her a bold look. Color gradients and photo selection did just that!


Favorite Social Media and Influencer Marketing Campaigns

While we worked on some amazing design projects this year, 2018 brought us more social media clients than previous years. However, since those campaigns are typically in progress, you don’t always get to see the work we put into them. Most days we’re behind the scenes planning out their content on a weekly basis, taking photos for their content, networking with others, and executing influencer marketing campaigns to name a few pieces of each campaign. Here’s a peek at some of our biggest campaigns for the year:

Bold & Pop :: 2018 Year in Review: Celebrating our Biggest Wins and Fav Projects

Fitness Industry Social Media & Influencer Marketing Campaign

Bold & Pop :: 2018 Year in Review: Celebrating our Biggest Wins and Fav Projects

Beauty & Hair Industry
Influencer Marketing Campaign

Bold & Pop :: 2018 Year in Review: Celebrating our Biggest Wins and Fav Projects

Health and Wellness Industry 
Social Media Campaign


Favorite Branding Design Projects of 2018

Bold & Pop :: 2018 Year in Review: Celebrating our Biggest Wins and Fav Projects

EmpowerHER

Working with kickass women is our fav and Kacia Fitzgerald is a powerhouse! So when she decided to launch a podcast and team up with us on the branding… Eek so exciting!

Bold & Pop :: 2018 Year in Review: Celebrating our Biggest Wins and Fav Projects

Pink Lover

It’s no secret we love pink over at Bold & Pop so when we got the opportunity to design a logo for an ecommerce shop dedicated to the love of the color, we were in design heaven! 💕

Bold & Pop :: 2018 Year in Review: Celebrating our Biggest Wins and Fav Projects

Koket Boutique

Being a part of Koket Boutique’s journey this year was incredible! We brought her brand to life with a colorful, yet simple and sophisticated logo and a brand new website this year!


We knew 2018 was going to be big but the growth we’ve had and the projects we’ve been able to work on have completely blown us out of the water! Cheers to 2019 and all it has in store for us!

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

Comment

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