Viewing entries tagged
Web design

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

9 Comments

6 Commonly Overlooked Parts of Your Websites That Lead to Missed Opportunities for your Biz

Bold & Pop :: 6 Commonly Overlooked Parts of Your Websites That Lead to Missed Opportunities for your Biz

Whether you already have your website built, are in the midst of building it or are planning out the design, there’s a lot to consider and a lot of important elements that can easily slip through the cracks… But who wants to let any of those important details slide? We surely don’t and we definitely don’t want you to miss any opportunities because of this either. So let’s talk about the most commonly overlooked parts of websites that lead to missed opportunities for your biz so you never miss a beat again!

About Page

We totally get it… it’s hard to write about yourself and we often think no one cares about who we are. But this is where your clients/customers come to get to know you better and, trust us, you don’t want to overlook this page, no matter how hard it is to craft the perfect bio or story. People want to work with and purchase from brands they like and trust and this is where that all starts. 

Your About page is where you can share your story with personal touches that will help you connect with your audience on another level. You can include reviews/testimonials or press logos to help show your expertise and build trust further. This is where you can reallyyyy start to your audience what it would be like to follow, work with, or purchase from you so don't underestimate the importance of this page!

If you’re having trouble crafting the perfect About page, don’t worry… we have you covered with some tips here.

UX Design

UX design is the experience your user has as they navigate through your website and you want to make sure it's a positive one! But you don’t need to be an expert in UX design to start implementing it throughout your website. You'll want to spend some time mapping out how your audience will flow through your website so they have the best experience possible by being able to easily find the information they are searching for. There are a few things you can easily do to help improve your UX design including:

  • Simplify your navigation

  • Implement calls-to-action throughout your site

  • Keep your most important information above the fold

  • Highlight your brand's purpose on your homepage

Looking for more on how to improve your UX design? We go more in-depth with these 5 easy improvements here.

Showing Personality

Adding personality on your website through copywriting and visuals helps you stand out and makes your brand memorable. We can’t tell you how many people comment on how much they love our bright colors and the way we talk on our website (#realtalk, y’all!) and while that may not work for you, it’s important to find a way to infuse your own personality and branding throughout your site.

Similarly to your About page, this gives your audience a better idea of who you are and what it would be like the work with or purchase from you. It may seem like a little detail but it will have a huge impact.. Trust us!

Information Collection

Chances are no one is going to hire you or purchase from you the first time they visit your website. It typically takes at least 7 points of contact with a prospect before they hire/purchase which means it’s important to stay in contact with them. A great way to do this is through information collection including:

  • Email newsletter signup

  • Linked social media accounts

Having both an email newsletter signup and linked social media accounts allows you to continue your connection with warm, qualified leads (they’re warm, qualified leads because they opted to stay connected with you in another way.. score!). This allows you to continue to connect with this audience, ultimately leading to future clients or sales.

Responsiveness

It’s easy to get caught up in designing your website for desktop viewing and completely forget about what it will look like on other devices. However, in this day and age, that’s a HUGE mistake! Approximately 50% of web traffic (give or take depending on industry) is from mobile devices so you can see why it’s so important. Before launching or any time you make an update, check your website on a mobile device to make sure it looks just as good as your desktop version!

P.S. If you’re on Squarespace, your website is automatically responsive! (Although always check it anyway.)

Blog

Not convinced you need a blog for your website? While it can be a time-consuming process and just one more thing to add to your to-do list, there are some serious benefits including:

  • Establish expertise

  • Content to share with your audience

  • Drive traffic to your website

  • Improve SEO

If that’s enough to convince, make sure you create a strong content strategy… You don’t want to just post to post! You need to post strategically to your blog to have the impact you desire. You can do this by planning out content ahead of time and making sure it’s tied back to your main focus as a brand.

So have you overlooked any of these factors on your website? Don’t worry! They are always things that you can incorporate now or work on implementing later. Just make sure you take the time to evaluate which (if not all) of these will work for your brand and get to it! Don’t miss another opportunity!

If you need a little extra help with implementing these our your Squarespace site, we’re your girls! Shoot us a message to chat.

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

9 Comments

10 Comments

5 Easy Codes to Customize Your Squarespace Site Like a Pro

Bold & Pop : 5 Easy Codes to Customize Your Squarespace Site Like a Pro

By this time you probably know how obsessed we are with Squarespace. Its ease of use and versatility no matter what type of business you have is a huge win-win! One of the best parts of Squarespace is their templates. All their templates are modern and professional so even if you’re just starting out with your biz, it won’t look like it! Yay! (Need help picking a template? We’ve got you covered!) While it’s really easy to customize each template using the style editor and various blocks and features, we’ve rounded up some of our favorite and most popular pieces of coding to help give you a seriously custom look!

Custom Fonts

This is by far the most common code we add to sites especially for brands that use very specific fonts. This way you can keep your branding consistent throughout your website and other marketing materials.

You will need to first upload the font file in 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 font files there.

Use the code below and replace “Font-Name” with the name of your font and change the url to be the url of the font file you just added (if you click on the file after it loads, the link will show up in the Custom CSS field and you can copy and paste into the code).

The code should look something like this:

 

@font-face {

    font-family: Font-Name;

    src: url      (https://URL HERE);}

 

To use the font for the following text, you’ll need to add this additional code (Use the font name you used for the font-family above where it says Font-Name):

Headers:

h1, h2, h3 {

    font-family: Font-Name !important;

    }

Body/Paragraphs:

body, p {

    font-family: Font-Name !important;

    }

Bold Banner Text:

desc-wrapper, strong {

    font-family: Font-Name !important;

    }

If this code isn't working for you, here's the tutorial we used

Change Color/Thickness of Line Block

On some templates in Squarespace you are able to change the Line Block color through the Style Editor but on others, your only option is the default color for that template (usually grey or black). If you can’t adjust the color of your Line Block in the Style Editor, you can use this code to adjust both the color of your Line Block as well as the height/thickness. You'll want to replace #COLOR with whatever color you'd like and adjust the height accordingly as well. 

 

.sqs-block-horizontalrule hr { 
  background-color: #COLOR; height: 5px !important; }

 

If you just want to adjust the color, simply add this code without “height: 5px !important;” and vice versa for if you just want to adjust the height.

Change Social Media Icon Colors

Just like with your Line Block, on some templates you can adjust the color of your social icons in the Style Editor. However, if you can’t adjust, use the following code for the knockout style social media icons. Again, replace #COLOR with whatever color you desire! 

 

.social-icons-style-knockout.social-icons-color-black .sqs-use--mask {

    fill: #COLOR !important; }

 

They’ll look at little something like this

Collapsable FAQ

Love those FAQ sections where it just displays the questions and you have to click the question for the answer to open? Like this! We’re sharing how you can do just that with your Squarespace site!

First, you need to add the below code in the site-wide Code Injection. To find this, go to Settings > Advanced > Code Injection Header:

 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

 

Then, you need to add the jQuery script below to the page specific Code Injection. To find this, click the “gear” icon next to the page you want to add the FAQ to and then go to Advanced tab and voila, the Page Code Injection:

 

<script>

    $(document).ready(function(){

    $('.markdown-block .sqs-block-content h2').css('cursor','pointer');

    $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();

    $(".markdown-block .sqs-block-content h2").click(function()     {$(this).nextUntil("h2").slideToggle();});

    });

</script>

 

Then you will need to add a Markdown Block on the page with the following structure:

## **+ QUESTION 1**

REPLY 1

## **+ QUESTION 2**

REPLY 2

## **+ QUESTION 3**

REPLY 3

Change Type Font and Color On Just a Few Words

Sometimes you just want one or two words in a sentence to be a different color or font which isn’t necessarily possible using the headers since it will change the whole sentence. So instead of using a text block, you’re going to use a Markdown Block and your sentence will look a little something like this:

 

Roses are <span style="color:red; font-family:Georgia; font-size:2em;">red.</span>

 

The text in between the <span> </span> (so in this case “red”) is what will be changed while the rest will remain the same as what you have in the Style Editor.

If you just want to adjust only the color, simply add this code without “font-family:Georgia; font-size:2em;” and vice versa for if you just want to adjust any of the other elements alone.

And there you have it! Five 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 your 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!

10 Comments