Making Landing Pages in Sitecore

1. Landing Pages 101 or:
Breaking Sitecore for fun and profit

2. What we talk about when we talk about landing pages #1:
landing pages that tell a story

3. What we talk about when we talk about landing pages #2:
landing pages that convert

4. The basic problem with Sitecore (in terms of Landing Pages)
customized, marketing campaign
driven landing pages
a template-based
CMS
≠

5. So... what can we do to get from point A (templates) to
point B (customized landing pages?)
this!!

6. Douglas College’s CSS situation

7. Using the magic of CSS overrididing to do whatever we want
in a template-based CMS:
styles.css (the base styles for the site)
custom-lp.css (base styles for a custom
landing page, by me)
CSS (in <style> tags) & HTML
directly in the content editor (by you)
is overridden by
is overridden by

8. A word of caution

9. The nuts & bolts: how custom-lp.css works
custom-lp.css is a framework, not a set of (visual) styles. It defines the “bones” of the
landing pages we create.
1) Defines a class, .custom, which sits inside the template’s main containers, and removes
the padding provided by them. Effectively allows you to start your designs at (the content
sections) coordinates 0, 0, instead of 20px in to the right.
2) Defines a second class, .custom-container, with no padding, margins, width or height.
This is where all your HTML will go.
3) Defines a class, .custom-row, which is 100% of the container’s width wide and is
designed to contain column classes
4) Defines a set of column classes which have different, proportional widths.
Columns sit beside each other in .custom-rows.

10. The basic setup:
<div class=”custom”>
<div class=”custom-container”>
<div class=”custom-row”>
<div class=”custom-col custom-col-2”>
<p>This is one column</p>
</div>
<div class=”custom-col custom-col-2”>
<p>This is one column</p>
</div>
</div>
</div>
</div>
.custom {
width: 999px;
margin-left: -2%;
/*removes padding of parent, .content_section*/
margin-top: -31px;
/*can be in px here bc the header is consistenly 172px high
until the mobile breakpoint)*/
margin-bottom: -2.6%;
/*there really is no rhyme or reason as to why these numbers
work*/
z-index: 999;
}
.custom-container {
} /*yes it really does nothing, but it’s useful for
full-bleed backgrounds*/
.custom-row {
margin: 0% 0% 2% 0%;
/*padding on bottom only to space between rows. spacing be-
tween cols is below*/
clear:both;
}
.custom-col {
margin: 0% -0.32% 0% 0%;
padding: 1%;
display: inline-block;
vertical-align: top;
}
.custom-col-2 {
width: 50%;
}
In the content editor: From custom-lp.css:

11. Classes available to you in custom-lp.css
.custom - always use this
.custom-container - always use this, too. useful for full-bleed backgrounds sometimes.
.custom-row - a horizontal grouping of columns*.
by default as a margin of 2% on the bottom.
provides clearing** for columns.
.custom-col - the basic display style for a column. always use in conjunction with one of the
below column classes***.
.custom-col-1 - gives the .custom-col a width of 25% of the container
.custom-col-2 - gives the .custom-col a width of 50% of the container
.custom-col-3 - gives the .custom-col a width of 75% of the container
.custom-col-4 - gives the .custom-col a width of 100% of the container
.custom-col-1third - gives the .custom-col a width of 33% of the container
.custom-col-2third - gives the .custom-col a width of 66% of the container
.custom-pull-right - floats a single column to the right-hand side of its container.
* - You can have columns that total up to more than 100% of the width of a .custom-row. They’ll just fall below.
** - as in clear: both;
*** - all columns get display: inline-block; from this. inline-block is actually a buggy CSS component and occasionally gives
hairline spacing between elements; however better alternatives (flexbox) are not IE9 compatible.

12. But what about mobile?
custom-lp.css provides overrides for all the classes listed below for 3 breakpoints:
Desktop: @media (min-width:767px)
Tablets: @media only screen and (min-width: 767px)
and (max-width: 1080px)
Mobile devices: @media only screen and (max-width:767px)
Depending on what you’re doing, though, you may need to override the default
behaviour of custom-lp.css for certain column widths on your page.

13. The basic setup, revisited:
<style>
.custom {
background-color: #FF000;
}
.custom h1 {
font-family: museo-sans;
font-size: 48px;
}
/*....etc etc etc*/
</style>
<div class=”custom”>
<div class=”custom-container”>
<div class=”custom-row”>
<div class=”custom-col custom-col-2”>
<p>This is one column</p>
</div>
<div class=”custom-col custom-col-2”>
<p>This is one column</p>
</div>
</div>
</div>
</div>
.custom {
width: 999px;
margin-left: -2%;
/*removes padding of parent, .content_section*/
margin-top: -31px;
/*can be in px here bc the header is consistenly 172px high
until the mobile breakpoint)*/
margin-bottom: -2.6%;
/*there really is no rhyme or reason as to why these numbers
work*/
z-index: 999;
}
.custom-container {
} /*yes it really does nothing, but it’s useful for
full-bleed backgrounds*/
.custom-row {
margin: 0% 0% 2% 0%;
/*padding on bottom only to space between rows. spacing be-
tween cols is below*/
clear:both;
}
.custom-col {
margin: 0% -0.32% 0% 0%;
padding: 1%;
display: inline-block;
vertical-align: top;
}
.custom-col-2 {
width: 50%;
}
In the content editor: From custom-lp.css:

14. The basic setup, revisited, now with fun for mobile:
<style>
@media (min-width:767px){
.custom {
background-color: #FF000;
}
.custom h1 {
font-family: museo-sans;
font-size: 48px;
}
}
@media only screen and (min-width: 767px)
and (max-width: 1080px) {
.custom-col-2 {
width: 75%;
}
}
/*....etc etc etc*/
</style>
<div class=”custom”>
<div class=”custom-container”>
<div class=”custom-row”>
<div class=”custom-col custom-col-2”>
<p>This is one column</p>
(etc etc etc etc)
(all the same stuff as before but):
@media only screen and (min-width: 767px) and (max-width:
1080px) {
.custom {
width: 100%;
margin-left: -2%; /*removes padding
of parent, .content_section*/
margin-top: -31px; /*can be in px
here bc the header is consistenly 172px high until the mobile
breakpoint)*/
margin-bottom: -2.6%; /*there really
is no rhyme or reason as to why these numbers work*/
}
.custom-col-1 {
width: 50%;
}
.custom-col-2 {
width: 100%;
}
.custom-col-3 {
width: 100%;
}
}
In the content editor: From custom-lp.css:
is overridden by

15. Gremlins
<div class=”custom”><div class=”custom-container”><div class=”custom-row”><div class=”custom-col cus-
tom-col-2”><p>This is one column</p><div class=”custom-col custom-col-2”><p>This is one
column</p></div></div></div></div>
display: inline-block;
is buggy. This is a known issue w/CSS3. It occasionally has hairline widths between two divs which both use
display: inline-block. The easiest solution is to minify your code (or: get rid of all whitespace between tags, including
returns.
For an example of where you’d run into this issue, see http://www.douglascollege.ca/douglas-degrees.
.container width
If you’re using a 3-column layout (i.e. .custom-col-1third or .custom-col-2third) extensively, it can be
helpful to manually set the width of container to 999px. Column widths are defined in percentages, so
999px divides more evenly into thirds. Similarly sometimes defining the width of .custom to 1000px can
help sort out issues with the columns that divide by 4
(.custom-col-1, .custom-col-2, .custom-col-3, .custom-col-4)
overriding <a> styling
The styling from style.css is particularly sticky and difficult to override. Using the selector
#one_column_content .col_content_section a seems to work best.
overriding mobile styling (@media only screen and (max-width:767px))
Another particularly sticky bit of CSS. I find I have to basically start from scratch and override everything I overrode
in the desktop media query to get things to work.