Viewing entries tagged
Squarespace Website

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

20 Comments

5 (More) Easy Codes to Customize Your Squarespace Site Like a Pro

Bold & Pop : 5 (More) Easy Codes to Customize Your Squarespace Site Like a Pro.jpg

So we've shared why we're obsessed with Squarespace, how to choose a template, and 5 seriously easy codes to customize those templates beyond what the styled editor allows you to do. Well we're not stopping there! Here are 5 more easy codes to go a step further in your customization! 

Add a Solid, Gradient, Linear, or Diagonal Background to an Index Page

This is such a fun way to add some color to your website and help separate your index pages without using an image as the background. You can do this in a few different ways: 

Before using any of these codes below, make sure you replace the URL-slug in the codes below with the URL slug of the page you want the color/pattern added to. Then you'll also want to replace COLOR with the color you'd like. 

For a solid background color, add this code to the custom CSS section of your site:

#URL-slug {background-color: #COLOR;}

 

For a gradient background, add this code to the custom CSS section of your site:

#URL-slug {background: linear-gradient(180deg, #COLOR 5%, #COLOR 90%);}

 

For a linear background, add this code to the custom CSS section of your site (change the deg number from 90 to 180 to go from vertical to horizontal):

#URL-slug{background: linear-gradient(90deg, #COLOR 50%, #COLOR 50%, );}

 

For a diagonal background, add this code to the custom CSS section of your site (change the direction to go from top right to top left)

#URL-slug {
  background: linear-gradient (to top right, #COLOR 50%, #COLOR 50%) !important;
}

 

Pop-Up Text from a Button

For text heavy sections of your website or for team member bios, a pop-up could be a really great option! When visitors click the button, a lightbox will open with the text you'd like to display. 

First you'll want to add this code to the code injection on the page you want the pop-up on. 

<link href="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" /><script src="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

 

Next, you'll want to add a code block to the page and paste the code below. This is what will display in the lightbox so you'll want to insert your text and change the ID (in bold). 

<div style="display:none;">

<div id="YourID">

<p>

Insert text here

</p>

</div>

</div>

Finally, add another code block where you'd like the button to be and paste this code. Make sure the ID matches what you added in for the lightbox above. Then edit the text that will display on the button. This code is for the medium sized button but if you want it for a small button or large, just change the "medium" in the code to "small" or "large". 

<div class="sqs-block button-block sqs-block-button">

<a href="#" data-featherlight="#YourID" class="sqs-block-button-element--medium sqs-block-button-element">Text for Button</a>

</div>

 

Hey, you! Pretty cool, huh?

Note: The pop-up will not work while you are in edit mode. Open an incognito window to give it a try! 

 

Change Button Color on Hover

Instead of just having your button color slightly fade like Squarespace's default setting, you can actually make it turn a completely different color. This helps add a fun interactive element to your website.

To add this, first set the color you'd like the button to be before someone hovers in the style editor. Then use the following code in the custom CSS section and change COLOR to be the color you'd like the button to be on hover: 

.sqs-block-button-element--medium:hover {background-color: #COLOR;}

 

Again, this code is for the medium sized button but if you want it for a small button or large, just change the "medium" in the code to "small" or "large". 

 

Create Custom Bullet Points

Sometimes the standard bullet points just don't do the trick and you're wishing you had the option for checkmarks or something else. Well you can actually create custom bullets using CSS! 

Example:

Bold & Pop: 5 (More) Easy Codes To Customize Your Squarespace Site Like A Pro

First you will need to upload the file of the icon or image you'd like to use to the Custom CSS section of your site. To find this, go to Design > Custom CSS. Then scroll to the bottom and click MANAGE CUSTOM FILES and then click ADD IMAGES OR FONTS. You’ll upload the file there.

Then add the code below replacing URL HERE with the URL you just added to the custom files (click on the file and it will automatically add the URL into the custom CSS). You'll just want to copy and paste it into this code in the correct spot. 


ul li:before{ 
content: ' '; 
display: inline-block; 
background-image: url(https://URL HERE); 
background-repeat: no-repeat; 
background-size: 18px; 
background-position: center; 
width: 18px; height: 18px; 
position: absolute; 
margin-left: -25px; 
margin-right: 0px; 
margin-top: 8px; 
margin-bottom: 0px; 
}

If the above code shows your new bullet points but still has the old bullet points as well, add this piece of code to our custom CSS as well!

ul[data-rte-list] li>*:first-child::before { content: ""; }

 

Make Images Circular on a Summary Block

You know you can have the thumbnails on the summary block be different sizes but what about making them circular? If a circular image works better than a square or rectangle on your site, use the code below to get the summary block thumbnails to automatically load as circles. (Make sure your thumbnails are square or this code won't make them complete circles!) 

.summary-thumbnail img{  
 border-radius: 50% !important;
  padding: 5px;
 }

Bold & Pop: 5 (More) Easy Codes To Customize Your Squarespace Site Like A Pro

And there you have it! Five more easy ways to customize your Squarespace website using code to make it feel more unique and on target with your brand!

Need a few other ideas on how to customize your Squarespace site without using code? We have you covered with those ideas too!

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

20 Comments

Comment

Bold & Pop Takes on SkillPop in Raleigh

Bold & Pop : Bold & Pop takes on SkillPop in Raleigh

We are insanely excited for our latest announcement (we have plenty more coming! Eeekkk!) and this one is for all our Raleigh-area bosses! I’m going to be teaching a Squarespace basics class through SkillPop! YAY! If you’ve ever wanted to learn how to build your own site or you don’t think you’re utilizing your current template to your benefit, this class is for you!

If you haven’t heard of SkillPop and you live near either Charlotte or Raleigh (they also just went on tour around the Southeast!), you need to look them up. They host pop-up classes taught by area experts and they have everything from cookie decorating (yum!) to handlettering to Adobe Illustrator and blogging classes. Basically they have a little of everything and I’m seriously excited to bring the first Squarespace class to the Triangle! WOOO!

Here’s the 411:

The class will be on May 31st from 6:30-8:30pm at The Mayton Inn in Cary and is just $28. During the two hour class, we’ll be going over:

  • Introduction to Squarespace: Benefits and features

  • How to set up an account through Squarespace

  • How to choose a template for your business, blog, or brand

  • The basics of building your pages and site

    • How to structure your site

    • Different types of content pages and how to create them

    • How to add various design blocks

      • Images, text, buttons, galleries, etc.

    • How to use the style editor for a custom look

    • How to connect social accounts

    • Back-end SEO

You can follow along while I show you how to do each of these steps or you can sit back and take it all in because during the second half of the class, you’ll be setting up your Squarespace account (Yay for free trials!) and start designing your own website! I’ll be on hand to answer any questions, provide guidance, and design feedback. You’ll also receive a handout to bring home with you that will have tips and tricks so you can finish everything up at home!

Bold & Pop : Bold & Pop takes on SkillPop in Raleigh

I don’t want you to just learn how to create a website that is just “good enough”. I want to help you learn how to use all of Squarespace’s features to give your website the custom design you’re looking for!

Not in the Raleigh area? Don’t worry, we’ll actually have classes like this in the Bold Boss School once our classes launch!

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

Comment