Category Archives: Tips & Tricks

/// How to CREATE A POP-UP FORM on SquareSpace

When I discover a new trick on SquareSpace I get so excited because…

A) I have a new tool in my toolkit when building client websites.

B) I get to share it with you! Because if I didn’t know this existed, chances are other people don’t either.

I recently discovered a super helpful, and super simple way to create a pop-up form for your SquareSpace website.  And you can do it without any custom code or tech-savvy-ness. Just follow the 4 simple steps below.

how-to-create-a-pop-up-form-on-squarespace-blog-01

 

 

  1. Open your Content Block options, and click Add Form.

how-to-create-a-pop-up-form-on-squarespace-blog-03

 

2)  Create your form in the normal way, adding the fields you need. Then click the Advanced tab.

how-to-create-a-pop-up-form-on-squarespace-blog-04

 

3) In the Advanced tab, click the circle next to “Enable Lightbox Mode”. This is the key to making your form pop-up, verses just sit on your page as a regular form. You can also write the call-to-action text you want for your pop-up button in the “Open Button Label” field.

how-to-create-a-pop-up-form-on-squarespace-blog-05

 

4) And TA – DA ! You just created a pop-up form on your SquareSpace site!

how-to-create-a-pop-up-form-on-squarespace-blog-06

 

how-to-create-a-pop-up-form-on-squarespace-blog-07

 

You rock.

 

For more SquareSpace tips and tricks check out this and this post!

 

similar-squarespace-hacks-10

sqaurespace-hacks-code-snippets-for-squarespace-image-filters-08-08sqaurespace-hacks-code-snippets-for-squarespace-faq-01sqaurespace-hacks-code-snippets-for-squarespace-custom-pin-it-button-02sqaurespace-hacks-code-snippets-for-squarespace-image-filters-03

/// How to Remove Name Fields from Your Newsletter Block on Squarespace

As much as I love SquareSpace, and I really do, sometimes it just won’t let you make those little changes to really customize your website. A great example of this is the Newsletter Block. Sure, you can decide to collect people’s names or just their email addresses, but what if you want to collect only their first names? Well, I’ve gotcher back with a simple string of code that will help you do just that!

how-to-remove-last-name-from-newsletter-block-on-squarespace-blog-05

 

First, you need to set up your newsletter block as you normally would. Make sure you have the “Require Name Field” checked. Then, follow the steps below:

  1. In the side panel, click on DESIGN.

  2. Click CUSTOM CSS.

  3. In the CSS editor, simply paste in this string of code and click SAVE:

.newsletter-form-body .last-name {
display: none;
}

 

 

That’s it!! Told ya it was easy.  :)

 

 

similar-squarespace-hacks-10

sqaurespace-hacks-code-snippets-for-squarespace-image-filters-03 sqaurespace-hacks-code-snippets-for-squarespace-custom-pin-it-button-02 sqaurespace-hacks-code-snippets-for-squarespace-faq-01

sqaurespace-hacks-code-snippets-for-squarespace-image-filters-08-08

/// How to Rebrand Strategically

If you have been following June Mango for a while, you will obviously have noticed that it’s just gotten a major facelift. I am so excited about it and it’s been a long time coming. What I mean by that is that I have been diving deep behind the scenes to strategically rebrand my biz. This is more than just a new logo and color palette, although that’s definitely part of it. This is about really getting to the heart of what I do best, who I serve best, and how I can best represent that through my brand.

So how do you even begin to strategically rebrand your biz? I have laid out my process with a few tips below, so read on!

 

how-to-strategically-rebrand.png

There are a lot of moving parts to a business, and your brand is just one of them. For me, I knew it was time for a rebrand when I felt that my messaging and design weren’t matching up with:

A) the high-level of clients I was working with

B) the types of clients I wanted to attract

C) the level of expertise that I have collected from running my business for a few years

D) the actual design work I want to be creating

 

So these pieces each were key elements that just weren’t matching up with what I was putting out into the world. In short, I had grown a lot as a designer and business owner, and wanted my brand to reflect that.

So now that I as aware of what I wanted to be sharing with my ideal audience, it was time to create the messaging and design to match. Now, I am NOT a copywriter, but I do think that the copy in your brand is just as important for your consistent business voice as your design. There are a lot of amazing copywriters that can help you share your vision in your voice, so don’t be afraid to hand over the reigns.

Design-wise, I tried to really get clear on what:

A) I’m really good at

B) I can do that not many other designer’s can

C) type of design I like to create

D) what type of design my ideal audience is looking for

 

With these things in mind, it was easy to create a website and brand that showcased all of the above. And the key here is that the real reason it was easy, is because it was natural. This is another reason I knew it was time to rebrand – I was eager to stretch my legs into design that fit me better.

Finally, I always like to keep in mind the visuals of the previous logo and branding. You don’t want to completely change your look or else no one will recognize you! (Think Jennifer Grey after the nose job).  So I stuck closely to the layout of my old logo, kept some of the same colors, like the pink, and just updated the hues. I also added a new stamp as an alternative logo to help share my services + expertise in a clear way and round everything out.

Overall, I am so happy with it. It really represents me, my design style, and my ideal clients. And that is exactly what your brand should do.  :)

 

The full branding + web design:

 

Feminine-neutrals-brand-style-board-01

Feminine-Web-Design-June Mango-27

june-mango-web-design

/// Changing the Color of Social Media Icons in SquareSpace

So you’ve created your brand-spankin’ new SquareSpace website and styled it perfectly to match your brand with font pairings, gorgeous colors and a lovely layout. BUT, you can’t get those pesky social media icons to match your pretty palette. Don’t worry! I’ve gotcher back.

Change-SquareSpace-Social-Media-Icon-Colors-June-Mango-05

 

There’s a tiny string of code that you can use to change the SquareSpace social media icons from black and blah to any color you want! Follow the steps below on your own site and voila, styled social icons!

Here are the deets:

  1. In the backend of your SquareSpace site, navigate to DESIGN.
  2. Click on CUSTOM CSS.
  3. Paste in this bit of code:
    1. .sqs-use--icon {
          fill: #F65959 !important;
      }
      .sqs-svg-icon--wrapper:hover {
        .sqs-use--icon {
          fill: #444 !important;
      }
      }
  4. The red HEX color is what you’ll need to change to match your own color palette. If your not sure what HEX your color is, check out this handy converter.
  5. That’s it! You’re set.

Don’t you feel like a SquareSpace genius?!

 

Note: This set of code works for the “Regular” style of icons. 

Popular Posts