Create a Landing Page Manager

Landing Pages are everywhere on the web today. Why? Because they allow businesses to create landing pages that serve different purposes or contain content that is intended for different audiences. Landing pages are a destination and companies choose the appropriate origin (display ad, blog post, link, tweet, etc) to direct you to the appropriate landing page.

For example, if you click an ad that says Marketing Software for Car Dealerships and you were a GM at a car dealership, you'll arrive at a landing page made by a marketing software company with the content completely aimed at the automotive market. Despite our "Marketing Software Company" having a landing page with messaging that seems like they specialize in automotive marketing, they actually serve all verticals.

The intelligence in building landing pages for as many verticals and customer personas as possible is because you can a) find product/market fit and b) pounce on that knowledge once you have it. In this article not only will we provide you with a beautifully crafted landing page template, we will teach you how to build a landing page manager in Solodev so your marketing team can add landing pages on the fly without any coding knowledge.

Note: Prior to building a landing page manager in Solodev there are a few pre-requisites:

  • You should know how to create a manager
  • You should know how to work with forms in Solodev
  • You should know how to map managers to pages

All set? Let's get started.

Step 1 - Open Data Center and click Add->Calendar


Step 2 - Name the Calendar "Landing Pages" and click Submit

Specify the Calendar Type as "Landing Page" in the Dropdown Menu

Step 3 - Upload your HTML form

This HTML form will specify which form fields you would like for your landing page. If you want a title, subtitle, content, conclusion, author, image, video, link, etc. specify those form fields here so you can add them in each calendar entry. 

Note: For the purposes of this tutorial we will provide a basic HTML form for a simple landing page.

form.html

<style>
h5 {
color: #555;
font-weight: bold;
}
input[type=text] {
height: auto;
}
span {
box-sizing: content-box;
}
.row:not(:first-child) {
margin-bottom: 12px;
}
.leadRequired {
display: none;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<label>H1 Title</label>
<input class="form-control" type="text" name="h1_title">
</div>
</div>
<h3>Landing Page Content</h3>
<div class="row">
<div class="col-md-6">
<label>Preview Blurb</label>
<textarea class="form-control" name="previewblurb" rows="2"></textarea>
</div>
<div class="col-md-6">
<label>Call to Action</label>
<input class="form-control" type="text" name="articlecall">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Image</label>
<input class="btn btn-default" name="image" type="file" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<label>Summary</label>
<textarea class="form-control wysiwyg" name="text"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-6" id="assetTypeUrl">
<label>URL</label>
<input class="form-control" type="text" name="asseturl">
</div>
<div class="col-md-6" id="assetTypeFile" style="display:none;">
<label>Asset File</label>
<input class="btn btn-default" type="file" name="assetfile">
</div>
</div>
<div class="row">
<div class="col-md-3">
<label>Lead Generator</label>
<div class="form-control">
<input id="requireemail" name="requireemail" type="checkbox" value="1">
<label for="requireemail" style="font-weight: normal;">Require email address?</label>
</div>
</div>
<div class="col-md-3">
<label>Lead Form Title</label>
<input class="form-control" name="formtitle" placeholder="Appears above form" type="text">
</div>
<div class="col-md-3">
<label>Lead Form Call to Action </label>
<input class="form-control" name="formcall" placeholder="Appears in button" type="text">
</div>
</div>
<div class="row">
<div class="col-md-12">
<label>Return Text</label>
<textarea class="form-control wysiwyg" name="return_text" height="300px"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label>Email From Override</label>
<input class="form-control" name="fromEmail">
</div>
<div class="col-md-4">
<label>Email Subject Override</label>
<input class="form-control" name="emailSubject">
</div>
</div>
</div>


Step 4 - Select your HTML form and click Open


Step 5 - Click Submit

Note: Now your Landing Page Manager is built. We wiil open the manager and show what it looks like to add an entry but prior to adding entries we will build the template that will print our landing page entries to the web.

Step 6 - Open Data Center and click on Landing Pages


Step 7 - Click Add Entry

Note: Notice how Solodev took all of your HTML markup and created a datatable schema? Well this is where you can add entries to that schema or in lamens terms, this is where you can add entries to your landing page manager. Before that let's write the template that will print these entries onto web pages.

Creating your Detail Template

Your detail template, aptly named detail.html, will contain the code that prints the details of your entry to the landing page. Before adding entries, let's get the basic functionality working by creating a detail template.

Note: For the purposes of this tutorial we will provide you with the code you need for your detail template

detailTemplate.html

<link href="http://webcorpco.solodev.net/core/fileparse.php/385/urlt/resources.css" rel="stylesheet" />[entry]
<div class="landing-section">
<div class="container">
<div class="row">
<div class="col-md-7 landing-section-firstContent">
<h1 class="landing-h1">[value_isset default=&quot;{{name}}&quot; override=&quot;{{h1_title}}&quot;]</h1>
<small>{{previewblurb}}</small>

<div id="article-main-content2">{{text}}</div>
</div>

<div class="col-md-5 landing-section-sidebar">
<div id="formContainer2">[landing_page_form id=&quot;{{calendar_entry_id}}&quot;]
<div id="returnAnchor" style="height:0;">&nbsp;</div>
[/landing_page_form]</div>
</div>
</div>
</div>
</div>
[/entry]

Note: Place your detail template in the same location as your landing page manager as shown below


Step 1 - Create your Landing Page Folder in www


Step 2 - Name your folder 'lp' and click Submit.


Step 3 - Click Add->STML.


Step 4 - Name it detail. Click Submit.


Step 5 - Navigate to the left tree and select detailTemplate.html

Note: There are no entries in your landing page manager yet so nothing will show up on the page but the name of the page until you have added entries.

Map your Manager to Page

Before you can start adding landing pages to your manager you need to connect your landing page manager to the page that will be displaying the landing pages. 

Step 1 - Open the Landing Pages Manager. Click Modify.


Step 2 - Open the Website Properties Accordion


Step 3 - Click Browse under SEO URL Encoding -> STML Template


Step 4 - Select detail.stml from the lp folder. Click Choose.


Step 5 - Click Browse under SEO URL Encoding -> Asset Category Map Anchor


Step 6 - Select the "lp" folder and click Choose.

Note: Below you can see the manager has been mapped to the folder as well as the page it contains. Now your manager and detail.stml template will populate SEO friendly URLs every time you add a new landing page entry.


Adding Landing Page Entries

Now that we have created our Landing Page Manager, created the template to print entries to the web, and built the folder and page that will generate the Landing Page URLs, it is time to begin adding landing page entries.

Step 1 - Open your Landing Page Manager 


Step 2 - Click Add Entry


Step 3 - Fill out your form fields and click Save

Note: Click on the URL path at the bottom of the entry and you will be redirected to the link of your newly created landing page shown below.

0 Comments

Please sign in to leave a comment.
Have more questions? Submit a request