Create icon and feature layout like OptimizePress sales page

In this article we will show you how to create the icon and feature block layout like you can find on the OptimizePress sales page like below.

op101.png

Please note this tutorial does require the use of some custom HTML and CSS. If you need further assistance beyond the steps here please consult the services of a web development professional.

Step 1.

Create a new page, give it a name and save it as a draft or publish it to get it initially created in OptimizePress

 

Step 2.

Ensure you are using one of the following templates: Sales Style 1 (Sales Letter Standard), Sales Style 2 (Sales Letter Standard), Sales Style 3 (Sales Letter Standard), Sales Style 4 (Sales Letter Standard), Sales Style 5 (Sales Letter Standard).  These templates are all the correct width for the elements we are going to be adding.

 

Step 3.

Add the following code to the custom css field of the on-page options for the page you are creating

.featureline {
clear: both;
overflow: auto;
}

.featureboxleft {
background: none no-repeat scroll left top transparent;
float: left;
margin-bottom: 20px;
margin-right: 30px;
min-height: 100px;
padding-left: 85px;
width: 310px;
}

.featureboxright {
background: none no-repeat scroll left top transparent;
float: left;
margin-bottom: 20px;
min-height: 100px;
padding-left: 85px;
width: 310px;
}
.featureboxleft h5 {
font-size: 16px;
font-weight: bold;
margin-bottom: 0;
margin-top: 0 !important;
padding-bottom: 2px;
padding-top: 0 !important;
}
.featureboxright h5 {
font-size: 16px;
font-weight: bold;
margin-bottom: 0;
margin-top: 0 !important;
padding-bottom: 2px;
padding-top: 0 !important;
}:

Step 4:

In your main content where you want a new row of items add this code (YOU NEED TO BE IN THE HTML VIEW):

<div style="padding-top:15px;">

<div style="background-image:url(XXX1);">
<h5>Left Feature Box Title</h5>
<p>Left Feature Box Text Here</p>
</div>

<div style="background-image:url(XXX2);">
<h5>Right Feature Box Title</h5>
<p>Right Feature Box Text Here</p>
</div>

</div>

 

Step 5.

Go to http://www.iconfinder.com/ and use the search function to find icons to use for your feature boxes.  You can search through the free icons available at IconFinder and ensure you modify the drop down for license filtering to icons which can be used for commercial use (if you are using them on sites for your business).

You need to look for icons which are 64x64 px in size and save them to your computer

 

Step 6.

Go to Media > Add New and upload each of your new icons to your site - when you upload them ensure you make a note of the File URL you are provided with which is the address to the specific icon you have just uploaded

 

Step 7.

Look back through the code in your HTML view and find you find XXX1 and XXX2 - these should be replaced with the URLs of your icons for your left and right feature boxes

 

Step 8.

If you need to add more rows of icons just repeat the steps from step 4 to add another row of features/icons