Topic Progress:

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

Figure 2. Uploading the OptimizePress

 

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

Figure 3. 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

Figure 4. Put the Google Analytics tracking code in the Analytics and Tracking tab

 

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

Figure 5. Email Marketing Services – Connect with your autoresponder

 

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

Figure 6. Drawing a mockup of our landing page

 

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

Figure 7. OptimizePress ‘Create New Page’

 

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

Figure 8. OptimizePress layout: Template Style 1 – 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.

Figure 9. Give the page name and URL

 

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.

Figure 10. Layout Settings

 

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

Figure 11. Live editor, setting up the header and 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

Figure 12. Setting 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

Figure 13. Setting up the footer area

 

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

Figure 14. LiveEditor with Header and 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

Figure 15. Splitting row on 2 halves

 

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

Figure 16. Insert Text Element

 

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

Figure 17. Inserting text block

 

When you are done, click on Insert button.

text-element-block

Figure 18. Inserted text element in the left column

 

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

Figure 19. Button designer in OptimzePress

 

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

button-link-url

Figure 20. Insert button 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

Figure 21. Feature for inserting credit card images below the button

 

live-editor-with-button

Figure 22. Live editor with text and 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

Figure 23. Features for implementing a video

 

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

Figure 24. Types for inserting videos

 

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

Figure 24. Completed row with text, button, and video

 

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

edit-button-row

Figure 25. Edit the 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

Figure 26. Putting a background to the row

 

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

Figure 27. Completed the first row with background

 

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

Figure 28. Row with one 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

Figure 29. Divider row

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

Figure 30. Stylizing the divider row

 

OptimizePress Page Builder Row #3

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

row-3-column

Figure 31. Inserting a row with 3 columns

 

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

inserting-image-into-row

Figure 32. Inserting image into row

 

Choose the first image style, and select your image.

inserting-icon-image

Figure 33. Inserting image icon for the first feature

 

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

Figure 34. Inserting the image with alt description

 

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

Figure 35. Inserting the first feature with image and text

 

Now repeat the procedure for the next two columns.

3-features

Figure 36. Row with 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

Figure 37. Duplicate and drag the row

 

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

Figure 38. Add new row with 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

Figure 39. Zig Zag technique – row 1 (image on the left)

 

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

Figure 40. Zig zag technique first row (image on the left, text on the right)

 

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

Figure 41. Zig Zag technique second row (text on the left)

 

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

Figure 42. Zig Zag technique 2nd row (text on the left, image on the right)

 

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

Figure 43. Select Publish and Save your page

 

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.


progress-bar-lead-magnet

You're So Close! Fill Out Your Username And Email For Your Free Guide!

Your Free Guide Is On Its Way...