I must be butter, because I’m on a roll! Template #5 is launching today and it’s our 5th this week! If I keep this pace up we’ll have 100 templates in the marketplace by the end of the day, year! We’re going to mix up our naming strategy a little bit this time around and try brand naming our template. Say hello to the Conversion King.
The Conversion King template is meant for single product landing pages. Whether the product is a piece of software, an ebook, a course, pretty much anything. Customers can add a product image in the header as well as a laundry list of features. Directly below the large header section is a call to action button and a countdown timer. Customers can turn off the timer if they’d rather not create a sense of urgency for their product. Finally, under the call to action section are a few feature tables for highlighting product features as well as a As Seen On section to share any press or testimonials.
Inspiration
The inspiration for the Conversion King template is, for once, kind of interesting. Since I’ve been building these landing page templates I find myself clicking on ads all over the place! I want to see landing pages that convert! One of the ads I clicked on was for one of those crazy clean my mac pop-up ads. I know I know, those pop-up ads are SO annoying but they must convert, otherwise why would you see them all time.
So I clicked on the annoying clean my mac pop-up and low and behold behind the deceptive online marketing practice was a pretty damn nice landing page. I took a screen shot and before you knew it, I brought it to life in the Conversion King template. I actually still have the screen shot:
If you scroll down the page and look at the Conversion King template preview you can see a lot of the same elements. Of course it’s not identical and I wanted to simplify it a bit to give it a broader appeal.
Development
This template took about 3 days to build since, for the first time since I started building these templates, I didn’t recycle work. Though I must admit I did recycle some work from a custom web app we built for a client. The client site used large sections to divide up the page so I was able to use a lot of the HTML and CSS from that project. If you’re curious here’s the client site, installeralert.com.
The trickiest part of building this template was actually creating the feature tables under the “Why Choose the Conversion King?” title. The problem is this, a LeadPages customer needs to be able to hide tables in case they only want to use 2 or 3 tables instead of all 4. I actually learned about some cool CSS display properties because of this! If you just drop in the 4 tables using your standard column layout and hide one of the columns, the tables are all aligned to the left leaving a gaping hole where the 4th table used to be.
Here comes my knight in shining armor, the CSS display:flex; property! Have you heard of this handy little helper? If you use this bad boy on a set of items, columns in my use case, it lets you specify the length of each each item relative to all the other elements in the container and it keeps them all the same length regardless of the containers contents.
Basically, it keeps each of the feature tables the same width even if one is removed and because I have the container’s contents center justified they stay in the middle instead of leaving a gaping hole where the 4th table used to be. So I set the row that contains the columns to have the CSS properties { display:flex; flex:1; justify-content:center; }. Check it out, here is the Conversion King with 4 feature tables:
And here is the Conversion King with 3 feature tables:
They’re still centered if you remove one of the tables and there isn’t a gaping hole where the 4th table was! Wow sorry that was really nerdy but it did take me awhile to figure out how to do this with CSS as opposed to using some javascript to do it…
Pricing
Below is a preview of our awesome new Conversion King template as well as a link to buy it from the LeadPages.net marketplace. Since we’re branding this template a little more and it’s got a little more meat to it we’re going to start it at a price of $10. If you see the price at $7 you’ll know the higher price wasn’t working. You can track how well this template is selling by checking out it’s sales reports.
Preview
