Add color shading to LP

[Anonymous]

Is there a way to add some color shading to the background of a landing page? I want to make the background of one of the images to be a gray color

[Anonymous]

Easiest way might be to add in a gray Rectangle Element if you are not well-verse in HTML. Once you have the rectangle sized and colored, change the layer (via the Property Sheet)  to something lower than the layer your image is on (default is 15).

[Anonymous]

Okay that makes sense. What I really want to do is have it be sort of a shading effect. So the background of the landing page starts out darker gray on the bottom then fades into white by the top of the landing page. Is that possible via the rectangle?

[Anonymous · Accepted solution]

Gradients are not possible with rectangles. An alternative would be to upload a gradient image and similarly change the layer.

Or if you want to go the HTML route, there are a lot of examples online that you can have a look at and give a try. Here is one I found that you can review - http://coolhomepages.com/How-to-make-easy-gradient-shadow-CSS-DIV-boxes/blog-48.html.

And here is a quick and dirty example that I threw together for both of the above - http://go.kokopop.com/gradienttest.html

[Anonymous]

Thank you so much for your help Jim! Great suggestions!

[Anonymous]

Do you mean something like the screenshot below. Just go to the following site to generate the css: http://www.colorzilla.com/gradient-editor/

Next, open up the Landing Page -> "Landing Page Actions" ->  "Edit Page Meta Tags" -,> in the "Custom HEAD HTML" add
<style type="text/css">
DIV#mktContent {
paste generated css code here
}
</style>

[Anonymous]

hey Jim L, thanks so much for that info! 

I wonder if you could just explain how you got the light blue box on the right hand side, of your demo page, it's great! I'm looking for a way to get rounded corner shadowed rectangles on my landing pages.

Cheers!

[Anonymous]

Hi Matt,

If I recall, I followed this page - http://coolhomepages.com/How-to-make-easy-gradient-shadow-CSS-DIV-boxes/blog-48.html.