Form Headers and Banner Overlay

[LevyRecognition]

I'm trying to put a form in the header of my landing page. I am able to edit the page layout in the Design Manager and get the form in the right area, but when I do, the header overlay overtakes the form and sort of hides it in behind the gradient.

I'm not a designer, so I'm not sure what to do. Any advice?

[Kevin-C · Accepted solution]

Hey @LevyRecognition

This looks like it could potentially be solved by editing the z-index css parameter.

This link should give you a brief overview of z-index. You can apply your css changes in the righ hand menu of  the template editor. Marketing > Files & Templates > Design Tools > * your template*

[LevyRecognition · Accepted solution]

@Kevin-C

Thank you for sending the article. It helped clarify somethings and I was able to make the changes I wanted to make. I appreciate your help.

My other question is about removing content from a landing page without removing it from other pages using the same template. Any advice for that?

Thanks!

[Kevin-C · Accepted solution]

Hey @LevyRecognition

This looks like it could potentially be solved by editing the z-index css parameter.

This link should give you a brief overview of z-index. You can apply your css changes in the righ hand menu of  the template editor. Marketing > Files & Templates > Design Tools > * your template*

[LevyRecognition · Accepted solution]

@Kevin-C

Thank you for sending the article. It helped clarify somethings and I was able to make the changes I wanted to make. I appreciate your help.

My other question is about removing content from a landing page without removing it from other pages using the same template. Any advice for that?

Thanks!

[Kevin-C · Accepted solution]

@LevyRecognitionsure thing. We actually do this quite a lot on our websites.

We do this by building in a selection for the author to hide or show a certain  piece of the module. In the design tools editor  I'll add a "Choice" Custom Field. This choice is then templated into the html as a class (by copying the "value only" from the custom field options next to the name, and pasting it into the html element's class value). This selection usually looks like a "show" option that has an empty value (because by default it is usually shown), and "hide" option that has the value "hidden". Then in the html and css I add (if it isn't already there) a class for "hidden". It usually looks like this:

.hidden {
  display: none!important;
  visibility: hidden!important;
  opacity: 0!important;
}

Hope this helps.