Re: HTML Editing Landing Page

Nimisha_Garg · ‎02-22-2019

Hi All,

The next question for you all is: I am creating a landing page as a clone from LP template.

Can I know how to edit the HTML coding? I don't see it anywhere. And also how can I bring these images closer?

SanfordWhiteman · ‎02-22-2019

Please, when posting code, always highlight it using the Advanced Editor's syntax highlighter so it's readable.

And in this case, posting a link to live page is more practical. Remember that no one can render your entire HTML unless they paste it into a document, which you should do for them instead.

View solution in original post

Ankit_Dua · ‎02-22-2019

HI Nimisha,

This can be done by editing the landing page template, but make sure if you are editing the landing page template it is not used by any of the other landing pages because any changes to the landing page template will reflect changes on other lp's too (if they are using the same template), once the landing page and template is approved.

Nimisha_Garg · ‎02-22-2019

Hey!

How to remove spacing in these three images?

Ankit_Dua · ‎02-22-2019

Can you send the code please?

Nimisha_Garg · ‎02-22-2019

Hi Ankit,

Sure...I am trying to bring images closer in this block (section 3) in my template.

I am also trying to fix the header (section 1) - image with transparency saved as a PNG. This header section is not showing the image at all. When I don't use transparency it shows?

Can you asnwer why?

Image (Header)

Nimisha_Garg · ‎02-22-2019

Code for header: scroll to the bottom

<head>

<title>Landing Page</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

/* ==========================================================================

DO NOT EDIT - UNLESS YOU KNOW WHAT YOUR DOING

========================================================================== */

/* Header Section */

#headerSection {

background-color: ${headerBgColor};

}

/* Banner Section */

#banner {

background-color: ${bannerBgColor} !important;

background-image: url(${bannerBackgroundImg}) !important;

}

/* Section 1 */

#section1 {

background-color: ${section1BgColor};

}

/* Section 2 */

#section2 {

background-color: ${section2BgColor};

}

/* Section 3 */

#section3 {

background-color: ${section3BgColor};

}

/* Section 4 */

#section4 {

background-color: ${section4BgColor};

}

/* Section 5 */

#section5 {

background-color: ${section5BgColor};

}

/* Section 6 */

#section6 {

background-color: ${section6BgColor};

}

/* Section 7 */

#section7 {

background-color: ${section7BgColor};

}

/* Section 8 */

#section8 {

background-color: ${section8BgColor};

}

/* Footer Section */

#footerSection {

background-color: ${footerBgColor};

padding:25px 0px 15px 0px;

}

@media only screen and (min-width: 768px) and (max-width: 959px) {

.section5-img {float:none !important;}

}

@media only screen and (max-width: 767px) {

.features .line-font img {margin-top:0 !important; margin-bottom:0 !important;}

.section5-img {float:none !important;}

}

@media only screen and (max-width: 479px) {

.features .line-font img {margin-top:0 !important; margin-bottom:0 !important;}

.section5-img {float:none !important;}

}

/* ==========================================================================

Basic Styling

========================================================================== */

body { width: 100%; min-height: 100%; font-family: "Open Sans", "Helvetica Neue", Lucida Sans Unicode, Verdana, Helvetica, sans-serif; font-size: 14px; line-height: 23px; color: #7a7a7a; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}

h1, h2, h3, h4, h5, h6 { font-weight: 300; font-family:"Helvetica Neue", Helvetica, Arial,sans-serif; color: #1a1a1a; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out;}

h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 10px;}

h1 {font-size: 44px;}

h2 {font-weight: 700; margin-bottom: 20px; }

h3 {}

h4 {font-size: 17px; font-weight: 700; color: #2d2d2d;}

p { margin-bottom: 20px; line-height: 24px;}

a {-webkit-transition: all 150ms ease-in; -moz-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; transition: all 150ms ease-in; color: #00a8d6;}

a:hover, a:focus { text-decoration: none; color: #007DA0; outline: none; }

ul {list-style-type: circle;}

::-moz-selection { text-shadow: none; background: #08b4da; color: #FFF;}

::selection { text-shadow: none; background: #08b4da; color: #FFF; }

.btn {-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; border-radius: 0; padding: 15px 35px; font-weight: bold;}

.btn:hover, .btn:focus { background-color:#ff8636; color: #FFF;}

.btn-transparent {background-color: ${bannerButtonBgColor}; color: #ffffff; }

.btn-transparent:hover {background-color: ${bannerButtonBgHoverColor}}

.img-responsive img {display: block; width: 100% \9; max-width: 100%; height: auto;}

.footer p {color: #808080; margin-bottom: 10px;}

.footer a {color: #0B4C9E; margin-bottom: 10px; font-weight: bold;}

.footer a:hover {color: #0B4C9E;}

.footer-links {text-align:right;}

.formStyle {margin:0 auto; width:50%;}

/* ==========================================================================

FORM 2.0 -- Simple Form STYLES ONLY

========================================================================== */

.mktoForm .mktoButtonWrap.mktoGlow .mktoButton, .mktoForm .mktoButtonWrap.mktoSimple .mktoButton {

-webkit-border-radius: 5px;

-khtml-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

color: #fff;

border: none !important;

box-shadow: none !important;

padding:12px 14px !important;

font-size: 1em;

background: #f37222;

background-color: #f37222 !important;

background-image: none !important;

text-transform: none !important;

/* background: -webkit-gradient(linear, 0 0, 0 bottom, from(#962D9E), to(#64038D)) !important;

background: -webkit-linear-gradient(#962D9E, #64038D) !important;

background: -moz-linear-gradient(#962D9E, #64038D) !important;

background: -ms-linear-gradient(#962D9E, #64038D) !important;

background: -o-linear-gradient(#962D9E, #64038D) !important;

background: linear-gradient(#962D9E, #64038D) !important;

-pie-background: linear-gradient(#962D9E, #64038D) !important;

*/

}

.mktoForm .mktoButtonWrap.mktoGlow .mktoButton:hover, mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover {

border: none !important;

background: #ff8636!important;

}

</style>

</head>

</div>

</a>

</div>

</nav>

</div>

<div style="display:${showBanner};">

<div id="banner" class="bg-blur">

<div class="banner-content">

<div class="container">

<div class="row">

<div class="col-md-12 col-sm-12">

<div class="mktoText" id="banner-section" mktoName="Banner Section">

<div class="text-center">

<h1><strong>Banner</strong> Section</h1>

</div>

<p>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Praesent sapien massa.</p>

<p>Donec sollicitudin molestie malesuada quis lorem ut libero malesuada feugiat.</p>

</div>

<div class="text-center" style="display:${showBannerButton};">

<a href="${bannerButtonLink}"><button class="btn btn-transparent btn-big">${bannerButtonLabel}</button></a>

</div>

</div>

Ankit_Dua · ‎02-22-2019

To decrease the space between the images decrease the padding

Will check the code now and confirm

SanfordWhiteman · ‎02-22-2019

Please, when posting code, always highlight it using the Advanced Editor's syntax highlighter so it's readable.

And in this case, posting a link to live page is more practical. Remember that no one can render your entire HTML unless they paste it into a document, which you should do for them instead.