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
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
Figure 17. Inserting text block
When you are done, click on Insert button.
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…
Figure 19. Button designer in OptimzePress
Scroll down and you can find the place where you can put the link URL. In
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.
Figure 21. Feature for inserting credit card images below the 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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
Figure 31. Inserting a row with 3 columns
On the first column click on Add Element and search for Images.
Figure 32. Inserting image into row
Choose the first image style, and select your 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.
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.
Figure 35. Inserting the first feature with image and text
Now repeat the procedure for the next two columns.
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.
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.
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.
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.
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.
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.
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.
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.
