Add color shading to LP | Community
Skip to main content
A
Anonymous
June 12, 2013
Solved

Add color shading to LP

  • June 12, 2013
  • 7 replies
  • 2757 views
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
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by
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 - 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 - go.kokopop.com/gradienttest.html

7 replies

A
Anonymous
June 12, 2013
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).
A
Anonymous
June 12, 2013
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?
A
Anonymous
Accepted solution
June 12, 2013
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 - 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 - go.kokopop.com/gradienttest.html
A
Anonymous
June 12, 2013
Thank you so much for your help Jim! Great suggestions!
A
Anonymous
June 12, 2013
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>


A
Anonymous
April 13, 2014
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!
A
Anonymous
April 14, 2014
Hi Matt,

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

Loading footer...