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/
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
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.
In the Analytics and Tracking tab, you can add your Google Analytics tracking code that will be placed before the </head> tag.
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.
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.
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.
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
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.
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.
Toggle the ON button for Header & Navigation. From here you can add a logo for your page and set up the 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.
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.
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.
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.
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.
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.
When you are done, click on Insert button.
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…
Scroll down and you can find the place where you can put the link URL. In
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.
Now, from the right column click on Add Element and search for Video. OptimizePress offers two features for inserting 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.
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.
In order to put a nice background for your row, first, click on the Edit button of 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).
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.
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.
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.
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.
OptimizePress Page Builder Row #3
Now you need to add a new row and split it into 3 equal columns.
On the first column click on Add Element and search for Images.
Choose the first image style, and select your 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.
Below the image click on Add Element and search for Text Block. Put the description for your first feature there.
Now repeat the procedure for the next two columns.
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.
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.
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.
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.
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.
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.
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.
With this step, we’ve concluded our page design.
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.