Hi Everyone,
I've recently been playing around with guided landing pages and getting them to look and work exactly how I would like. Having customised a few of the Marketo template landing pages in the editor, I started to see a few elements I wanted to change. Adjust an image to a video, create additional sections etc.
When looking into the template HTML editor, I found it quite easy to simply change the 'div class' to a different element.
From
<div class="mktoImg alignleft" id="section5Image" mktoName="Section 5 Image" mktoImgClass="expandToFit" style="max-width:466px;"></div>
Change to
<div class="mktoVideo alignleft" id="section5Video" mktoName="Section 5 Video" mktoVideoClass="expandToFit" style="max-width:466px;"></div>
With this, I was now able to select a video instead of an image when creating a web page in the editor. One issue I came across was that in the mobile version the videos didn't align correctly (as shown in the image below). I was wondering if anyone with HTML design experience would have any suggestion? Has anyone developed a 'Hackers Guide to Landing Page Templates?' Keen to discuss this further.
The full HTML code of the section adjusted is below. (Template 15B)
<!-- /Section 2 -->
<!-- ********** BLUE SECTION - PICTON ********** -->
<div class="section3">
<div id="picton">
<div class="row nopadding">
<div class="col-md-6 col-sm-6 col-lg-6 pull-left of">
<div class="mktoVideo alignleft" id="section3Video" mktoName="Section 3 Video" mktoVideoClass="expandToFit" style="max-width:466px; min-width:466px;"></div>
</div>
<div class="col-md-5 col-lg-5 col-sm-5">
<div class="mktoText" id="section3CaptionTitle" mktoName="Section 3 Caption Title">
<h4>Multiple Templates Options</h4>
</div>
<div class="mktoText" id="section3Text" mktoName="Section 3 Text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<p class="mt"><a href="${section3ButtonLink}">
<button class="btn btn-white btn-theme">${section3ButtonLabel}</button>
</a></p>
</div>
</div>
<!--row -->
</div>
<!--/Picton -->
</div>
Partial fix found. By adjusting the minimum width size of the video it now will fit a mobile screen. I used min-width:300px to account for the biggest variety of screen sizes.
<div class="mktoVideo alignleft" id="section3Video" mktoName="Section 3 Video" mktoVideoClass="expandToFit" style="max-width:466px; min-width:300px;"></div>
The main classes you can use are:
mktoVideo
mktoImg
mktoForm
I'll post more findings as they come up.
Hi again,
I looked into it and it seems like the two have a bit different classes:
@media (max-width: 400px)
.cf_videoshare_container, .cf_videoshare_wrap, iframe, .mktoVideo {
width: 100% !important;
margin: 0 auto;
/* padding-left: 10px; */
padding-right: 10px;
}
I changed the width of this class when inspecting to 100% !important on @media (max-width: 400px)
The only issue is that the two were reversed in terms of which looked good, one looked good with padding-left: 10px only (the second one) and the other with only padding-right: 10px (the first one).
This actually looked better switching from 10px to 2% (works better across different screen sizes):
As you can see if I make the first one look nice in Mobile it messes up the second one. All this can be fixed by referring to them with a different class or id in the CSS.
Just giving you an example for experimenting.
/Erik
.png)