Features by Screen: Pages (Landing Pages)

Landing Pages- What They Are and WHY you NEED to Use 'em

[Note: SendPepper Habanero and above only]

If you're paying to drive visitors to your website - and by 'paying' we mean TIME or MONEY - you need to know what landing pages are.

Here's the quick story: There are several different BENEFITS that folks may be looking for when they turn to you, right? If you sell insurance, they may want the best rates, a deeply knowledgeable rep, quick and dependable service, more coverage options, or maybe someone that specializes in insuring boats or motorcycles or whatever... But there ARE several different benefits that may be the most important for a specific prospect.

Now. The homepage on your website.  It's gotta be pretty 'generic' in the sense that you want to cover all the bases. You talk about your cheap rates, your great service, and all the available whatevers that you offer. It's sort of a catch-all page, because you don't ever know who's going to show up there, and you want to try to capture the interest of as many as possible.

BUT. When you're driving traffic to your website, you have control of who goes where. And when you have that control, a HUGE opportunity is available.

Let's say you're spending money to advertise on Google with Adwords. Most small businesses still send that traffic to their homepages. That's a terrible mistake.

Instead, you want to break your Adwords campaign into 'ad groups' that represent the specific benefits that a prospect may be looking for. So when someone does a search for 'motorcycle insurance' you don't just send them to your homepage...instead you send them to a 'landing page' that is specifically designed to match the interest of the prospect.

So it says 'Welcome! You've found Motorcycle Insurance Experts!' (or something along those lines.)

Now, your prospect feels like THEY'VE FOUND EXACTLY WHAT THEY WERE LOOKING FOR.

And the difference this makes is DRAMATIC. This one simple tweak will double, triple, maybe quadruple your 'conversion rate'...that is, percentage of people who get in touch (fill out a form or call, etc) compared to visitors. Sending people to your homepage, a 8 or 10% conversion rate is typical. Good, even.

To a good landing page, 30-50% is common. Note: This applies not just to adwords. If you're driving traffic to your homepage from offline ads, direct mail, social media, your business card, tradeshows, ANYTHING... you should be driving them to landing pages! So. Why don't more marketers use specific landing pages for each and every campaign they run, online or off?

Well, experts DO. They've figured this out and all campaigns are directed at landing pages.

Smaller businesses don't because it's a giant pain in the neck.  Imagine: every time you run an ad, now you've got to get a page designed, write copy, get (and pay) a coder to make your design into a web page, host the page, test, etc. It just isn't going to happen. That's what SendPepper Habanero is all about. Instead of all that hassle, you can use our drag-and-drop web page builder to make and host new pages in minutes without any technical knowledge at all.

Read on down this page and watch the videos on the right throughout the page for specific instructions on creating and working with Landing Pages. But however you get it done, just do it. If you're paying to drive traffic to your homepage, there is NO SIMPLER WAY to double your results. It's truly a no-brainer.

Our system allows you to create custom landing pages on the fly. Landing pages are usually single web pages that are designed to ‘go with’ a particular marketing campaign. When someone is turned on by your ad, your postcard or your email, they’ll take a little risk with their time and click a link or type a URL. What they see next is vitally important. Drop them onto your home page to flounder about and they’ll usually wander off. But, drop them onto a page that matches the campaign, reiterates the message in the ad, email, or postcard, and is personalized to them, and you’ll see response rates soar.  If you’re currently sending ad responders to your homepage, you’ll be excited with the increase in response you’ll get when you send them to a custom landing page instead. You can host them yourself or you can have us host them…free!

Pages Tab Overview

If you click on the orange ‘Pages’ tab, you’ll be taken to the 'Landing Page' manager area.

Here you’ll find a list of all the landing pages you’ve already created. To the left of the name of the landing page are several icons, in order from left to right, they are:

“Edit Landing Page”

This is pretty self-explanatory. Use this when you want to edit a landing page.

"Load More Recent Auto-Save"

The "floppy disk" icon takes you to the most recently auto-saved version of your  system saves your page every few minutes. This is great because if you forget to save or you lose your internet connection while you're working, it makes it so that you don't lose the work you've done. 

“Delete Landing Page”

Also pretty self-explanatory. Use this when you want to get rid of a landing page. Be sure that you’re not currently driving any traffic to that page, though, before you delete it, as any traffic directed to that location will encounter an error message and will ultimately be lost to you.

“Copy Landing Page”

Use the "copy" icon when you’d like to make a landing page that’s nearly identical to one you’ve already created. This in an incredible time-saver! Once you’ve created the copy, you can go in and change the name, the hosting, and edit the new version to your specifications, and voila, you’re done!

Creating a New Landing Page 

SendPepper makes creating landing pages as easy as pie.  You can create landing pages from scratch or from one of the templates we’ve provided for you. The editor is simple to use, even for a complete newbie! Here is the basic order of operations for making landing pages: brainstorm, create, and set hosting!

Brainstorm

Purpose of the Landing Page

• WHAT is your intention for the landing page?

  Most commonly, people use landing pages to get a visitor to opt-in to their mailing list so they can begin building a relationship with them and eventually sell to them, however, you might also drive traffic to a landing page in order to sell them something right then and there.

• WHO will be landing on it?
• WHERE will they be coming from?

       An email you’ve sent? A banner? A postcard they got from you? A Pay Per Click Ad? If from a pay per click ad (adwords, or other), what keywords were they searching for? And thus…what would they be expecting/hoping to see once they arrive at your site?

Your Offer

What is your offer? A great offer is the cornerstone of selling well. It should leave your prospects feeling as though they would be utterly FOOLISH not to take you up on it. Keep in mind that you MAY be OFFERRING a FREE THING. But, your offer is still important. Just because it’s free doesn’t mean you don’t still have to sell it! When someone gives you their contact info in exchange for a free thing, their name and email address are the currency they’re paying with!

There’s a TON we could say about creating a compelling offer, but in general:

• Testimonials rule! People need to know you’re for real, that your thing works, that it can work for them, and that it’s worked for others LIKE them. Testimonials are where to do all that.

• Also...nothing but nothing mobilizes human beings like a rapidly diminishing supply of something they want, so…use scarcity. Even if you’ve got an unlimited supply, it should generally appear like they’re flyin’ out the door and the prospect will be lucky to get their hands on one.

Imagery and Layout

What kind of photo(s) or graphic(s) best convey your message? Take a look around at other landing pages for ideas. Remember, it’s ALL been done before, and nobody’s handing out points for originality, so…don’t be afraid to borrow from the greats! Looking to great landing pages to inspire your own is a GOOD THING. Now…that said, there is a big difference between borrowing and ripping off. You must respect intellectual property. Don’t ‘copy’ other people’s stuff, and don’t use copyrighted images without permission.

Generally, your landing page should be clear, simple, uncluttered, and leave the visitor sure about what they should do: fill out the form or buy now, or whatever it is you want them to do.

We’ve provided some incredible, FREE images for you to use. Have a look through the ‘Public’ image folder to see if there’s something in there that would work well. We’re adding new images all the time so keep checking back!

Getting images for your landing pages

You can go to iStockPhoto.com to get royalty free photos, or you can use the FREE (and yes, totally LEGAL!) photo-getting method that we love! You can go to flickr.com and search for images offered under the Creative Commons license. Be sure that you choose only images where the author is allowing the free reproduction of the image for COMMERCIAL use. Each image will specify what the conditions of use are. All creative commons images must be attributed (must be contain a credit to the author of the image or graphic). Read this guide by Skellie to learn all about finding and using incredible flickr images.

Create 

Once you’ve brainstormed your landing page, and have a general game plan…you’re ready to start creating it! 

Go to the ‘Pages’ tab in your SendPepper account.

Click “New Landing Page ” in the upper right-hand corner.

From here, you have 3 options:

1. Easy Pages: This option allows you to design your landing page using an interface similar to Adobe Photoshop or Microsoft Paint.

2. Code Mode: Choose this option to design the landing page using the same interface you use to design emails. Select this option if you already have the HTML of the page made.

3. Redirect: Use this option to point a tracked or hosted domain to your existing web site.

Using "Easy Pages"

Let's go through all the features as you create your landing page using Easy Pages.

Working On

It’s a good idea to name your landing page when you first get started. Do so by clicking on the title next to the words “working on.” This is only for your reference, so call it what will have you best remember what it is.

Page Title

This is what will show up on the ‘tab’ when people are on your landing page. It’s one element that search engines use to decide what a page is about, and thus index the page. So title the page something relevant, short, and if you’re shooting for SEO points (which means you’ll be hosting it on your site), you can also name it a keyword that you’re trying to get your site to rank for.

Page URL

This is where you set the hosting for your page. You have 2 options for hosting your landing pages: 

1. You can have SendPepper host the page for you on one of our public domains. Select a domain on the right and type a unique sub-domain on the left, and your website will be online the second you save the landing page.

2. You can use your own domain. If you own a domain or want to go purchase a dedicated domain for hosting your landing pages, click here for detailed step-by-step instructions on how to set up hosting on your own domain.

Import

Use this if you’d like to use another design you’ve already created as your starting point for this design. You’ll be given a list of all your other designs to choose from including other versions of the current landing page you’re working on.

Preview

Press this to see what the landing page *should* look like once it’s actually live on the web. We say SHOULD, because since there are so many different browsers and versions of each browser, it’s tough to say with 100% certainty that your landing page will definitely show up looking like that for everyone. However, it’s easy enough to view it live. Just click the “Page URL” link, choose to have us host it on one of our public domains (even if you’ll eventually host it on your own), then, once you’ve assigned it to one of our domains, you can just copy and past that URL into a new tab in your browser and check it out live on the web.

Background

This is a simple color picker that allows you to set the color of your background. You can also upload an image for a background in order to create a gradient type background.

Adding and Working With New Layers

Objects including images, text, shapes, gradients, and SmartForms on your landing page will be created as “layers,” which, if you’ve used Adobe Photoshop, or Paint, should be familiar to you. If not, they’re very intuitive and you’ll quickly get the hang of them.

Click “New Item” to begin creating your landing page.  From here, you can choose to add a new layer.

Adding a New Layer

1. Click “New Item” near the top of the screen on the very right.

2. From here, you can choose to add one of five different layer types: 

• Text Area
• Shape
• Gradient
• Image
• Form
• Video

Selecting a Layer

Click on the layer bar for that layer in the layer stack, or click on the layer in the actual landing page. You’ll know it’s selected when the layer bar turns dark blue. You must first select any layer before you can edit it (resize, reposition, etc.).  If you select a text layer in this way, it will make it so you can edit the text.

Re-ordering Layers

You can drag the layers within the “layer stack” on the right to control which are on the top and bottom (and everywhere in between) of the stack. If a given layer is “underneath” another layer, it may not be visible because it’s hiding underneath another layer. If you want that layer to show, you’ll need to drag it in the layer stack so it’s above the layers that might otherwise be blocking it.

Resizing a Layer

There are two ways to do this:

Dragging method

1. Just select the layer you want to resize (by clicking on the layer on the landing page design, OR in the layer stack on the right).
2. Then grab (click and hold) one of the little red squares, or “handles” on the edges and drag it outward to expand, or inward to shrink. Note that if you want to keep the height to width ratio the same while you resize the layer, you can do so either by using one of the handles on the corners (as opposed to the sides) of the frame, OR by holding shift while you resize. This is especially useful when resizing pictures so you don’t accidentally change the width, but not the height, or vise versa, thus, distorting the image.

Numeric Method

This method allows you to enter in specific height/width measurement (in pixels) for the size of the photo as you’d like it to be

1. Start by selecting the layer you’d like to resize.
2. Then, in the upper right of the editor screen you’ll see the current Height and Width measurements for that layer. Simply select EITHER the high, or the width value, and change it to whatever you’d like. This option automatically keeps the height to width ratio (or proportions) of the image the same. Thus, if you change the width, the height value will instantly be changed as well, in order to maintain the proportions of the layer. This method of resizing is good if you’re looking to make exact changes, and where specificity is key.

Repositioning a Layer

There are two ways to do this: 

Drag and drop method:

1. Just select the layer you want to reposition (by clicking on the layer on the landing page design, OR in the layer stack on the right).
2. Grab the layer (by clicking and holding within the layer itself (not in the layer stack).
3. Drag and drop it wherever you like.

Numeric Method (Distance from Top and Left Edge)

1. Start by selecting the layer you’d like to reposition.
2. Then, in the upper right of the editor of the editor screen you’ll see the current position for that layer. The positioning is shown in the following measurement: “Left” This is simply the number of pixels the layer is from the left-hand edge of the landing page. Top: This is the number of pixels the layer is from the top edge of the landing page.
3. If you want to change the horizontal positioning of the layer, simply enter the number of pixels you’d like the layer to be from the left and press enter. Similarly, if you’d like to change the vertical positioning of the layer, enter the number of pixels you’d like the layer to be away from the top of the card. This method of repositioning is good if you’re looking to make exact changes, and where specificity is key. 

Resizing and Repositioning Layers With Precision

(Distance from nearby shape) This is useful when you’re trying to get two shapes to line up perfectly or create borders/frames.

1. Select the shape you’d like to move or resize.
2. Press and hold the ctrl key (command on a mac).
3. The distance in pixels that the selected shape’s edges are from the nearest shape will appear along with a guide line. The line will appear in green when that edge is perfectly aligned with the next shape’s edge and the number will be 0, since there is a 0 pixel distance between the shapes.
4. Use the arrow keys to ‘nudge’ (reposition) the selected layer, or drag the layer for bigger moves or resizing, but now, with the help of the distance in pixels.
5. As you move or resize the layer, the number will change appropriately.

Changing the Opacity of a Layer

The “Opacity” of layer simply means: How opaque it is. To change the opacity of a layer:

1. Select the layer for which you’d like to change the opacity (by clicking on the layer on the landing page design, OR in the layer stack on the right). If the opacity slider is slid all the way to the right, or at 100% opacity, the image is fully opaque, and nothing underneath the layer can be seen (unless it’s an image with a transparent background, but we’ll get more into that later). 
2. Pull the opacity slider toward the left and the layer will become less opaque (more transparent), thus allowing whatever might be underneath (the white background, or other layers) to show through.  

Picking the Color of a Layer

The color-picker is pretty intuitive. Play with it and get accustomed to it. One very cool thing about it is that you can actually choose your color by entering the x value, which allows you to replicate colors exactly, from other areas in your landing page, from other marketing materials you’ve got, to something you’ve seen on the web.

Working with Text Layers

To create a new text layer, select: “New Item” > “Text Area.”

You have control over many formatting options in the toolbar. The text formatting toolbar is only visible when you are working on a text layer. Many of text options are quite standard, so don’t need a lot of explaining. From left to right, they are:

Top Toolbar

• Change Font

• Change text size

• Change text color

• Bold, Italicize, Underline

• Alignment: Left, Centered, right

• Bulleting

• Numbering

• Line Spacing: this allows you to change the spacing between the lines to suit your design preference.

• Letter Spacing (a.k.a. kerning): This allows you to change the space between letters to suit your design preference.

Bottom Toolbar

• Insert Merge field: To add a merge field from the contact’s database, just select the field from the drop down menu and click the Insert Field button. Note that you can also simply type the merge field into the body of the email, or even the subject line for the same effect. Merge fields are always surrounded by [brackets].

Working with Shape Layers

To create a new shape layer, select: “New Item” > “Shape.”

Like any of the other layer types, you can resize shape layers by using the red handles on the edges when the layer is selected OR specifically to the exact size you’d like with the pixel value field on the right hand side of the toolbar.  You can choose which kind of shape you’d like to create from the toolbar as well. Your choices are: 

• Rectangle
• Circle
• Rectangle with rounded corners 

Just to the right of the shape chooser is the color picker and the opacity control slider bar.

Working with Gradient Layers

To create a new gradient layer, select: “New Item” > “Gradient.”

On the left hand side of the toolbar you’ll see your shape selection choices. Your gradient area can be in any of the available shapes: Rectangle, Circle, or Rectangle with rounded corners.

Gradient Adjustment Slider

1. To change the colors in your gradient, double click the rectangle that sits underneath the little ‘carrot shaped pointer.’ For more on our color picker, check it out here x.
2. To increase the distance of the transition (and thus, the subtlety of the gradation) from one color to the next in your gradient layer, move the two sliders further apart. To decrease the distance and subtlety of the gradation/transition from one color to the next, move the sliders closer together.
3. To increase the area of the color, say, on the left, move both sliders to the right, and vise versa.
4. To change the direction of the gradient from vertical to horizontal, or vise versa, click the button just next to the Gradient Adjustment Slider.
5. To change the opacity of the gradient layer, use the Opacity slider.

Working with Image Layers

To create a new Image layer, select: “New Item” > “ Image.”

From here, you may choose to:

Use One of the Images We’ve Provided for Your Use Free of Charge

• These images are located in the ‘Public’ folder. Browse around, find one you like, click it, and then click ‘accept.’ You’ll see it appear on your card in a moment!

Use a New Image

• On the bottom of the “Select an Image” popup window, you’ll find a link to “+Add New File.”

• Here you can choose to upload a file from your computer by clicking the ‘browse button,’ locating the file on your computer, selecting it and uploading it.

• OR if you’d like to use an image that’s already online somewhere, you can choose “Enter image URL” option, and do just that. Simply enter the address at which the image you’d like to use is hosted.

• WARNING: You must either have created an image, or have permission from its author in order to use a copyrighted image. You may, however, use certain images offered under the creative commons license.

• Finally, you’ll select which folder(s) you’d like this image to be put into and click Upload.

Use an Image You’ve Already Uploaded

• In this case, simply locate the photo in its folder, select it and hit accept.

You can make the image into any of the three shapes available in the toolbar: Rectangle, Circle, and Rectangle with rounded corners

You can replace an image by hitting the “select image” button and changing it out for a different one.

Cropping an image is simple. Just select the image, and hit the “crop” button.

Using Logos and Other Graphics and Images With Transparent Backgrounds

Sometimes it’s useful to use your logo or other images, with transparent backgrounds so that the image underneath can show through the negative spaces. 

If you already have a version of the image you want to use saved as a .png with a transparent background, you can go ahead and upload and use it. 

If not, you’ll need to create your image in Photoshop with a transparent background. Thanks to the nice folks at MediaCollege.com, we’re able to provide you with step-by-step instructions on how to do that! Since .jpg formatted images don’t support transparent backgrounds, you’ll save your image as a .png and upload and use it as you would any other image file!

Working with Form Layers

• To create a new Form layer, select: “New Item” > “Form.”
• Then, go up to left side of the tool bar to the drop down menu, which contains all of the different SmartForms, and 'Tell-a-Friend' Forms you've created thus far.
• You must already have created the SmartForm or the 'Tell-a-Friend' Form you'd like to add to the landing page.
• From there, you can drag and drop it, change the font, and get it just how you want it.

Working Video Layers

Note that in order to insert videos into your Landing Pages (or your WordPress pages for that matter), you must first upload them to the Video Manager in the Admin screen.

• To create a new Video layer, select: “New Item” > “Video”
• Then, go up to left side of the tool bar to the drop down menu, which contains all of the different Videos you have uploaded into the Video Manager.
• You must already have uploaded your video to the Video Manager in order to add it to the landing page.
• From there, you can drag and drop it, change the font, and get it just how you want it.

Setting Hosting For your Landing Page

You have two options for hosting your landing pages. 

Public Domains

You can have SendPepper or OfficeAutopilot host the page for you on one of our public domains. These are domains we own, but which we allow our customers to host their landing pages at. Currently, your options are:

• zreply.com
• viprespond.com
• vip2site.com
• vipreplynow.com
• mypepperpage.com

If you decide you'd like to use a public domain, you'll start by selecting a domain on the right, then type a unique sub-domain on the left, and your webpage will be online the second you save the landing page.

So, to give a real-life example of this: say you have a solar panel sales and installation business called "USolar", and you wanted a landing page with a signup form where prospects could opt-in to get your free guide on the "Top 5 Reasons to Go Solar". You might host the landing page at our public domain, viprespond.com, but add your business name (USolar) as a unique subdomain that would go in front of the public domain, and you'd add a filename at the end of the URL to indicate that this is the page where people go, specifically to download the "Top 5 Ways..." guide. So, you might set the final URL at the public domain to be: usolar.viprespond.com/top_5_ways

Your Own Domain

If you'd like to buy a domain specifically to host your pages at, you can do that also. The advantage here is that you can have the URL's of your landing pages more closely match your business name and/or main website URL, and cut out the extra length that comes with using one of our public domains. Note that you can't actually use the domain where your website is currently hosted. The reason for this is complex, but the short answer is "sorry, we wish we could, but we can't."

Many people work around this by buying a separate domain that is close to your original domain name, or which is related. If your main website is, for instance, USolar.com, you might buy "MySolar.com" or "YouSolar.com".

Or, if you intend to use the landing pages that will be hosted here to generate PURLs, you could even get tricky and buy a domain name that cleverly works in conjunction with people's first name. In the example of the solar panels business, you might go out and buy "wants_to_go_solar.com", and when you send out a purl to, say, Sarah Smith driving her to that landing page, the system would generate the following unique PURL for her: Sarah.Wants_to_go_solar.com.  Cool, huh?

So, once you've bought your own domain, make sure your domain is pointed to ns1.moon-ray.com and ns2.moon-ray.com. Leave a couple of hours (up to a day sometimes) for the DNS switch-a-roo to take effect). Finally, type it into the indicated field and you're all set. To see exactly how to do this, watch the video here.

Split Testing Landing Pages

You can create alternate versions of your landing page and test which works better. Simply click the “create new version” link in the toolbar while you’re editing a page. This will be the “B” version. You can start from scratch with this new version, or you can start from any other page you’ve created, including the ‘A’ version of the page you’re working on, by clicking the “import.” You can see the results each version of your landing page is getting by simply clicking on the name of the landing page in the Landing page screen, which will reveal each of the versions along with the number of visits and conversions to each.

The "Thank You Page"

The "Thank You Page" is just a single landing page where someone will be landed on once they click submit on the SmartForm. It's so named because the page typically thanks the person for giving their info. This is also a great place to tell people what they should do next ("Go check your email for your free thing, and be looking for our monthly newsletters" or something similar). We provide a generic thank you page which you can customize to suit your fancy. You can even make copies of the original, generic Thank You page and customize it anew for each campaign you're creating for maximum 

FAQs

Some questions we've heard...

"Hey! My Landing Page isn't looking at all like I formatted it. Text is misaligned. Certain parts are missing. What the heck is going on?"

"How do I use PURLs in my emails and postcards?"

"How do I use PURLs in 3rd party mailings?"

"How do I link PURLs to images in an email?"

"What are the advantages and dissadvantages of hosting my landing page with you vs. on a domain I own?"

"How do I set up a domain of my own for my landing pages and set up the hosting?"

"Can I host my landing pages on mydomain.com?"

"How do I get the landing page templates into my account?"

"I created  a split test for my landing page but everytime I go to the url only one version shows up?"

"Why when I set the Thank You Page to the same page using the drop down selector and the form is filled out I get the new information but an old lead disappears?"

"I see you have a bunch of free images you've provided. I need to edit or rotate one of the images. How can I do that?"

How come I am seeing no conversions on my landing page?

I'd like to change the formatting and layout of my landing page using CSS. How can I get access to your stylesheets or better yet, how can I load my own?

Go to top