2013/08/22 21:14:18
APGvNext Sam

Landing Page Examples

The new Landing Pages feature available in the announcement section of the AdminCP allows you to create special pages outside the forum / blog system. It's useful when you want to create pages not usually found in a forum, such as:
  1. special lead capture page
  2. private content page
  3. About Us page
  4. Custom 404 page
  5. Special Thank you page after registration confirmation
  6. ... and many more
Basically you create a landing page just like an announcement, but in addition to deciding the place the announcement shows up (forum, gallery, registration form, etc.), you can specify a permalink for it so that it can show up on its own URL.
 
Landing pages also allow you to optimize for search engine. You can specify Page Title, Meta tags, and additional content in the <head> tag (like adding Google+ Authorship markup). In addition, you can use raw HTML and JavaScript, making it very versatile when you want to create pages with rich UI.

Show me some examples

The following are a few pages we created:
  1. Thank you page (after email confirmation) (rich JavaScript interaction)
  2. Upgrade Special & FAQ (content heavy; an About Us page can be created like this one)
  3. Sign-up page for free e-course (use of iframe)
  4. Gmail New Tab Instruction (screenshots)

Let's create a 404 error page

A custom 404 page is useful when user enters a non-existent URL. Instead of showing a default server error message, we should provide a list of threads that user may be interested in. The best candidates would be the latest posts as well as the hottest discussions.
 
Example: Here is the 404 page (this is a non-existing URL, and you'll be redirected to the 404 page)
 
Here is how you can create this page:
 
Content body is pure HTML (use the HTML button to add this in the editor):
 
<h1>The following are the most recent topics you may be interested in</h1>
<p>I can't locate what you're looking for, but the following may be helpful.</p>
<div class="wideDivider">&nbsp;</div>
<div class="left overflowHidden" style="width: 49%; padding-right: 1%;">
<h3>Most Recent Discussions</h3>
<div id="new">&nbsp;</div>
</div>
<div class="left overflowHidden" style="width: 49%;">
<h3>Active / Hot Discussions</h3>
<div id="active">&nbsp;</div>
</div>
<script type="text/javascript">// <![CDATA[
$doc.ready(function() {
            $('#new').load('/community/ws/TopNav.aspx?t=RecentPosts .newActiveList');    
            $('#active').load('/community/ws/TopNav.aspx?t=Active .newActiveList');
        });
// ]]></script>

 
Make sure you check the "Save HTML without PGDCode Transformation (useful when creating Landing Page from custom HTML templates)" box
 
Add the following to the HTML header box:
<style>
.msg a {
    color: inherit;
    text-decoration: none;
}
.messagelink {text-shadow:none;}
</style>

 
And then specify an URL (404-info, for example) and a page title as you wish. I also chose "Simple Frame" as the master page.
 
Finally, make sure you set the URL as the default 404 custom page inside AdminCP -> System Related -> Error Log:
 


vNext: Online Demo | Latest version: 5.5
Consultation / Custom Programming

Comments are closed.

© 2018 APG vNext Commercial Version 5.5