Menu
iThemes
WordPress Security, Backups & Maintenance
  • Products
    • iThemes Security Pro
    • BackupBuddy
    • iThemes Sync
    • Why buy from iThemes?
  • Bundles
    • Essentials Bundle
    • Plugin Suite
    • WordPress Web Designer’s Toolkit
    • Customer Spotlights
  • Resources
    • Blog
    • WordPress 101 Tutorials
    • WordPress Ebooks
    • Weekly WordPress Vulnerability Report
    • The Ultimate Guide to Starting a Web Design Business
  • Training
    • Upcoming Webinars
    • Free Webinar Library
    • Premium Courses
    • Become a Member
    • Member Login
  • Support
    • Documentation
    • Get Help
    • Product Updates
    • Upgrade Policy
    • Contact
    • Our Mission: Make People’s Lives Awesome
  • Log In
WordPress Tutorials from iThemes
Categories
  • BackupBuddy Tutorials
  • Builder
  • Builder CSS
  • Content Upgrades
  • iThemes Hosting
  • iThemes Security
  • Landing Pages Plugin
  • Stash Live
  • Sync
  • Web Developer Training
  • WordPress Beginner
  • WordPress Security

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.

landing page example

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

Get the Landing Pages Plugin

Want content like this delivered right to your email inbox?

Share this tutorial with your friends
Previous
WordPress Gutenberg Plugins – Stackable, Atomic Blocks & Otter Blocks
Next
Content Upgrades WordPress Plugin Settings
Other related tutorials
WordPress Landing Pages Plugin Settings
Getting Started with the WordPress Landing Pages Plugins

Get updates on new themes & plugins plus special discounts

About iThemes

  • The Team
  • Contact Us
  • Website Accessibility Statement
  • Sitemap

Resources

  • Blog
  • Documentation
  • WordPress Tutorials
  • Free WordPress Ebooks
  • Free Webinar Library
  • Free Upcoming Webinars
  • iThemes Training
  • Affiliates

Customers

  • Member Panel Login
  • Support
  • FAQs
  • Upgrade Policy
  • Licensing
  • Terms and Conditions
  • Refund Policy

Top Products

  • BackupBuddy
  • iThemes Security Pro
  • iThemes Sync
  • Restrict Content Pro
  • WPComplete
  • WordPress Plugins
  • Content Upgrades
  • WordPress Landing Page Plugin
  • BackupBuddy Stash

iThemes Media LLC Copyright © 2023 All rights reserved | Privacy Policy

© 2022 All Rights Reserved.

Visit StellarWP Visit Nexcess
Copy link
CopyCopied
Powered by Social Snap