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;
}
