Tag Archives: web design

/// How to customize your “read more” link on squarespace

I’ve got another little snippet of code for all you Squarespace lovers today! This one is for that boring old “Read More” link that appears on a Summary Block. Especially if you are using Squarespace’s Summary Block to showcase your blog posts, the “Read More” link is often a good spot to get your audience to engaged (ie: so that they read more!) with your featured posts.

So how do you take it from boring black text to something that matches your brand? I’ve gotcher back.

 

 

How to customize your read more blog link on squarespace blog

 

There are a few little code changes you can make to jazz up the plain “Read More” to match your branding colors. Here are the steps:

  1. In the main Squarespace menu, click DESIGN. Then CUSTOM CSS.
  2. Copy and paste the following code:

<style>

/*** READ MORE LINK – TEXT ***/

.entry-more-link a:not(.sqs-block-button-element) {

color: #E9AEC4 !important;

}

.entry-more-link a:not(.sqs-block-button-element):hover {

color: #444444 !important;

}

</style>

 

The pink highlighted text is where you can change your colors. Do not edit the grey text. (You can also add this code to an individual page if you don’t want it to affect all “Read More” links on your site).

IMPORTANT ! !

Each template has a different method to define their “Read More” links. Please select the method for your template below, and then replace the red CSS code (.entry-more-link) with your template’s method. (If you’re template isn’t listed below, please try the links below, – many work for more than one template. If none of these work, feel free to email me with your specific template at hello@junemango.com).

Adirondack: .link

Five: .inline-read-more

Fulton: .summary-read-more-link

Horizon: .summary-read-more-link

Peak: .read-more

Mohave: .summary-read-more-link

Marquee: .entry-more-link

And that’s it!! Easy peasy. 

 

If you’d like to do even more customization, I have a full #squarespacehack in the June Mango shop that allows you to add a background color (to make it more like a button), add a border, and make it wider. PLUS! You can use the code GRAM to get 50% off. 

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

 

 

 

 

 

/// 5 Questions to Ask Before Switching from WordPress to Squarespace

So you’ve been thinking about switching from WordPress to SquareSpace, but aren’t sure if it’s right for you or your business. So how do you know if you should switch things up or stay put? Here are a few questions to help you decide:

5-questions-to-ask-before-switching-wordpress-to-squarespace-04

 

 

  1. How much do you blog? If you are a regular blogger posting content more than once a week, you may want to stay with WordPress. Not only does WordPress have an amazing database for all that content, but it will also be quite a process to move all of that content over to SquareSpace without messing with the posts’ formatting, plugins, etc. If you don’t blog as regularly, this is less of an issue. I merge blogs over from WordPress to SquareSpace all the time, so it definitely can be done. You may end up tweaking each post to make sure it works in the new SquareSpace site, but if you don’t have hundreds of posts, this isn’t a huge issue.
  2. How often will you be adding pages or tweaking your content? If you know you’re going to be adding new forms, creating pages for an e-course or anything else that would require you to get in the backend and easily create your own content, SquareSpace is the clear winner. It’s user interface is extremely easy to use and it even has pre-made page layouts for the novice web designer.
  3. Do you need a lot of customization? Do you need to be able to tweak a lot of little things or have some crazy-cool functionality like a unicorn that flies across the screen? If so, stick with WordPress. WordPress allows you to create a custom-coded child theme and you can pretty much do anything you want with that (with the help of a developer). SquareSpace’s customization is a little limited, mostly because they don’t want the novice web designer to break his/her site! But even SquareSpace can be customized to a certain extent , like I’ve talked about this and this post.
  4. Do you want to be hands-off for the website’s maintenance? Then SquareSpace is the better choice. Since SquareSpace isn’t open-source, unlike WordPress, they control everything. This means there are hardly any bugs, no need to manually backup your site, and if you ever have an issue, their support team is ah-mazing. I can’t even count how many times I’ve used their live chat option when I have a question about something.
  5. What’s your price point? There’s obviously no “set cost” for either of the platforms, it just depends on what you need. For WordPress, you have to pay for hosting as well as your domain name, plus any theme you purchase or web designer/developer you may hire to help create the site. If you’re creating a custom site, you could be paying upwards of 20K! SquareSpace has a few plans that you can choose from, and most businesses can get away with the Personal plan, which is $12/month. Add that cost to your domain name and it’s only a few hundred dollars if you set it up yourself. If you hire a web designer to help you, you will likely still walk away with a brand new site for less than a few thousand dollars.

So what do you think? It really just depends on your answers to these questions, but hopefully you find them helpful in determining which choice is right for you! And hey, if you want to chat through any of this more, I’m here! Just holla at me.

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

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