KhaiMun.com header image ≡ Menu
 

How To Create An Ultra Clean Landing Page Template With OptimizePress 2.0

In my previous post, I showed how to build a OptimizePress 2.0 membership site. In this tutorial, I’m going to show you how to build an ultra clean OP landing page from scratch.

By the way, a landing page is a web page where you want people to land on and take a specific action. It can be either clicking a button, or fill out an opt-in form for your offer.

There’re a couple of things you need to plan beforehand in order to build a nice page:

  • Page Layout:  Are you going to set up a full-width or fixed-width page
  • Typography: Font style, size, color, spacing, and etc. that you prefer
  • Row: Number of rows that you want to insert in the LiveEditor system
  • Element: List down the elements that you will be adding for each row

Click-By-Click Video Demonstration:

OptimizePress 2.0 ultra clean landing page template:

#1 Launch PageBuilder And Use The Blank Page Option: Give a name to the page, select a thumbnail; under Select Page Presets, tick Blank Page, then proceed to Step 2.

Tick Marketing Site Page as the type of page you want to create and proceed to Step 3. Choose Template Style 1 – Full-Width as your overall page style, and proceed to Step 4.

Leave customization options OFF for all, then click Save Settings & Launch Live Editor.

#2 Customize The Page Typography Settings: In the LiveEditor, click Typography Settings (top left) and set the font-style. You can also use the “Theme Default” settings.

I usually use Open Sans font for the H1 – H3 headings, and Arial font for the usual text.

#3 Add A New Row And Edit The Row Options: In the LiveEditor, click Add New Row button and insert a 1 Column simple layout into the page. Click on the pencil icon:

You MUST do this for each new row you add. Under Row options:

  • Always TICK the Is it a full width row? box
  • Set the Row background color (plain, solid, or gradient)
  • Set the Top padding and Bottom padding (no. of pixels)
  • Click the Update button once you’re done

#4 Insert The Elements You Want Within The Row: Click +Add Element button and start adding the elements that you have planned. The elements which I always used are:

  • Images: Insert an image into your landing page
  • Video Player: Add a video player on your page
  • Headline: Use for all your main and sub-headlines
  • Vertical Spacing: Add spacing between elements
  • Feature Block: Highlight the features of your offer
  • Bullet Block:  Turn your info into readable chunks
  • Button: Use for call-to-action or aid navigation
  • Testimonials: Show social proof for your offer
  • Image with Text Aside: Add text beside image
  • Optin Box: Insert an opt-in form into your page

#5 Publish Your Page And Export It As A Template: Once you are done with adding rows and elements, click Show/Hide Controls to view the layout. Publish once it is ready.

Creating Your OptimizePress 2.0 Template Via Content Templates

Then click Content Templates (top left) → Export Template. Name your template, write a brief Description, set the Category, insert Placeholder, and click the Generate ZIP button. Once you’ve the .zip file, you can use the OptimizePress 2.0 template on any website!

NEW! Create a 2-step opt-in process landing page:

There you have it. Let me know in the comment section below if you find this post helpful. If you want to start building your landing pages, sales pages, and membership portals using the new OptimizePress 3.0 platform, click the banner below to find out more.

by KM Lee

KM Lee has been a self-employed geek since 2008. Currently he's working full-time from home online. You can also connect with him:

36 comments… add one
  1. GREAT post. I watched the video all the way through. You are a pro with OP2. I am just starting out with it and am pretty frustrated with one thing:

    I want to have a full width headline, and a two column, and a 3 column all in the same row so that I can put 1 large background image behind them all but I dont think it’s possible (unless you know of a way)

    If you know I would appreciate some help. Thats my real email I entered.

    Augie
    p.s. great tutorial

    Reply
    1. Hi Augie,

      Thanks for your comment.

      I’m afraid you can’t add multiple columns in a single row.

      You can use a large background image for your entire page. In the LiveEditor, go to “Colour Scheme Settings” → “Overall Page Colour Options” → “Upload a Repeating Background Image”.

      Reply
  2. Hi there,
    I wonder whether you could help me out with an issue that is now becoming extremely frustrating?

    I am trying to simply add an optin box to my OP2 page via ‘Add Element’ but after entering all the required details (Form HTML, Content & Submit Button) and click Insert, nothing happens!

    I was told last week that it was a PHP issue and I should contact my hosting company (Hostgator) to run a ‘PHP Compilation’ – unfortunately Hostgator couldn’t do this as I didn’t have a VPS account…

    I moved the OP2 site to a different host and today I have tried to add an optin form onto a specific page only to find that exactly the same thing happens!

    Do you have any ideas as to what the problem may be?

    Many thanks

    Andy

    Reply
    1. Hi Andy,

      Thanks for your comment.

      I haven’t had similar issue like yours, so I’m not sure whether I can help you out.

      Can you login to your cPanel and check your PHP version? (Use ‘Ctrl + F’ & search ‘PHP version’). OP 2.0 requires your hosting/server to run on PHP 5.3 or above. If it’s below 5.3, you may want to request your host to perform an upgrade.

      Reply
      1. Thanks very much, I will check the PHP version!

        Regards

        Andy

        Reply
        1. You’re welcome. Feel free to ask in the community as well. :)

          Reply
  3. Thanks for supporting me to have a page, which is valuable for my experience.

    Reply
  4. Hey Lee, I’m starting out with Optin Pages on OP2 and unfortunately I only found out this page after I’ve purchased OP2 (Core Package) at the oficial site…
    I would like to know how we can work together so that I can learn more about OP2 and finally getting the most out of it.

    Regards,

    Rudinei

    Reply
    1. Hello Rudinei,

      Thanks for your message.

      You can start out with the basic video tutorials in the members’ area. There’s some good info available in the Support Knowledgebase too.

      I do help a few clients to set up their OP 2.0 marketing sites on a regular basis. If you’re interested, you can contact me and let me know your project details. (please include your est. budget as well)

      Reply
  5. Hi Lee

    You look like the guy to ask for this, I have a bonus HTML template page in zip format for an affiliate product and would like to create a separate page for this on my blog, can I plug this HTML straight into a new page in OP2 or do I need to build my own page using page builder and try and fit it in that way?

    Thanks

    Andy

    Reply
    1. Hello Andrew,

      I’m afraid you can’t plug your HTML page straight into OP 2.0. You’ll need to build your page with PageBuilder from scratch… modelling the design of your HTML.

      However, if you just want the HTML page appears as a separate page, you don’t need OP 2.0.

      Reply
      1. Hi Lee

        Thanks for the reply and the advice. I was trying to build the HTML into the page creator from WP but realised I could just put the page in my public folder and it would show directly as a link extension from my main site i.e. mysite.com/myhtmlpage.html

        Thanks

        Andrew

        Reply
  6. Hello there,

    does the hostgator baby plan work with OP2.0?

    Reply
    1. Hello Sheyi,

      Hostgator hosting should be fine because it’s the recommended hosting from OP 2.0.

      Reply
  7. great,

    Just a question, is it possible to add a background image on this template?

    best regards,

    dani

    Reply
    1. Hello Dani,

      Yes, it’s possible.

      You can add a background image via the Row Options (for a particular row) or go to Colour Scheme Settings → Page Colour Settings → Overall Page Colour Options.

      Reply
      1. Ok tks a lot, you’re are the best.

        Reply
  8. Can I edit my page as text in optimizer press? I mean I want to edit the html code instead of the visual content(Live editor) of my landing page . Can I do it? how?

    Reply
    1. Hello Riham,

      I’m afraid you can’t do that. If you’re using OptimizePress 2.0, you need to build your pages through the LiveEditor system.

      However, you can insert your HTML code via the Custom HTML/Shortcode element (you still need to do it within the LiveEditor).

      Hope that helps.

      Reply
  9. Hi Lee,

    I am using Blank template with black optin box. I want to use a different background image. I uploaded via page builder, background image, but still it won’t show up?

    Thanks in advance.

    Reply
    1. Hi Roger,

      In the LIveEditor, go to Colour Scheme Settings → Page Colour Settings → Overall Page Colour Options → Upload a Repeating Background Image.

      Let me know if it works for you.

      Reply
  10. Thanks for the article! Very helpful. I’m having a few problem with my page and was hoping you may have some ideas. First let me say I removed all plugins I could and I’m using the Genesis Theme and the OP Plugin to create my pages.

    1. When I first created my page it was showing as full width just like it was supposed to. Then when I was almost done creating the page it quit showing as full width.
    2. I created the entire page and it was viewing fine then I saved it and clicked view again and the page was white. When I went back to the page all of my work was gone.
    3. I can restore the revisions and get all of my work back, but it will not view (showing only a white screen with my logo at the top) and will not save.

    I created a video screen cast showing how the page keeps disappearing and how I can restore it but it won’t save. https://www.youtube.com/watch?v=qBoYY8M7OuA&feature=youtu.be&hd=1

    Ideas? How do I get it to save and how do I get it to say fullwidth (the box is checked and the template I used says it’s fullwidth and I’ve even changed the theme to fullwidth)

    Also, on a side note… what is the best size for a background image for a row? I believe mine is too big but it’s only 900 wide. What are your thoughts about background images for rows?

    Hoping you can help! Thanks in advance!

    Reply
    1. Hello Sheila,

      Thank you for watching my video and taking the time to leave a comment.

      There’s one guy in the community also encountered similar issue like you. He’s using OP 2.0 plugin with a WP premium theme. His page is not full-width even though he has chosen the full-width template and tick the “Is it a full width row?”in Row options.

      I believe the problem lies in the theme you’re using. Frankly, most people who used OP 2.0 as a plugin often encountered issues here and there. OP 2.0 just isn’t that ‘user friendly’ if you’re using it as a Plugin.

      For me, I haven’t encountered any ‘big’ issues with the OP 2.0 Theme. If you really want to use OP 2.0, I’d suggest you to use it as a theme, NOT plugin (this is just my opinion).

      What you can do is save your existing page as a template and then export it to a new demo site which uses OP 2.0 as a theme. You will see the difference.

      As for the row background image, there isn’t any “standard size” for it. But there’s an option for you to “Choose how you would like the background image displayed”. However, if you know CSS, you can further customize how you want to display the background image in a particular row.

      I hope I’ve answered you somehow.

      Reply
  11. KM:

    Your walk-through of this process was really helpful! If I hadn’t already purchased OP2 I would have gladly done it through your site.

    Cary

    Reply
    1. Hello Cary,

      No worries whether you got OP 2.0 from whom, but thanks for your kind words. I really appreciate that.

      Reply
  12. Hi there,

    Is there any way to have a full width video background on op 2.0 page?

    Reply
    1. Hello Leon,

      I haven’t seen any OP 2.0 sites with a video background before. I’m afraid you can’t do that (or at least what I know).

      Reply
  13. Hi KM, that’s an excellent landing page and the tutorial really helped, thanks!

    I was just wondering how I can set a background image in the first row to show its full size? When I insert a 1900×700 image, OP crops it to around a third of the size and I can’t find anywhere as to how to keep it at it’s original size?

    I can get the full size image if I set it as a repeat background in the colour scheme settings, but I just need the one big image in the first row.

    Any help would be really appreciated!

    Reply
    1. You can do it either through CSS code (advanced) or try edit Row #1 by clicking the Pencil Icon. You will find “Choose how you would like the background image displayed” at the bottom. Select Cover/Stretch (stretch your background image to fit).

      Reply
      1. Thanks KM…the cover/stretch didn’t work and I’m hopeless with CSS code, but I managed by placing a text box as an element, then used spacers. Not the best way to do it, I’m sure, but a workaround.

        Thanks again for your help…much appreciated.

        Reply
  14. Hi… I’m from Brazil..
    This’s site is very very cool.. Thanks.

    Reply
  15. KM, this is the best tutorial that I’ve ever seen.

    Please look at my landing page above. I wanted it simple and clean. I also have another one that is going to be the “capture page” directly before that one, but I just cannot figure out how to add a custom background image with out having that little space at the bottom.

    I also cannot add the “optin” box to move on the page at all. It is fixed to the hard left and I cannot get it to move at all. Any help or tips would be greatly appreciated.

    Kirk

    Reply
    1. Hello Kirk,

      Thanks for leaving your comment. I don’t wish to turn this into a support section for OP 2.0 users. I’d recommend you to either contact the support team directly or hire a freelancer (at fiverr or oDesk) who knows OP 2.0 and communicate with them from there.

      Reply
  16. Great tutorial. We are bookmarking this on our browser. :)

    Keep up the good work KM!

    Reply
  17. hi, please can you do a video for custom form optin box.

    Reply
  18. Do you know of a good shared hosting company for OP 2.0? Also when creating my pages, when I go to the dashboard, nothing populates for emai integrations, global settings…nothing. This started when I tried to edit a 2 step option form and tried to use the overlay optimizer but all I got was a blank white screen and a spinning wheel. Any suggestions??

    Reply

Leave a Comment