The Ultimate Guide to Selling Premium WordPress Themes
So, you’ve just finished writing your last piece of code, and you tell yourself “I want to sell this, now!”. However there are a few things you must do before even getting to the upload stage, which we shall go through now.
Compatibility
Before you do anything else, top of your priority should always be Compatibility. Here’s a list of what you should test:- Browsers
- Resolutions (Screen Sizes)
- Web Fonts
- Theme Check
Browsers
You should always download all of the main browsers onto your computer. Then simply open up your theme in each and every one. Make sure that everything is displayed the way it should and that everything works the way it should, even if the tiniest detail such as a font has rendered differently then you should always change either the font or the specific styling for that browser. This will make your theme more professional if everyone sees the same as everyone else.Resolutions
Believe it or not, websites do indeed display differently to your screen size. Make sure you have a wrapper around all of your content so that it stays in the same position. A good way to do this would be to create a div that would start just after your <body> tag and end just before your </body> tag. So for example:<body> <div id="wrapper"> </div> </body>Then in your css code, you would want to display this code so that all of your content is displayed in the center at all times, whatever the screen size.
#wrapper {
width:960px; /*Or whatever the width you want your website to be*/
margin:auto;
}
That’s just one of the many ways to make sure that your website
displays it’s layout properly in different screen sizes. A good way to
test this would be to either jump onto another computer with a different
screen size, ask a friend with a different screen size to view your
website, or simply drag the browser window narrower to create a smaller
viewing area.Web Fonts
Be sure that all of your fonts that you have used are either web safe or have come from a system such as Google Fonts or Cufón. The Main reason for this is because many people believe that one can use whatever font they like when creating a website. However the average user will not install extra fonts in their spare time. Therefore they will not have the same font needed to view the website in a substansially better experience. That’s where web safe fonts come into it. These are fonts that work on nearly all systems, Mac, Windows, Linux etc… You can find a full list of web safe fonts here.Alternatively if you want a more exciting experience you can use Google Fonts and Cufón as mentioned above, which transform your desired font into a web font.
Futhermore check that in every browser and other computers (if you can) that your desired fonts render exactly the same as they should. For example in Firefox the Yanone Kaffeesatz font renders brilliantly, whereas in Google Chrome, it is seen as more thin and does not look as great.
Theme Check
Now, Theme Check is an absolutely brilliant plugin for WordPress that I would recommend every WordPress Web Designer to use. Once you have activated it, you can go to it’s panel and run literally a theme check on your theme. Once the test has finished it will come up with advice to improve your theme, what your theme is missing and also friendly warnings that may come of use. It is constantly updated, so every now and then you can just run a theme check and see what you need and what you can improve on. You can download the plugin here at the WordPress Plugin library.Documentation
Next is to create your help file/documentation for your theme. These files should be in PDF Format so that nearly all Operating Systems can view the file. You should include in your documentation an FAQ (Frequently Asked Questions), A detailed tutorial of extracting and installing the theme onto a server and eventually activating it in the WordPress Admin Panel, An explanation of your menus and where they are in your theme, An explanation of your widgets and where they are displayed in your theme, An explanation of your shortcodes and what they output, An explanation of your theme options (if you have one) and finally an explanation of all the extra features you may have included in your theme.Remember a detailed documentation will increase your chances of being approved and will also tell your customers that you are professional and don’t mess around. This may get your customers to buy even more of your products!
Live Preview
Now you should think about presenting your theme to customers who will want to see a preview of your theme. It is Compulsory that you include a live preview now-a-days. Customers want to see what it will look like for real, they want to see the real deal and how it works. So the best possible way to do this is to create a simple url such ashttp://www.mysite.com/previews/wordpress/mythemenameand to upload the latest WordPress and to simply install your theme, and you are done!
Obviously if your theme comes with lots of different design options you should include one of the many jQuery plugins out there that act as a small options panel for customers on the demo screen. It could be a background colour option change or even a layout change. Get creative, make your customers see everything that’s in store for them when they buy your theme, after all it is a demonstration of your theme!
Here’s a list of themes that do this very well;
- Creole – A Professional WordPress Theme
- Solidity – Business, Magazine and Blog Theme
- Quasar – A Premium Theme for WordPress
- Essence WordPress Theme
Preview Images/Screenshots
After that you want to start creating your screenshots.zip for the uploading process. This is a zip file full of screenshots of every single page that you can possibly have with your theme. This will also act as a preview much like the live demo. Many people would think the easiest and best way would be to print screen and cut off some bits in photoshop. However that is probably the most time consuming and annoying process of doing this. I have recently found an amazing addon for Firefox, Google Chrome and Safari that lets you take a picture of the whole website even if some of it’s not in the view port. It will take a picture of everything on the website, and it wont show you anything else, none of the browser window or desktop, just the website! This addon is called Awesome Screenshot and you can find out more and download it here.Once you have finished taking screenshots with your flashy new addon. You need to start creating thumbnails and a featured image for the upload process.
Thumbnail (130 x 78)
This is the wide thumbnail image that represents your screen. Now it has been seen many times before that it’s traditional to include the logo and the WordPress version, usually it also contains a snazzy background.Here’s an example:
Small Thumbnail ( 69 x 69)
This is very similar to the larger thumbnail above, it’s also traditional to display the version of wordpress and of course the name/logo of your theme, as always another snazzy background.Here’s an example:
Featured Preview Image ( 590 x 330)
Now this is the big featured image that is displayed on the item page. It is often seen with a list of features that are included in your theme, secondly it is also usually situated with a preview of the theme and the logo. Make sure that this has the same colours and design as your theme as this could confuse your visitors.Here’s an example:
Theme Description
This is the crucial part in representing your theme, it’s your chance to speak good words about your theme, trying to promote it as well as you can. The only problem about this part is that not everyone will read your description, however the people who do, will expect a good description.Therefore you need to work really hard to think of a decent description, use imaginative words, get creative. Don’t just leave one line with your slogan for the theme, this would show that you are unprofessional, and didn’t put much effort into it. Below there are some code snippets that could be used in your item description, remember get creative, and don’t be afraid to experiment!
Heading and Version Number
<div class=”classic-intro clearfix”> <h3>Theme Name Introduction</h3> <p>Current Version: 1.3</p> </div> <p>Introducing… The number item name in the World Wide Web! This is your time to shine. You need to remember how crucial this part of the sales process is. Since we understand this, we have set out to create pre-made templates for our sellers to utilize to make their items shine! Do your best to not hold back on every feature you can think of.</p>
Lists
<ul> <li>30+ Shortcodes</li> <li>Shortcode Generator (<a href="#">View Screenshot</a>)</li> <li>Nivo Slider</li> <li>jQuery Slider</li> <li>4 Custom Widgets</li> <ul> <li>Testimonials</li> <li>Twitter Stream</li> <li>Newsletter Signup integrated with FeedBurner</li> <li>Flickr Photostream</li> </ul> <li>7 Page Templates</li> <li>Custom Post Type used for Featured Slider</li> <li>Layered PSD included</li> <li>Compliant in all major browsers</li> <li>Includes complete setup guide + documentation file!</li> </ul>
Large Images
<h3>A Closer Look Under the Hood…</h3> <p>We notice quite a few potential buyers wanting to get a better idea of how much control they’ll have over the theme. If you can take some extra time to come up with some nice graphics or screenshots of the themes flexibility or even the options panel it will go a long way.</p> <!– Title Top & Image Below –> <section> <h4>Powered by the MOJO + Themify Framework</h4> <img src=”…” width=”415″ height=”259″ alt=”" title=”MOJO + Themify” /> </section>
Section with Image on the left and text on the right
<section class=”classic-left-image-bg shadow”> <section class=”clearfix”> <div class=”classic-left-image”> <img src=”…” width=”218″ height=”138″ alt=”" title=”Style Changer” /> </div> <div class=”classic-right-text”> <h3>Easy Styling + Control</h3> <p>Just click, select & hit save.<br /> We’ll handle all the CSS coding for you.</p> </div> </section> </section>
Section with Text on the left and Image on the right
<section class=”classic-right-image-bg shadow”> <section class=”clearfix”> <div class=”classic-right-image”> <img src=”…” width=”218″ height=”138″ alt=”" title=”Control Background Images” /> </div> <div class=”classic-left-text”> <h3>Controllable Image Library</h3> <p>All images you upload are stored in<br /> the library for you to preview.</p> </div> </section> </section>
Changelog
It is also a good idea to include a changelog so that customers know which version they are currently on and if there have been updates so that they can re-download the theme with an updated version. It could look something like this:DATE
- Update 1 Released
- Includes
- Feature 1
- Feature 2
DATE
- Initial Release.
You can find the whole lot of code for a unique description here.
Promotion
So, you’ve now uploaded your theme and it’s been approved by the mojo masters. But you want people to know about your new release, you want to spread the word in as many possible ways.#release #mojo-themes #new #theme #wordpress
try to make it as SEO advanced as possible.
Hello Bar
If you’ve got your own WordPress blog, then why not install a nifty plugin called “Hello Bar”. It may still be in Beta at the time of you reading this, however I simply signed up and once following the instructions I finally got my own Hello Bar plugin installed on my WordPress Install for free! It’s incredibly simple and it sits nicely at the top of your website with a small sentence of what you want it to say. You can include links and even change the colour of the text and the bar!Here’s what they look like:
You can view this live at my blog here. (If it’s activated.)
You can sign up to this wonderful plugin’s beta right here.
Conclusion
So now you’ve done everything you can to rack in those sales, sit back and enjoy the money coming in.Thanks for reading my first guide/tutorial here at WPRoots, please feel free to comment below!
No hay comentarios:
Publicar un comentario