Example Landing Page Tutorial

In this tutorial, we’ll show you how we built the landing page example used for the Landing Pages plugin sales page and video.

Example Landing Page

We built a sample landing page to show you what’s possible with the Landing Pages plugin.

Content

Featured Image: Download here – Dimensions are: 254px x 258px
Headline: Content Marketing on Autopilot
Subheadline: An email course for how to get an ROI from content marketing without letting the content treadmill burn out you or your team.
Masthead text: A free resource from
Body: The following is the HTML used in the Text tab of the editor.

<h2>ROI from content marketing? That takes a lot of work!</h2>
For founders, it's a huge dilemma. You know that building an audience requires creating a lot of content and keeping it up over the long term. But how do you justify spending months on content at the expense of making progress on your product?

This 5-day email course is for founders like you. I'll teach you how to scale up content marketing for your company so that your focus remains where it's needed most—your product.</code>

Here's the lesson plan:
<ul>
 	<li><strong>Day 1:</strong> How content brings an ROI (step by step)</li>
 	<li><strong>Day 2:</strong> Why content marketing is not about blogging</li>
 	<li><strong>Day 3:</strong> A simple framework for coming up with killer topics that drive conversions.</li>
 	<li><strong>Day 4:</strong> 5 repeatable tactics that drive (the right) traffic to your content.</li>
 	<li><strong>Day 5:</strong> You've got email subscribers! Here's how to convert them to customers.</li>
</ul></code>

<hr />

<img class="alignleft size-full wp-image-48" src="https://kristen.dev.ithemes.com/wp-content/uploads/2019/05/nathan-dark-1.png" alt="" width="222" height="218" />TAUGHT BY
<h3>Nathan Ingram</h3>
Nathan specializes in building easy-to-use web sites that help small businesses, professional firms and nonprofit organizations look great on the web. He is a regular instructor at iThemes Training where he teaches WordPress, web design and freelance business Development via live webinar.

Button text: Send it my way!

Design

The following are the specific colors used on the Design tab:

Header Font: Oswald / Normal 400 / Latin
Body Font: EB Garamond / Normal 400 / Latin
Masthead Background Color: #ef6e1d
Headline color: #fcffe8
Sub Headline Color: #fcffe8
Action Bar Background Color: #f1f5f8
Button Color: #2979a6
Footer Background Color: #ef6e1d

Custom CSS

We added a bit of custom CSS to creat the gradient background for the header and add additional styles to the page. Here’s the code:

#masthead {
background-image: linear-gradient(to right, #f07d1a, #f07d1a, #f07d1a, #ea9628, #eab728, #d5c659);
}

ul {
list-style: none;
}

ul li::before {
content: "\2022";
color: #f07d1a;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}

#masthead h1 {
font-size: 3.2rem;
color: #fcffe8;
text-transform: uppercase;
letter-spacing: 2px;
}

.wrap {
max-width: 900px;
}

.action-bar .wrap {
padding-top: 10px;
padding-bottom: 40px;
}

#masthead h2 {
font-family: EB Garamond;
}

input {
border: 2px solid #d5dce2 !important;
}

Example Landing Page Tutorial