Viewing entries tagged
Squarespace Customization

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!

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

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