The OptimizePress Live Editor has a lot of cool elements to use, one of which is the “Feature Box Creator” element. I really love this element because you can create a very attractive looking call to action box, order box, or a box for something else. You can set the background color, border color, border radius, and the kind of border you want (dashed, dotted, solid), so there is almost an unlimited number of things you can do with this. I even had one client create his entire sales letter within a feature box because he wanted it to be 700 pixels wide (you may already know changing the width of pages is not exactly an easy task). See Video Below, and further details below the video including the CSS Code for this. Be sure to watch in full screen mode for best viewing.

One of the things I was looking into for a recent project was how to make this feature box have a transparent colored background. The reason was due to having a full size background image, and not wanting to cover up the image completely with the feature box.

After inspecting the CSS of the page and tweaking it a bit, I found that it is just a matter of adding a line of CSS under “Page Settings > Other Scripts > Custom CSS” in the OP Live Editor.

Also, when creating the “Feature Box Creator” element, you shouldn’t choose a background color since we’ll be using some CSS. So make sure the settings look something like this (When adding this element, you’ll need to click the green “Advanced Options” and you’ll see these settings):

2015-07-21_23-34-14

Here is the code you will need to add to the page (I use a site called colorpicker.com for finding the colors I wish to use):

/* Transparent Background Feature Box Creator Element OptimizePress */
div.feature-box-creator.feature-box-creator-style-1 {background-color: rgba(0, 0, 0, 0.5)!important;}

So lets break this down a bit. the rgba color is the first 3 numbers there. Since the color I selected was white, then all 3 are 250. The 4th number is the transparency. The lower the number, the more transparent it is going to be. In this case, I wanted the background to bleed through a little, but not a lot, so 0.8 was good for this.

As you can see, colorpicker.com will give you both the hex value and the rgba value:

2015-07-21_23-44-46

Pretty cool right?

I will be posting more OptimizePress CSS Hacks soon. Leave your comments below!


Kevin McClellan
Kevin McClellan

I love building sites with WordPress & OptimizePress. I have been creating websites since 1998 and been using WordPress since 2004.

When I’m not messing around with WP, I can be found watching Star Trek, Star Wars, or traveling to the beach whenever I want.

  • MaryJaksch

    Hey Kevin, this is very interesting. I haven’t yet played with the custom feature box. I’m going to try it ๐Ÿ™‚ Keep you your great work!

    • Kevin McClellan

      Hi Mary, the feature box creator element is a really nice feature to have when building pages. I just added a video to this post to show how to use this. The transparent background is just an option, and there are several different ways to style this.

      • MaryJaksch

        I just tried it and your instructions made it easy to create! I have one question, though: how to I place the feature box exactly on the page where i want it to be?

        • Kevin McClellan

          Awesome!

          You mean like “right side, center, or left side”? You would just need to create a new row that has a column in the spot you need it to go into, and then drag that entire feature box down to that section by clicking on the crossbars icon (next to the “x”) and holding the mouse button down while you drag it to where it needs to go: https://optimizepressgeek.com/wp-content/uploads/2015/08/2015-08-03_21-13-04.png

          • MaryJaksch

            Yes, I did that. I chose a 2 column row and put the image on the right-hand side: http://alistblogging.net/bsfsales
            However, I’ll love to be able to place the feature box more precisely.

            Is that possible?

          • Kevin McClellan

            I’m not sure that would be possible. There may be some other CSS possibilities here but if you are trying to move it off to the right a bit more I wouldn’t know for sure how to do that without doing further research. If you contact me we can discuss this further: https://optimizepressgeek.com/contact/

  • Juan Franco Yu

    You saved me a ton of time! Thank you for sharing this Kevin!

    • Kevin McClellan

      My Pleasure ๐Ÿ™‚

      Let me know if you would like to see something specific for my next blog post. Always looking for ideas.

  • Dan Calin

    Life saver! You’re awesome.

  • Juan

    Thanks bro, massive value, but what about if i have more than 2 feature box in the page but different row?

    • Kevin McClellan

      Hi Juan,

      You could set a custom CSS class in the row options and then use that as part of the css. So if you use custom css class of “row3” then the css would look like this:

      .row3 div.feature-box-creator.feature-box-creator-style-1 {
      background-color: rgba(250,250,250,0.8)!important;
      }

      Here is a video to show the steps on this (no audio): http://www.youtube.com/watch?v=x9RuaEMrwTA

  • kevin. I followed your instructions and I don’t get a feature box…I get a the message “undefinedundefined” where the feature box is supposed to go. Any idea how to resolve?

    • Kevin McClellan

      Hi Brett,

      Sorry to hear you are having some trouble with this. If the feature box is not adding to the live editor I’m not sure what would be causing that. I have just tested this process here and it seems to be working. Would be happy to discuss this further if you can go to my main page at optimizepressgeek.com and shoot me an email with all the details using the form at the bottom of that page.

      • thanks for the reply. I’ll reach out to OP Support. thanks again.

  • Curso Online 24 Hs

    Thanks! Now my page looks great! http://cursoonline24hs.com.br/curso-online-video-2/

    • Kevin McClellan

      Looks great! I really would love to have a swim in that pool!! Now I want to go book a vacation! haha

      I like the delay on that as well. Nicely done.

  • Kevin McClellan

    Hi Tom,

    I’m glad you liked this ๐Ÿ™‚ My Mother in law is from Germany. Would love to get over that way sometime and visit Germany, Italy, and lots of other places. Probably wouldn’t help my diet much though as I hear there is a lot of good food in Germany!

    I’m working on some other blog posts also about how I made the static header, widened up the site, and some of the transparent row backgrounds. Just working on some other things right now.

    If there is anything you would like to see me do a video on I would be happy to do so once I get some time I can dedicate to finishing more posts.

  • Debbie Lonergan

    I need to do this on all different kinds of elements. I successfully used the code above to update a Feature Box. but now I need to do it on at Text Block and a Countdown Timer. I’ve tried just changing the name of the element in the css code, but I haven’t landed on exactly the right name, apparently, because it’s not working.

    • Kevin McClellan

      Hi Debbie,

      Most elements do not incorporate a background color, so it wouldn’t be possible to do that. You could add those elements into a feature box and then they would use the same background as the feature box.

      Those elements will always use the background of the row or feature boxes you use them in.