About Shop Design Tidbits TOU Contact Facebook Instagram Pinterest Bloglovin' TPT Image Map

Tuesday, September 8, 2015

Design Tidbit: Using HTML codes to dress up product descriptions


Hello, again!  It’s time for another Design Tidbit: Using HTML codes to dress up product descriptions and blog posts to get the attention your products deserve. 

I’m sure at one point or another you have seen a product description with bold text, links to other products or maybe even images and you’ve wondered "how do I do that!?" This post is all about teaching you how to use HTML codes without stressing yourself out! I’ve broken down the 10 most popular codes into an easy to use cheat sheet. Download the free HTML Code Cheat Sheet to have at your disposal. 





** Please note that the [img] code (for adding pictures) does not work for product descriptions. This code does however work on your storefront to jazz up and better utilize your “quote section”. This will be covered in my Design Tidbit: Quote Box Images**

The sample product description below is the basic format that I use for each and every one of my products on Teacher Pay Teachers. I suggest writing up a basic product description for yourself to insert all of the code that you would like to place. This will also be a HUGE time saver. Once, you have your basic format planned out, you can begin to upload your products with ease and they will look professional! Confession: I wish someone had told me to do this when I first got started with TpT. I used to HATE posting products because of how time consuming it was to write out a product description and code it on the spot. #nobodyhastimeforthat



If you want text to appear underlined     >>>>>
 Write your code like this   >>>>> (Format for bracket </> Coding)
Create   
  <span!style=“textcdecora9on:underline;”>Create</span>
If you want to insert your copyright information     >>>>>
Write your code like this   >>>>> (Format for Character Symbol Coding)

© Create by The Creative Art Teacher 2015
 &copy; Create by The Creative Art Teacher 2015
**All coding with brackets </> will be set up similarly to how the underlining code is written.
**All coding with character symbols will be set up as you see the copyright code written.

For each bracket code, I have identified where you should place your text by entering “Text Here” into the code. Replace this with whatever you want to write. When adding character symbols you will only need to place &CODEHERE; for your symbols to appear!

Play around with how the different codes work in your product descriptions. Understanding how to use coding is very important. As I addressed above if you do not close your codes properly with the </code>, the code will not work properly for you. If your entire description turns out bold, italicized, underlined, go back and check your code for that pesky / ! :)


Go have fun with some coding! Have further questions? Go ahead and ask in the comment section and I’ll be sure to get back to you quickly!
 

No comments:

Post a Comment