How to Replicate OP2 Blog Homepage Featured Area?

NOTE: Starting with OptimizePress version 2.5.11 we introduced a newer theme that has a more modern design, faster loading pages, and better SEO. We would suggest trying out the new OptimizePress Smart Theme. If you have an active updates/support license you should see this in the members hub, along with a downloadable PDF step by step guide on how to use the new Smart Theme

We can no longer provide the older OptimizePress Theme files for download for new sites. If you have an existing site and need to re-install the theme files please contact our support team and they will gladly assist with that. For now, we will still provide updates and support for the older OptimizePress Theme

This guide is for the older OptimizePress Theme version and not for the new Smart Theme

Since this article was written in 2015 our blog at optimizepress.com/blog has gone through some design changes, however we used to take advantage of the "Blog HomePage Featured Area" and had a design like this: 

To replicate this design for your blog home page feature area, please follow the directions below. 

Note that the actual "blog homepage featured area" will only work on the blog homepage and will not show up on other posts or pages of your OptimizePress website.

1. Go to Post >> Add New Post >> click Add Element Button >> Optin Form element >> select the 7th optin style (transparent) >> configure and then insert. You'll notice a shortcode immediately added to your page. Copy the entire shortcode.

2. Go to OptimizePress >> Blog Settings >> Modules >> Featured Homepage Area >> select HTML content instead of Video & Signup Form >> add the below code:

<code><div id="firsthalf"> <h1>ADD ANY TEXT</h1> <h3>ADD ANY TEXT</h3> </div> <div id="secondhalf">ADD the ENTIRE SHORTCODE YOU COPIED EARLIER HERE</div>

Once done adding the code, click SAVE.

3. Now, go to OptimizePress >> Blog Settings >> Modules >> Other Scripts >> Custom CSS (drop-down) and add below code:

#firsthalf { 
width:400px; 
float:left; 
padding:25px; 

#secondhalf { 
width:450px; 
float:left; 
padding:10px; 
}

.featured-panel { 
background-image: url( http://IMAGE-URL-OF-YOUR-BACKGROUND-HERE.png); 
background-repeat: repeat; 
border-bottom: 1px solid #eee; 
padding-top: 30px; 
padding-bottom: 10px; 
}

.optin-box-6 .privacy { 
text-shadow: none; 
}

@media only screen and (max-width: 410px){
#firsthalf{width:auto !important;}
#secondhalf{width:auto !important;}
}

Click save when done. That's it.