Close

May 20, 2017

5 Free Copy-and-Paste Design Hacks to Take Your Blog to the Next Level

As a former graphic designer, I work extra hard (probably too hard – ask my editor James) to try new things with the goal of making my content more easily readable, navigable, and overall better-looking.

Throughout my career in content marketing, I’ve put together a “utility belt” of sorts, full of blog design tools that we use all the time here at Wishpond.

In this guide, I’m going to highlight 5 of these awesome design hacks you can add to your blog to take your content marketing efforts to the next level. I’ll give you all of the HTML, CSS and JavaScript that you need to implement them, so all you need to do is copy and paste.

NOTE: Some of these tools require your blog to have jQuery installed. If you’re not sure whether or not it’s installed, check with your web dev (or some other technically-inclined person on your team).

Let’s dive in!

1. Headings

Why We Use Them

Headings are pretty straightforward, and we use them in just about the same way as everyone else does. In Wishpond’s content, we use headings to help us denote topical breaks in our content, whether that’s switching topics completely or to divide multiple subsections within a single topic.

Using headings effectively is definitely a skill we take for granted. The content marketing landscape is rather saturated, and people don’t have the time to parse through thousands of words to find the information they’re looking for. Dividing up our blog posts makes it simple for readers to skim our articles and get the information they need.

How We Use Them

As you can see in this article, we generally use two different heading sizes. The font we use for our main headings is big and bold, and our subheading font has a slightly increased font weight and size. This serves to differentiate headings from paragraph text without sacrificing design consistency.

One thing I’ve started adding to the headings in my posts is some element of color, usually in a floating border on the left-hand side of my headings (you can see this in the headers throughout the article). This does a few things to increase clarity.

Using a bright color causes this border to “pop” on our blog’s white background, making it easy for people quickly scrolling through the article for information to see where they can find it. It also increases visual weight, helping the heading stand out from the rest of the article without relying only on font weight or size.

How You Can Use Them

Here’s the stylesheet to add that colored border to your headings (I’ve chosen <h2> but you can choose whichever header you’d like).

CSS

<style>  
h2 {  
    padding: 7px 0px 7px 15px;
    margin-left: -15px;
    border-left: 4px solid #2196F3;
    margin-top: 30px;
}
</style>  

2. Table of Contents

Why We Use Them

A table of contents goes hand-in-hand with effective headings. We don’t use them for every article, but we do use them for our extensive articles that span many topics and many sections.

Your table of contents serves a few purposes…

First (and most obviously), having an interactive table of contents makes it easy for readers to navigate our articles.They can simply click to be taken to the section of the article they want to read, or use the table of contents to help them find their place if they’re not reading it all at once.

Next, they serve as a statement of value – someone reading one of our articles for the first time can see exactly what’s in it, how comprehensive it is, and why it’s worth reading.

How We Use Them

As a marketer for a tech company, I’ve had the great fortune of being able to learn quite a bit from the many talented designers and developers that work alongside me. Sometimes I get to build things myself… and sometimes, I leave that work to people who are much better at it than I am.

Building a table of contents was one of those cases. I worked with one of our designers to put together a nice little mixture of HTML, CSS and JavaScript to build a quick and elegant table of contents that scrolls readers right to the section of each article they want to be.

We place our table of contents right below our intros, giving readers a roadmap of the article ahead. They look a little like this:

How You Can Use Them

You might need a little bit of design know-how to make this table of contents look exactly the way you want it, but it’s a great foundation with easily editable code.

CSS

<style>  
.toc-container {
   margin: 15px;
}
.toc{
   list-style-type: none;
   padding: 0;
   margin: 0 auto;
   width: 500px;
}
.toc li{
   width: 100%;
   display: inline-block;
   float: left;
   text-align: center;
   padding: 0 !important;
   margin: 0 0 10px !important;
}
.toc li a{
   display: block;
   background-color: #FCFCFC;
   padding: 8px 15px;
   margin: 0 15px;
   border-radius: 3px;
   -moz-transition: 0.2s ease-in-out all;
   -webkit-transition: 0.2s ease-in-out all;
   transition: 0.2s ease-in-out all;
   font-size: 0.8em !important;
   color: #333;
}
.toc li a:hover{
    background-color: #0e62ab;
    color: #FFF;
    -moz-transition: 0.2s ease-in-out all;
    -webkit-transition: 0.2s ease-in-out all;
    transition: 0.2s ease-in-out all;
}
</style>  

JavaScript

<script>  
setTimeout(function () {  
   var anchorlinks = document.querySelectorAll('a[href*="#"]');
   for(var i = 0; i < anchorlinks.length; i++) {
     anchorlinks[i].setAttribute('target', '_self');
   }
 }, 1000);
</script>  

HTML

Place this wherever you want your table of contents to reside.

<div class="row toc-container">  
    <ol class="toc">
        <li><a href="#HEADING1" target="self">Heading 1</a></li>
        <li><a href="#HEADING2">Heading 2</a></li>
        <li><a href="#HEADING3">Heading 3</a></li>
    </ol>
</div>  

You’re also going to need to do a couple of things to make it interactive. First, you’re going to need to add anchor tags to each section you want to link to from your table of contents. I’d recommend adding these tags right above the heading you’re linking to. Here’s what an anchor tag looks like:

<a name="HEADING1"></a>

Just change the “name” of each of these anchor tags to something unique. Then, change the href link and headings of each line of your table of contents HTML to match.

In the backend of one of our articles, it looks like this:

And here’s the corresponding anchor tag:

3. Quotes, Boxes, & Takeaways

Why We Use Them

We use a styled <div> to help create visual depth and draw attention to certain parts of our articles. The two biggest things we use them for are quotes (or excerpts) and for takeaways. We know that certain portions of our articles are more important to readers than others might be – for example, the aforementioned quotes and takeaways.

Using these stylized classes allows us to use design to place importance on the elements we want to emphasize, and helps to spice up what might otherwise be a wall of text. It signals to a reader that “Hey – if you’re going to read one thing, read this thing.”

How We Use Them

We use two main styles for these things, though we’re guilty of switching them up pretty often based on trends or things we like (or who’s writing). Here’s an example of my go-to quote div:

And an example of a “takeaway” div:

Takeaway Heading:

This is a takeaway!

As you can see, they serve similar purposes but in different ways. Our quote div is a little less intrusive, instead using a border and slightly-changed text to communicate specific quotes or excerpts from the article. On the other hand, our takeaway div commands visual space and demands attention from a reader, using color and text styling to indicate to readers what the most important part of each article is.

How You Can Use Them

Quote CSS

<style>  
.quote {
        padding-left: 15px;
        border-left: 4px solid #555;
        margin-bottom: 20px;
        font-style: italic;
}
.quote p {
    font-weight: 300;
    padding: 5px 0 5px;
}
</style>  

Quote HTML

<div class="quote">  
<p>Quote Content</p>  
</div>  

Takeaway CSS

<style>  
.takeaway {
    background-color: #FCFCFC;
    padding: 40px 50px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    border-top: 6px solid #2196F3;
    margin: 40px 0px;
}
.takeaway h2 {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 18px;
    border: none !important;
}
.takeaway p {
    margin-bottom: 0;
}
</style>  

Takeaway HTML

<div class="takeaway">  
<h2>Takeaway Heading</h2>  
<p>Takeaway Content</p>  
</div>  

Make sure you adjust the colors and text styling to match your own blog’s styling.

4. Click to Tweet

Why We Use Them

Though we’ve been using them rather sparingly lately, Click-to-Tweet boxes used to be a huge part of the way we used social media to push increased traffic to our blog.

Basically, we know that an engaged reader is one of the best people to ask when we’re looking for blog post shares. Making it incredibly simple for a reader to Tweet an excerpt from a blog post reduces the potency of the infamous laziness barrier and increases relevance, since they’re being asked right as they’re reading.

How We Use Them

We use Click-to-Tweet boxes to clip valuable bite-sized information for sharing on social media. People who share things on social media do so to provide value to the people they’re connected to – their followers. Rather than asking them to share the whole article, asking a reader to share a particular takeaway or quote allows them to deliver direct value to their followers without the need to read the article.

Here’s what our Click-to-Tweet box looks like.

As you can see, it’s simple but effective. It clearly communicates its function, and makes it simple for the reader to click the button and Tweet the article excerpt immediately. We drop these right under the excerpt to take advantage of top-of-mind awareness, maximizing the chances that a reader will actually Tweet it out.

How You Can Use Them

CSS

<style>  
.twitter-box {
    display: block;
    margin: 20px auto 35px;
    max-width: 520px;
    padding: 0 25px 12px;
    border-radius: 3px;
    border: 2px solid #55acee;
}
.twitter-box img{
    display: block;
    margin: -30px auto 15px !important;
    width: 60px;
    height: 60px;
    background-color: #FFF;
    border: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow:  !important;
    -moz-border-radius: 2000px !important;
    -webkit-border-radius: 2000px !important;
    border-radius: 2000px !important;
}
.twitter-box p{
    font-size: 1.2em !important;
    text-align: center;
    margin: 0 0 20px;
    padding: 0 !important;
    color: #777 !important;
}
.twitter-box a{
    font-size: 0.85em !important;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 30px 0 0 !important;
    padding: 3px 0;
    border-bottom: 1px dotted #A2C3D3 ;
}
</style>  

HTML

<div class="twitter-box"><img src="http://s3.amazonaws.com/media.wishpond.com/media/009/242/822/original.png?1466626805">  
    <p>YOUR TWEET TEXT HERE.</p>
    <p><a href="http://twitter.com/intent/tweet?text=YOURTWEETHERE!" target="_blank">Click to Tweet</a></p>
</div>  

Make sure you change the paragraph text and “YOURTWEETHERE” in the URL to whatever you’d like it to say. For example, I might use twitter.com/intent/tweet?text=Hello%20World!. It’s as simple as that!

5. Expand

Why We Use Them

We’ve only used expand sections a few times on our blog, but I’ve decided to add them in here because they’re awesome-looking, super-functional and pretty darn cool. I find expand sections particularly valuable because sometimes, not everything in your article needs to be visible on a first read.

For example, take my article 5 Outstanding Marketing Campaigns You Can Run Without a Developer. The first thing you’ll notice is this article is quite hefty – it’s not easy to teach digital marketers of all levels to do technical things. However, I decided to add “power user” tips – neat extra marketing tips that might be a bit too technical for the majority of readers.

I decided to hide these tips by default, instead allowing readers to reveal these tips using expand sections. This cleans up the article a bit and minimizes the chance that each section overwhelms readers.

How We Use Them

Quite a bit goes into making these expand sections work (trust me, it took quite some time). Here’s a live demo of an expand section:

As you can see, there’s quite a few things to take into account here. Visually, I prefer to change my fonts in weight and style at least a little to make sure the expand section is unique enough that people see it serves a different function than regular paragraph text. I also use a small arrow to denote the section’s function. I sometimes use box styling to make the expand section look like a button, ensuring people know they can click it.

Content-wise, we use expand sections to section off content blocks that we want to keep separate or hidden from readers at first glance. This includes things like blocks of code (as you’ve seen throughout this article), as well as additional information or even things like images.

How You Can Use Them

CSS

<style>  
.chevron {
    border: none !important;
    height: 1em;
    float: right;
    margin: 0 0 0 15px;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
}
.expand h3 {
    margin: 0 !important;
}
.expand i {
    float: right;
    margin: 0 0 0 15px;
    cursor: pointer;
}
.collapse {
    padding-top: 30px;
}
.expand .non-tilted {
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transition: 0.3s ease-out all;
    -webkit-transition: 0.3s ease-out all;
    transition: 0.3s ease-out all;
}
.expand .tilted {
    -ms-transform: rotate(180deg) !important;
    -webkit-transform: rotate(180deg) !important;
    transform: rotate(180deg) !important;
}
</style>  

JavaScript

<script>  
var ifJQueryExists = setInterval(function () {  
if (typeof jQuery !== "undefined") {  
$('.expand').click(function () {
    var $this = $(this);
    $this.find('.collapse').slideToggle(500);
    $this.find('.non-tilted').toggleClass('tilted');
});
    clearInterval(ifJQueryExists);
}
}, 10);
</script>  

HTML

<div class="expand">  
    <h3>YOUR HEADING HERE<i class="fa fa-chevron-down non-tilted"></i></h3>
        <div class="collapse">
                YOUR CONTENT HERE
        </div>
</div>  

Wrapping it up

There you go: 5 of my favorite design hacks you can add to your blog. They’re tools I use every day, and I hope you find them helpful. If you have any questions about how to use these hacks – or any hacks of your own – let me know in the comments below! Until next time!


Source link

Facebooktwitterlinkedinmail

Comments

comments