KhaiMun.com header image

KhaiMun.com

≡ 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 with the brand new OptimizePress 2.0 platform, click the Blue button below to Continue:

P.S. If you purchase OP 2.0 through my affiliate link, email me and let me know. I’ll hook you up with the ultra clean landing page template so you can upload it to your website.

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:

12 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 member’s 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

Write a Comment