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