Category Archives: Web Design

/// 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

/// 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. 

/// How to Use & Abuse Grids for Web Design

 

Every website is designed using a grid. This is so helpful when you are thinking about layout and placement of content. If you’re just starting out in web design, or are DIY-ing your site, this is basically the number one rule to keep in mind. JUST FOLLOW THE GRID.

But! You can also use the grid to your advantage to create unique layouts. A little design secret is that any good design is probably breaking a rule. Not ALL the rules, because otherwise, things get a little confusing. But breaking a rule here and there allows you to create something that catches your eye. And eye-catching design is noteworthy. And noteworthy sites are remembered. You see where I’m going with this, right?? :)

 

grid web design

 

So using the website above as an example, you can see that there is a grid as a guide, but the elements in the layout don’t all fit perfectly within the rules of the grid. Some elements are perfectly centered, like the mission statement at the top and the newsletter opt-in at the bottom.

Other elements use the grid, but in unexpected ways, like the “Next Step” graphic and text. While the white space that holds the text is along the line of the grid, the pattern that encompasses the white space + text is above the line of the grid. But you’ll also notice that the black pattern does follow the rules of the grid from left to right and fits nice and snug into the right-hand side of the site. The images on the left do the same thing. They break the grid vertically, but fit centered from left to right.

So you can see that this website breaks the rules a little, but each element still follows the grid in another way, which keeps it clean and cohesive, but also a little interesting and eye-catching.

If you want to take a look through the full website used in this example to see how I carried this organized rule-breaking throughout the rest of the site, head on over this-a-way! For even more web design craziness, check out this, this, and this site. 

 

 

/// 4 Ways to use SquareSpace cover pages

Have you heard of SquareSpace cover pages? These unique and versatile web pages are great way to add a bit of flair to your creative endeavors. Below are four unique ways to utilize these cover pages to make a powerful introduction.

4 ways to use squarespace cover pages-05

 

  1. Collecting email addresses.  Whether your website is under construction (or not yet begun!), you’re about to launch something new, or you just want to grow your email list, a SquareSpace cover page is the perfect solution.
  2. Promoting anything.  If you’re launching a new product, podcast, or course, cover pages allow you to present and promote before people move on into your regular website.
  3. Sell something.  Cover pages can be a free, high-converting landing page for a digital product or service. Send people to your sales page or create the opt-in directly on the cover page.
  4. Elevate your homepage.  Cover pages can be a great pause for people before entering your site. By using a cover page as your homepage, you can also be very specific about where you send people on your website.

These are just a few options but I’d love to hear more! Comment below or holla at me if you’ve used SquareSpace cover pages in a unique way!

 

Popular Posts