The Ultimate Guide to Customizing Page Leads

Page Leads are the flagship features of Marketers Delight. With 6 fully-customizable Page Leads, you are only clicks away from creating beautiful, high-converting feature box systems onto your site.

Out of the box, a Page Lead already does a lot. It has plenty of room for you to input your content, and gives you the flexibility to customize it however you like.

To help get you started with coming up with cool Page Lead ideas, I’ve prepared some cool customizations for you to input to your site for your own use.

Use the table of contents section to the right to jump to which Page Lead you’re looking to customize.

Feature Box, Standard, Full-Width Leads ↩

Any of these tutorials can be applied to the feature box, standard lead or full-width lead.

For the sake of simplicity, I wrote the following to match the feature box (in admin → thesis → marketers delight → feature box), but you can apply these effects to your actual Page Leads in the page editor.

Creating a Simple Optin Form + Ribbon ↩

A pretty standard (but awesome) way of building a feature box in Marketers Delight is to have a simple ribbon and optin form. Lucky for you, both of these things are made for you already!

Here’s what it will look like:

To get started, login to your WordPress dashboard and navigate through the sidebar to Thesis – Marketers Delight – Feature Box.

Once you’re in the feature box section, you’ll see 2 input boxes. Ribbon Text and Feature Box Content. Go ahead and set the text for the Ribbon text, save it, and you’ll have an epic ribbon hanging from your feature box!

Now, in the Feature Box Content section, we are going to place out signup form. Putting a signup form in the feature box is a great way to maximize conversions, as it will be located in a pretty high spot on your blog.

To learn how to get your optin code and format it for ease, check out this tutorial from Kolakube:

Best Practices For Styling Input (Email Optin) Forms

Once you have your optin code, go ahead and paste it into the Feature Box Content section, and you should have a pretty nice, ribbon-ized feature box!

How to Create a Featured Image + Description (With Buttons!) ↩

Maybe you want to show-off a product, or your latest portfolio piece. I’m going to quickly show you how to create something like this in your feature box:

It’s really easy. It’ll be just like writing a new post in WordPress. We’re going to simply align an image to the right, create a headline and write out a few paragraph text.

First, go ahead and disable the ribbon. Do this by leaving the Ribbon Text field blank, and the ribbon will remove itself.

Now, place something like this into the Feature Box Content area:

<img class="alignright" src="http://demo.kolakube.com/marketers-delight/wp-content/blogs.dir/2/files/2012/01/md-screenshot.png">
<h3>See What Marketers Delight 2 is All About!</h3>
In all honesty, Marketers Delight is a beast of a theme.
It has a ton of things that will improve the way your site functions right out of the box. Of course, if you’re after good looks &mdash; it has that too.
Really quickly, I want to share with you 3 things about Marketers Delight that will serve as an instant upgrade to your site.
<a class="red button" href="#">Click here to continue reading</a>

The important part is the image has a class assigned to it called class="alignright". This makes the image float to the right (also, make sure it’s above ALL other content). You can float it to the left by using class="alignleft", instead.

And like always, you can change the color of the button to any of the following:

• green
• red
• orange
• blue
• gray
• dark

3 Column Feature Box Area ↩

Now we’re getting technical! Let’s create this:

It’s basically like having another 3 column footer, except at the top (and it’s not widgetized, but no biggie).

In the Feature Box Content section in your MD options panel, paste this HTML to create the columns:

<div class="feat-column">
	...
</div>
<div class="feat-column">
	...
</div>
<div class="feat-column last">
	...
</div>

Inside, you can format your columns however you like.

Now, open up custom.css file in root/wp-content/themes/thesis_18x/custom/ and paste this CSS in the designated area:

.feat-column {
     float: left;
     margin-right: 5%;
     width: 30%;
}
.feat-column.last { /* important. removes spacing on the last column */
     margin-right: 0;
}

Save, upload, and start filling up your columns! Here’s an example of the code I used to create the feature box I showed you in the screenshot:

<div class="feat-column">
	<h3>This is Column 1!</h3>
	<img class="alignright" src="http://demo.kolakube.com/marketers-delight/wp-content/blogs.dir/2/files/2012/01/alex-no-face.png">
	Look, I aligned an image of myself to the right! Use the same technique as the last tutorial for easy floating!
</div>
<div class="feat-column">
	<h3>Rocking Column 2</h3>
	For column 2, I feel like throwing a big 'ol button below. Buttons are meant to be clicked, so why not put one in the highest converting spot on the site?
	<a class="red button" href="#">Click this button and go crazy</a>
</div>
<div class="feat-column last">
	<h3>Smart Optin Form!</h3>
	Marketers Delight is fantastic, because you only need to optimize one optin form and you can use it anywhere on your site. Now, signup for updates!
	[optin code here]
</div>

Note that you can also keep the ribbon enabled and still have an awesome-looking 3 column feature box:

Table Leads ↩

Create a “Pricing” Sticker ↩

The Table Lead is the perfect lead to create a beautiful pricing table, or other kinds of charts. I’m going to show you how to create this:

Let’s get right to it.

For starters, make sure you have the Table Page Lead enabled on your page.

Let’s knock out the HTML. Paste this HTML code to the bottom of your Table x content box.

<span class="price">$37</span>

Now, open up custom.css file and add this to the designated area:

.table_chart_lead .light,
.table_chart_lead .dark {
	position: relative
}
.table_chart_lead .format_text .price {
	background: #ae2525 url(images/textures/soft_noise.png);	/* go ahead and change the background color! */
	border: 1px solid rgba(0, 0, 0, 0.7);
	display: block;
	font-size: 20px;
	height: 25px;
	padding: 15px 10px;
	position: absolute;
	top: -10px;	/* may require some tweaking */
	right: -20px;	/* may require some tweaking */
	width: 35px;
	-moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
	-webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px
}

Comparison Table ↩

Say you want to compare different plans of your product or service. Something like this:

Go to your Table Lead options and place an unordered list in one of the content boxes like this:

<h3>Premium Plan</h3>
See what paying us $25,000 a month gets you:
<ul class="checklist">
    <li class="check">Unlimited Web Hosting</li>
    <li class="check">Unlimited Domains</li>
    <li class="check">Unlimited Emails</li>
    <li class="unchecked">24/7 Live Support</li>
    <li class="unchecked">Actual Human Representatives</li>
</ul>

Now, go find a couple of icons. I use IconFinder and FindIcons usually (for this example I used this and this).

Upload your icons to your image directory, and add this to your CSS:

.table_chart_lead ul.checklist {
	text-align: left
}
	.table_chart_lead ul.checklist li.check {
		list-style-image: url(images/success-image.png);
	}
	.table_chart_lead ul.checklist li.unchecked {
		list-style-image: url(images/unsuccess-image.png)
	}

Save, and you’re set!