LeadPages Logo

Customizing LeadPages in WordPress

LeadPages is a great service for building landing pages and email opt-ins but it can be tricky to get their existing landing pages exactly how you want them.

The LeadPages editor works well for editing all the main elements but sometimes you want to style something a bit different or hide a specific element. This is where their editor falls short.

Thankfully, by using their HTML export option with WordPress Page Templates, we can make our own edits with custom CSS and Javascript.

Set up a WordPress Page Template

First we need to set up a WordPress Page Template. This creates a custom page layout outside the default theme you’re using.

  1. Create a new file in your favourite text editor
  2. Add the following to the file:
    
    Custom Page Template outside the WordPress Theme
  3. Save the file as “page-custom-template.php”
  4. Drop the file into the root level of your WP theme (/wp-content/themes/THEME_NAME) where “THEME_NAME” is the name of the theme you’re using.
  5. Create a new page in WordPress
  6. Give it a default title (doesn’t matter)
  7. In the right sidebar in “Page Attributes” under Template, select the template we created.
    Wordpress Custom Page Template
  8. Leave the content in the page blank and publish the page.

Now if you view the live version of the page you should see a blank page with “Custom Page Template outside the WordPress Theme” on it. Click here to see an example.

If you just see the standard theme layout then your theme likely does not have the proper support for custom page templates.

Add LeadPages HTML Export Code

Time to add our LeadPages landing page into our custom page.

  1. Follow the LeadPages steps for exporting the HTML of your landing page
  2. Open that file up in a text editor
  3. Copy + Paste its contents into page-custom-template.php so now our page should look something like this:
    
    
    
    
    	%MINIFYHTMLd1443ceb8e2071e063545da9c75a735612%
    	
            
    

Save the page template file and reload it the live version in our browser and we should see our LeadPage. Click here to see an example.

Customizing the LeadPage

Now that our LeadPage is loading in our custom page template we can add any amount of CSS or Javascript into the source of our template file (page-custom-template.php) to hide or customize whatever elements we want.

Here’s the CSS for removing the video element in the above example:





	%MINIFYHTMLd1443ceb8e2071e063545da9c75a735613%%MINIFYHTMLd1443ceb8e2071e063545da9c75a735634%
	
        

I added the style tag just before closing tag (Lines 9-11). Here’s our original page and here’s the new page with changes. Notice the blue video element is now hidden.

Summary

We now have full style control over our LeadPage, are still able to use LeadPages’ editor to make any changes we want and maintain all the tracking and conversion data that we’ve come to love about LeadPages.

In a future post, I’ll show how to integrate this into the OptimizePress theme which is a little trickier due to its complexity.

If you run into any issues leave a comment below and I’ll do my best to help.

 

Continue Reading

  • No Related Posts
  • This post was absolutely Amazing!!! I’m new to LeadPages and have been running my head into the wall trying to figure out how to make css adjustments to the pages. Thank You!!! The only problem I’m having now is finding out where to insert the css coding. If you can share some info on how to actually go in and make the changes.. that would be GREAT!!! Thanks Again!

    • Thanks Reggie.

      I’ll flesh out some css/javascript examples today.

      • Ok… Cool. So I see the css coding, but where do you put it.. in the same php script we created above or in the WordPress editor or in the individual WordPress page?

        • Ya it’s in the php script. I’ve added the full source and tried to make it clearer now.

          • Thanks for all your help!!! This worked perfectly & my LeadPage Landing Page is PERFECT!!!

    • Ok have another look Reggie. Let me know if you still have any questions.

  • Dave Hayes

    If all you want to do is add some custom CSS, there’s a much easier way to do that. In the builder while editing your page, click “Tracking Code” in the sidebar and then paste your style tag into the “Head Tracking Code” box and then save it.

    Also, on that specific template, you can hide the video using just the builder. Just make sure when you click on the video, then click “Hide” that you are clicking the “OK” button before doing anything else. It doesn’t actually save the change unless you do that. If I don’t click the OK button, I get the same behavior you’re showing.

    • Oh nice. Thanks Dave. That’s great to know.

      I’m usually working with other marketers where I don’t normally have access to their LP accounts so this was my work around.

  • Thanks for posting this. I’ve been trying to figure out how to use a standard header and footer on all LeadPages and their support has been less than helpful.

    • Ya with a little javascript and css you should be able to do that no prob. Let me know if you need help.

  • Andrew Worsnop

    What about adding a HTML element? All I’d like is a button to login for existing users.

    If I add it directly into the exported HTML will LeadPages overwrite it? Should I dynamically add it using JS?

    • If you add it directly to the exported HTML it will show up but likely not where you want it.

      Best would be to do via JS onload, and append it where needed.

      • Andrew Worsnop

        Cheers!

  • George Smith

    Hey Skye, thanks for your tutorial, nice intro into customising Leadpages in WordPress.
    I have a query, do you know anywhere that provides a tutorial on building your own Leadpages (e.g. HTML, CSS and accompanying JSON file) for upload to your Leadpages account?
    I’ve been looking in the usual places but don’t seem to be able to find anywhere.
    Thanks!

    • Hey George. I haven’t looked into that at all but I would guess that LeadPages would have a tutorial on it.

      • George Smith

        Hey Skye, they don’t actually have a tutorial so much as a basic reference (http://docs.leadpages.net/), but it’s not as simple as I would have thought it would be to follow. I also find I learn better from a working example than building from scratch, which is why I was hoping there would be some example templates out there, but it seems that there isn’t a single one that I can find :S

        • Ya I definitely like working from an example.

          If it was me, I would download all the resources from one of their existing templates and dissect it. Use something like SiteSucker: http://www.sitesucker.us/home.html to grab all the files.

          LP is great but sometimes I find the lack of flexibility in the templates frustrating. “I just want this one extra elements!! Let me add it in.”

          I guess once you got comfortable with the customization of them you could download the existing template, modify to how you wanted it, then re-upload to your account.

          Let me know how it goes.

          • George Smith

            Hey Skye, thanks for the link, I’ll give it a try. The main issue is the .json file, which I’m going to suspect won’t get copied, that’s the real key because you can download any template from your account, but you won’t get the JSON file to accompany it.
            I’ll keep searching!

          • Ya that’s true but if it follows the template format listed in their docs you could probably guess where it is and the file name.

          • George Smith

            Hey Skye, I tried all sorts of ways (I don’t have a Mac so couldn’t use sitesucker, but I did try HTTrack and others) but no cigar. I couldn’t find a way to get the JSON file 🙁

          • hi this may not be what you’re asking, but leadpages offers a bunch of free templates on their site, when you download one you get all the associated files including html, css and the json file in the meta folder….
            maybe you could use this as a template?…..

            i initially wanted to download a free template and upload it for use on wordpress (i dont have a leadpages account) but it turned out to be too complicated for me ah well

            hope you find what you’re looking for ^_^

          • George Smith

            Hey gifthosu!
            Thanks for the suggestion, which template in particular did you use? I’ve downloaded a few and none came with the JSON file or meta folder.
            Also, what method did you use to get your file-did you create a new Leadpage with a selected template then save it for external HTML use or did you download one from the blog?

            Thanks!

          • hi! here’s the link to the template i downloaded http://blog.leadpages.net/template-download-highest-converting-free-report-landing-page-weve-ever-used/

            i guess it has a json folder because it’s “new and improved” version of an older template? not quite sure.

          • George Smith

            Thanks gifthosu!

          • you’re welcome ^_^ happy to help

          • George did that work for ya?

          • George Smith

            I checked it out and the template is extremely minimal, so only several elements to work with, but it’s an okay start.

            It turns out however that the Leadpages team published a template to GitHub in the middle of this year with an example page and the JSON file.

            It’s actually broken if you try to use it as is, you have to remove the external font calls in the bootstrap.min.css CSS file, and the form.html is now deprecated, but will still upload. (but you get some warning errors)

            It’s called the Leadpages Template Starter Kit and you can find it here:

            https://github.com/LeadPages/template-starter-kit

            It’s not really spoken about very much, and surprisingly isn’t mentioned on the Leadpages Development site where you’d think that they’d link to it seeing as it’s relevant.

            The template doesn’t do any mobile responsiveness as far as I can see, but it’s a good way to see a nice implementation of the JSON meta file.

            Apparently Scott Silvi is working on creating a new template as well as updating the tutorial, but I wouldn’t hold my breath.

          • Thanks for the update George. It’s crazy how bad documentation can be. I’ve dealt with my share for PayPal, Facebook and others over the years.

  • Hey Skye, I created a launch page in leadpages (with facebook comments that they automatically set-up for you). Is there any way to transfer those comments on to a new optimizepress page?

    • hmmm never tried that before. If you’re using the same URL and the same FB app id I feel like it should transfer.

      • Leadpages must use a different app or something. I’ll check around some more. Thanks for the reply.

        • Looks like they’re just associated with the URL: http://stackoverflow.com/questions/6589170/is-it-possible-to-move-facebook-comments-from-one-url-to-another.
          Just looked at my of my self hosted LP pages (http://bestsellerrankingpro.com) and it looks to use the actual domain name and not your LP account URL (account.leadpages.net/page-name) so I’m going to guess that transfer is possible.

          • Thanks Skye. I checked out your page. Looks good. But I noticed yours is a self-hosted ‘leadpage’ still. I’m testing to see if I can transfer my comments to a optimizepress, non-leadpages page.

          • Yea. It’s self hosted LP with an Optimize Press tie in to OP Member. I meant to write a post on it but haven’t had the time.

            If your page was LP hosted then I don’t think you’ll be able to transfer the comments as Facebook will have them locked to your LP account URL and you won’t be able to recreate that with OP.

          • As much as i love LP, this is one of those sneaky things I don’t like. Many marketers, like Jeff Walker will use the same launch sequence time after time. So, those FB comments do start to rack up. But if those comments are on LP, it seems like you own them as long as you’re a LP customer. (…things that make you go, “…hmm”)

  • Cameron Michael Reese

    Hey Skye,

    I am looking into doing this, because I need to tweak certain things on my landing page, do an auto-redirecting thank you page, etc.

    My question to you is, when you do this, do you lose the leadpages functionality of split AB testing and using their page builder to make instant changes?

    If so, what are some work-arounds that you use to test pages and get analytics? Are there other wordpress plugins that do this just as well?

    Sorry if this is a little elementary, I am new to this and considering going the HTML/CSS route for the first time.

    Thanks a bunch,

    Cameron

    • You still get all of LP’s analytics. I haven’t tested the A/B functionality but it should still work although any changes you make via CSS/JS could do unwanted things on your other testing page. ie. you’d need to test it and possibly have dynamic loading CSS depending on which page LP loads for their A/B test.

      Hope that makes sense.

  • MonaMarie

    Did you ever post the OptimizePress integration? I’m in desperate need for some customizing direction with OP. Thanks. This sure helps with LeadPages.