How To: Rotating TPT Header

How to make a rotating tpt teacherspayteachers header by melissa jenna godsey

Background

This time last year my husband and I opened up shop on Teachers Pay Teachers (a marketplace for teacher-created educational resources). I’ll spare you the big long story; in a nutshell: our shop has been more successful than we ever would have dared to dream, and as a result we have some financial flexibility that we didn’t have before. In less than 9 months our shop is ranked in the top 100 secondary sellers (that’s high school, for you non-education folks), and we’ve gotten tons of great press about our (extremely niche) product.

It’s a crazy blessing. Like, one of those things where I imagine what’s possible, and God goes and blows my pathetic little vision up, like he’s showing off or something. Like “oh, you think you know abundance? HA. Watch what Imma ’bout to do.” I get teary-eyed just thinking about it. Anyway, that’s not why we’re here. We’re here so I can save you some time, and hopefully support you in your growing TPT effort. Let’s get to it.

First: What’s a “Rotating TPT Header?”

Okay, so at the top of your TPT store, you have the option of including a quote, but using some easy HTML, and a tiny bit of design, you can swap the quote for an image, or if you’re feeling fancy, a series of images that will automatically cycle, like a slideshow. Click over to our shop if you want to see it in action.

Second: Why do I want one of those?

Lots of good reasons! First, it differentiates your storefront, and gives it a more thoughtful, profesional appearance. It’s evident that you care. Secondly, it’s prime real estate, perfect for a strong call-to-action, which could be lots of things. Here are a few examples:

  • Promoting a specific product
  • Announcing a sale
  • Building an email distribution list

Since you’re able to link this rotating banner to one specific thing, I suggest picking one CTA for all your images. Right now ours is set to drive people to join our email list. Later I might swap it out to promote a specific product. It’s really up to you how you use it. Think of it like your virtual boutique window.

Third: How do I make one?

Before we get started, here’s a list of what you’ll need:

  1. An app like Keynote, or Powerpoint, or my personal favorite Canva.com which free, and glorious. Tons of free design templates, which is beyond helpful if you are not design-minded.
  2. A free Photobucket account
  3. Maybe an open doc to paste in some of the URLs you’ll be creating in the following steps. I have a cool plugin installed that remembers the last 10 things I copied to my clipboard. Here’s a link to it if you want. (It’s for Mac; sorry PC friends.)

Okay, let’s get started. It’s going to look complicated, but it’s really not. Baby steps, okay?

Designing your header

  1. First things first: decide on your call-to-action. Do this before you start designing, because your CTA will inform your design.
  2. Launch Keynote/Powerpoint/Canva. Set your slide/image size to 450 x 150 (pixels). If you don’t know how to do this, Google it real fast.
  3. If you want your background color to match TPT’s greyish background, set your background color to F1F1F1. Again, if you don’t know how to do this, a quick Google will set you right.
  4. Add your text, and any images. I’m not going to suggest designs because that’s a whole ‘nother how-to. If you’re not feeling designy, Canva will seriously take care of you.
  5. Okay, so if you only want ONE single graphic, you’re done! Skip to step 1 in the “Uploading to Photobucket” section below. If you’re the fancy type and want a rotating header, continue on, brave one.
  6. Once you’re happy with your design, duplicate the slide/image, and change the text/images for the next slide. This enables you to swap out text without having to reformat everything. Keep doing this for as many slides as you want (I tend to do 3).
  7. Once you have all the slides you want, save/export them as high quality JPGs or PNGs. Don’t let those file extentions scare you: this is easy. As usual, a quick Google will help you if you’re stuck. (“How to save as JPG in Powerpoint.“)

Converting your header to a GIF

This couldn’t be easier. Head to GifMaker, upload your images, and set the animation speed to something like 3000 milliseconds (= 3 seconds). Click “Create GIF Animation,” download the GIF, and you’re done with this step. And guess what? You are so close to the end!

Uploading your GIF to Photobucket

You can upload your GIF wherever you have web space; I suggest Photobucket becasue it’s free and simple.

  1. Log in to Photobucket, click upload, locate and upload your GIF that you just downloaded.photobucket direct link
  2. Once it’s uploaded, click on it in Photobucket, and copy the “direct” link. Boom. Done. You’re almost done.

Shorten that Photobucket link

TPT has a character limit in the quote section of your profile, so you’ll have to shorten this link. Fortunatly, this is easy. Head to Bit.ly (or your favorite link shortener, and shorten your Photobucket link. Copy your new shortlink. Give yourself a high-five.

The moment of truth: Update your TPT profile!

You’ve made it! Let’s get that fancy new GIF playing on your shop page.

  1. Log into TPT and navigate to your store profile. Click “edit” down on the bottom.
  2. In the “Personal Quote” field, paste in the following HTML code: <a href=”LINK“><img src=”SHORTENED GIF” /></a>Tpt personal quote
  3. Replace the LINK with the URL of whatever it is you’re linking to: the product you’re promoting, your email sign-up form, your blog, whatever.
  4. Replace the SHORTENED GIF with the shortened GIF link you made above.
  5. Click “Save” down below.
  6. Head to your store page, and admire your effort. You did it! You’re an Internet Champion!

Final thoughts

As with anything, this first time you do this, it might take a while. But that’s okay! That’s part of learning, right? The next time you update your banner it’ll be so much faster, and before you know it, you’ll be teaching others the same. Want more TPT Tips and Tricks delivered straight to your inbox? Sign up for free! You won’t get more than one email a month, promise.

Shortcuts

Here’s a Keynote template I made that’s already sized to 450 x 150, and colored F1F1F1, so you can just jump right in. If you have Keynote ’09, here’s that version. Enjoy!

Advertisements

How To: Make Instagram Magnets For Less Than $10

Hey girl/boy, hey! So today, instead of writing about my “Summer of 7,” I decided to finish a craft project and post a tutorial. It took about 30 minutes of active-time, and another 30-40 minutes of drying-time, and they look ADORABLE on our refrigerator. Click on the image above for the instructions, and holler if you have any questions. Enjoy!

xoxo, mj

Tech Lust: iPhone Mirror Mod

iFixit iPhone 4 Mirror Mod MelissaJennaOkay, seriously? This is the most excited I’ve been about a thing since I got my iPhone 4. How AWESOME is this rear panel? No more carrying a mirror. No more wondering if I have something in my teeth. Spying on people beind me? Easy peasy, lemon squeezy.

I need to know two things from you: 1) How BALLER is this? 2) Is this something you’d consider using?

Perhaps before you can answer number 2, you need to know what, exactly it is. It is a replacement rear-panel for my iPhone 4, except it’s mirrored instead of black. So basically, you take off the old panel, put on the new one and…..well, that’s it, you’re done!

Here’s a video I did where I show you how to switch the backs. Basically it’s four steps: 1) remove two screws, 2) slide back off of phone 3) slide new back onto phone, 4) put screws back in. But here’s the video, just in case (please excuse my ill-advised bangs): 

So whaddaya say? You likey? While I’m not getting compensated for this post, I do work for iFixit, and I did get this panel for freesies. I’m testing it out to see how well it wears, and  doing some very casual, not-at-all-scientific, totally unmeasurable market-research to gauge interest in the mirrored rear panel. Personally? I’m in love. (And NOT just because I’m vain.)

%d bloggers like this: