optimizepress logo

Intro To OptimizePress Theme

OptimizePress is one of the most powerful WordPress themes for putting together very professional and attractive looking websites within few clicks of your mouse. Its point and click format makes creating custom squeeze pages, sales pages, blog pages, membership sites, and launch pages as easiest as sales pages, blog pages, membership sites, and launch pages as easiest as possible.

OptimizePress is a nice theme/page builder, and it’s made primarily for affiliates but throughout the years, we’ve used it on many different websites of our clients, simply because it’s so easy to quickly put together a professional looking site.

OptimizePress has over 30 templates to choose from for building your pages (and hundreds more in their Marketplace) and over 40 elements for inserting to your pages.

This theme is premium and there are different packages depending on your needs:

Core Package – $97
Publisher Package – $197
Pro Package – $297

Use on 3 Sites (Only sites you OWN and RUN)
Use on 10 Sites (Only sites you OWN and RUN)
Use on 30 Sites (Only sites you OWN and RUN)

Real-Time Site Building with LiveEditor
Real-Time Site Building with LiveEditor
Real-Time Site Building with LiveEditor

Includes over 30 Templates
Over 30 Templates Included
Over 30 Templates Included

Comprehensive Element Library
Comprehensive Element Library
Comprehensive Element Library

Membership Security Add-on
Membership Security Add-on
Membership Security Add-on

Complete Site-Building Flexibility
Complete Site-Building Flexibility
Complete Site-Building Flexibility

1 Year of Support & Core Updates
1 Year of Support & Core Updates
1 Year of Support & Core Updates

Figure 1. Source: https://www.optimizepress.com/co-1/

 

OptimizePress Installation

Once you’ve bought your preferred package, log in to your OptimizePress dashboard and download the theme.

Go to your WordPress Dashboard -> Appearance -> Themes -> Add New -> Upload Theme

optimizepress upload theme

 

Next, activate the theme with your license code and you are good to go.

 

OptimizePress Basic Configuration

Firѕt оff, in thе Global Sеttingѕ tаb (WP Dashboard -> OptimizePress -> Dashboard), уоu саn ѕtаrt with ѕоmе bаѕiс орtiоnѕ. Yоu саn uрlоаd your logo, уоur сuѕtоm 977 рx hеаdеr (hеight оf уоur сhоiсе), you can аdd уоur соруright fооtеr tеxt, or you can аdd уоur сuѕtоm Oрtimizе Prеѕѕ аffiliаtе link within thе “Oрtimizе Prеѕѕ” lоgо (in Promotion Settings tab) to get commissions from OptimizePress when someone buys a package through your link.

Alѕо, in thе Global Sеttingѕ tаb уоu саn сhооѕе whiсh раgеѕ оn уоur ѕitе diѕрlауеd in thе fооtеr, copyright Information, footer navigation etc.

From there you can also put the Custom CSS code that will be used sitewide.

optimizepress global settings

In the Analytics and Tracking tab, you can add your Google Analytics tracking code that will be placed before the </head> tag.

optimizepress analytics tracking

 

In Email Marketing Services you can make an authorization with your autoresponder, so when you are using Optin Box element from OptimizePress page builder, the implementation will be easier.

optimizepress email marketing services

 

Creating Landing Page With OptimizePress

 

Before the actual creation of the landing page with OptimizePress, you need to have a basic sketch or mockup of roughly how you want your landing page to look like. Here’s our sample landing page that includes the most important elements for your landing page.

This is a very basic mockup for your landing page, but it consists of many essential elements that you need in order to make the design with OptimizePress page builder.

academy webmaxformance mockup

 

Start by creating a new page by going to your WordPress panel -> OptimizePress -> Create New Page. From here you can choose one of the predefined templates or just build a new page from scratch.

create-new-page-optimizepress

 

We will show you how to build a page from scratch, so from here click on Blank Pages and choose the first layout: Template Style 1 – Full-Width

optimizepress-template-style1-full-width

 

Name your page such as: Home.

The Page URL will be automatically populated and you just need to check its availability. If everything is okay, click on Create Page.

Optimize Press

 

Now you will see the live editor with a completely blank page. Let’s add first the header and navigation. From the left panel of the live editor, click on Layout Settings.

optimize press layout settings

 

Toggle the ON button for Header & Navigation. From here you can add a logo for your page and set up the navigation.

optimize press header navigation

 

For the navigation, there are few options, but we usually want the navigation to be set next to the logo, that is: Navigation Bar Alongside Logo feature. Also, make sure to select your menu from the dropdown. You can find your menu in Appearance -> Menus.

optimizepress-navigation-bar-alongside-logo

 

While you are here, you can also set the Footer Area. Just toggle the button to ON, and choose what you want for your footer.

footer-optimizepress

 

As you can see the Page editor handled the navigation bar (logo and the menu) and the basic footer area. Now you can start creating the rest of the landing page with the page editor.

live-editor-header-footer-handled

 

OptimizePress Page Builder Row #1

We will create our first row by clicking on the Add New Row button, and split it into 2 equal columns. Scroll down and click on Insert Into Page.

splitting-row-optimizepress

 

Now from the left column click on Add Element and search for Text Block. Click on the Text Block and put your text in the editor.

insert text block optimizepress

 

Make the necessary formatting for the text (heading, alignments etc). In the Advanced Options, you can make advanced formatting for the text like changing the body font size, font style changes, margin and padding changes for the text block, line height etc.

text-block-first-row

 

When you are done, click on Insert button.

text-element-block

 

Below the Text block, click on Add Element and search for Button. There are a lot of premade buttons in the OptimizePress buttons library but we want to work with the Button Designer for advanced customizations.

Now we can design our button. We can change the text, the font of the text, the styling, color etc…

optimizepress-button-designer

 

Scroll down and you can find the place where you can put the link URL. In

button-link-url

 

In Advanced Options, you can choose to insert credit card icons below the button if you are designing Buy Now button. But we don’t need them at this point, so just click on Insert.

optimzepress-button-cc

 

live-editor-with-button

 

Now, from the right column click on Add Element and search for Video. OptimizePress offers two features for inserting a video.

optimizepress-video-element

 

The first is the Video Player that is a standard way for including a video on your page where you can use your own embed code from sites like YouTube or just put a video URL.

inserting-video-types

 

The second feature is Video Thumbnail & Lightbox where you can insert an image into your page which when clicked will load a video in a lightbox. Choose what works best for you. We will choose the Video Player for now and we will put our Youtube dummy video. You can set the dimensions of your video, edit the video appearance and adjust the alignment of the video.

live-editor-with-video

 

In order to put a nice background for your row, first, click on the Edit button of the row.

edit-button-row

 

Select a full-width row and choose your preferred background color in the Row background color start. If you want gradient effect, you can put another color in Row background color end (but this is optional).

full-width-row-bg

 

From here you can also set the padding of your row (Note: Don’t write px here, just put the number), you can set the border style and you can choose an image to use as the row background. When you are done, click on Update.

We’ve finished designing our first row, click Save and Continue and see your work by clicking on View Public Link. If you are satisfied with the outcome, let’s move to the second row.

completed-first-row-with-bg

 

OptimizePress Page Builder Row #2

Now we need to create our divider. This is super easy with OptimizePress.

Click on Add New Row and choose 1 Column.

optimizepress-row-1-column

 

Put your text by clicking on the Add Element button and search for the Text Block. Add your text, align it to the center and make it with Heading 2. Click on Insert.

divider-row-optimizepress

Now edit the row and make it full width. In Row background color start put the background for your divider row. In Row border top width put 8 and choose your preferred row border top color.

When you are done, click on Update. Now let’s move to the third row.

row-border-top

 

OptimizePress Page Builder Row #3

Now you need to add a new row and split it into 3 equal columns.

row-3-column

 

On the first column click on Add Element and search for Images.

inserting-image-into-row

 

Choose the first image style, and select your image.

inserting-icon-image

 

There are few options for the image, but we will adjust only the alignment to center. Also, make sure to put the alt text for the image, for better SEO.

alt-image

 

Below the image click on Add Element and search for Text Block. Put the description for your first feature there.

inserting-first-feature-image-text

 

Now repeat the procedure for the next two columns.

3-features

 

Now let’s move further with our second divider.

 

OptimizePress Page Builder Row #4

We need to create another divider just like previously. However, in order to shorten our work, we will duplicate the divider row from above. Click on the Duplicate button and drag the row below.

duplicate-and-drag

 

Now just edit the text and you are done for this row.

 

OptimizePress Page Builder Row #5 (Zig-Zag Technique Part 1)

At this point, we will use the zig-zag technique where we will put the elements in a zig-zag manner:

  • First, an Image on the left with a text on the right
  • Second, a text on the left with an image on the right, etc.

Here’s what we mean…

Add New Row with 2 equal columns. Click on Insert Into Page.

add-new-row-2-columns

 

Now in the left column, we will put our image. Click on Add Element and search for Images. Choose the first image style and insert your image. Align it to center and put an alt tag for the image.

zig-zag-technique1

 

Now in the right column, click on Add Element and search for Text Block. Put your text in the editor and make the necessary formatting for the text.

zig-zag-technique-first-row

 

Next, we will repeat the procedure for the last row.

 

OptimizePress Page Builder Row #5 (Zig-Zag Technique Part 2)

Insert a new row and split into 2 equal columns. Now in the left column, we will put our text. Click on Add Element and search for Text Block. Put your text in the editor and make the necessary formatting for the text.

zig-zag-technique2

 

Now in the right column, click on Add Element and search for Images. Choose the first image style and insert your image. Align it to center and put an alt tag for the image.

zig-zag-technique2-complete-row

 

Repeat the designing process how many times you want until you list all of your features.

Now from the left choose to Publish your page and click Save & Continue.  Click on View Public Link to see the live version of your landing page.

publish-and-save

 

With this step, we’ve concluded our page design.

 

Final Words

Basically, that’s all you need to know for creating a nice landing page using OptimizePress. The elements that we’ve used on our design can be arranged on many different ways to further customize your landing pages, but we leave the creativity up to you.

Leave a Reply

Your email address will not be published.