I am working with a client, and am setting up a redo of his site at http://test3.admaticonsulting.com/.
Mainly, I am trying to recreate the grey-boxed section on http://jamesclear.com/.
I am using SiteOrigin Widgets Bundle to build the rows. I also installed Rapidology for opt in forms.
After I watched a youtube video to copy the html and css using firebug, I tried that, it kind of worked as standalone files, but could not replicate it in WP.
What’s the best solution to recreate that grey boxed area using the above mentioned plugins, html and css, or some other solution?
Hi Eric
There isn’t a SiteOrigin widget that’ll do that out the box. I’d write your content in a SiteOrigin Editor widget and then style that widget. Try this:
1. Edit your inserted SiteOrigin Editor widget and click Attributes top right. Insert a class name of your choosing:
2. Go to Appearance > Custom CSS (assuming you have a Custom CSS plugin like SiteOrigin CSS activated) and insert:
.focus-box { background: linear-gradient(#f9f7f5,#f5f3f1) !important; border-radius: 3px; box-shadow: 0 0 5px #D5D3D1; border: 1px solid #d5d3d1; margin: 5% 1%; padding: 2%; text-align: center; }Hope that helps. You can of course customize the above values as required.
Hi Andrew,
Thank you for the solution. That works great. The client changed him mind, however, if he wants that feature I know it’ll work very well.
No problem :) All the best with your project.