Landing Page Builder Plugin

Successful email marketing is not only sending emails that achieve high open rates. A success email marketing consists of email content with high open and click rates and a landing page that converts well.

Landing Page Builder plugin will allow you and your users to build awesome landing pages without coding any single HTML line. By dragging and dropping content blocks, you will be able to create amazing landing pages that are also compatible with mobile devices (responsive).

We hope you like our plugin. For any comments, questions and feedback, don’t hesitate to contact us via hello@octeth.com

Technical requirements

Landing Page Builder plugin requires Oempro v4.6.4 and higher versions. No additional modules/extensions are required. As long as you have fully functional Oempro v4.6.4 installed on your server, you can go ahead and use Landing Page Builder plugin.

Downloading the plugin

You can download the 5-day trial version of Landing Page Builder plugin from our Plugin Store. To unlock all features and remove the time limit of the plugin, you may consider purchasing a plugin license on the Plugin Store. Once you purchased a plugin license, you can download it from your client area and bind it to one of your Oempro licenses.

Installing the plugin

Once the “octlandingpage.zip” plugin file is downloaded, locate it on your computer (usually in “Downloads” folder). Unzip it. You will see a directory named as “octlandingpage”. Follow these steps now:

  1. Open your FTP program
  2. Connect to your web server which hosts Oempro
  3. Go to Oempro directory on your web server
  4. Go into “plugins” directory
  5. Upload the “octlandingpage” directory inside “plugins” directory
  6. Check and be sure that /data/ directory inside Oempro has writeable file/directory permissions

Landing Page Builder plugin is now uploaded to your Oempro directory on the server. It’s time to activate the plugin and start using it right away.

  1. Login to your Oempro admin area
  2. Click “Plugins” link on the top drop down menu:
    plugins
  3. On the plugin list, locate the “Landing Page Builder” plugin and click “Enable” link next to it.
  4. Once “Enable” link is clicked, you will see an error message on your screen, indicating that license file for the plugin is missing. If you have purchased Landing Page Builder plugin, this license file can be downloaded from your client area. Simply download the plugin license.dat file from your client area and upload it to your Oempro’s /data/ directory. If you have downloaded the trial version, simply click “Request a trial license” link. Plugin will request a trial license from Octeth and it will create the temporary license file for you.  Please note that only one plugin trial license can be generated for each Oempro license.

Landing Page Builder access privilege

Once the plugin is enabled, you will need to enable this plugin for user groups in the system. Otherwise, your users will not be able to use it. Simply follow these steps:

  1. Click “User Groups” link inside Admin > Settings section
  2. On the user group browse page, click on any user group and then click “Permissions” tab
  3. Scroll down to the bottom of the page and check “Smart Subscribe” check box to enable access for users in this group

Getting started

Administration

Administration of Landing Page Builder plugin is simple. In the admin area, you can authorize user groups to access this plugin (for example you can disable this feature for free plan users). Also, you can take a drive test for your new landing page templates before publishing them in the user area.

Creating landing pages

Landing pages can be created and managed in user area. After logging to the user area, simply click “Down” arrow on the top menu and then click “Landing Pages” link inside the menu. You will be redirected to the landing page list. If this is the first time you visit this page or if you haven’t created any landing pages so far, you will see an empty list on the screen:

Landing Page Builder

Now, click “Create a Landing Page” button to create your first page. You will be redirected to the landing page template gallery:

ss2

After selecting the landing page template, simply click “Continue to builder” button on the bottom right corner. You will be redirected to the landing page builder:

ss3

Landing Page Builder
Sections Explained
(1)
Switch between builder and preview modes
(2)
Available content blocks for the selected landing page template can be found on the left side
(3)
Page title (very important for Google and other search engines!)
(4)
Click the save button to save your changes on the page
(5)
Once you are done with your landing page click close button to return back to the list
(6)
The builder. Drag and drop content blocks from left sidebar to this area to build your landing page.

 

Here’s a quick video tour of the landing page builder:

In minutes, you can build your landing page.

Setting custom domains for landing pages

Once you create your first landing page and return back to the page list (by clicking Close button on the builder), you will see your page on the list. Below each page you have created, you will see two links:

  • Custom URL Settings
  • Visit Page

If you click “Visit Page” link, you will be redirected to your landing page on a new window. This is useful for previewing your landing page and for sharing the page URL.

If you click “Custom URL Settings” link, you will be redirected to the settings page where you can setup a custom url for your landing page. For example, instead of accessing your landing page through the default URL;

http://mydomain.com/oempro/app/index.php?/octlandingpage/view/rt/ru

you can access through;

http://mydomain.com/buynow/

On the custom URL settings page, simply enter the URL you want to set:

ss5

Hit the “Save” button. Now, you will be shown the required .htaccess directive to tell your web server redirect users to the correct landing page URL:

ss6

Once you place this directive in .htaccess file into your domain root directory, visitor will be redirected to the landing page without seeing the actual URL.

Using landing pages in emails

When creating your emails, you can easily insert links to your landing pages. Simply click  the personalization button, choose the “Landing Pages” group and click the page you want to link:

ss7

Tip! Another use case for Landing Page Builder is to use them as “result pages” for subscription and unsubscription pages. You can easily design cool result pages for your subscription process.

Building landing page templates

Landing Page Builder comes with ready-to-use templates. But you and your users are not limited with those templates. You can easily add your own landing page templates.

Landing Page Templates are stored under;

/path/to/oempro/plugins/octlandingpage/page_templates

In the above directory, there are two files for each template defined in the system. One HTML file and one PNG file. The PNG file is used to display a thumbnail of the landing page on the gallery page. The HTML file is used to define the editable regions of the page.

Creating a new landing page template

For example, let’s assume that you are going to create a new landing page and you name it as “Purchase Now”. Simply go into the template directory and create a HTML file with name:

_purchase_now.html

Then paste the HTML code of your landing page to this file and save it. Copy the PNG thumbnail of your landing page to this directory and name it as:

_purchase_now.png
Heads up! We added an underscore prefix to the file name to make it visible only in the admin area until it’s ready for the production.

Thumbnail specs: The thumbnail image type should be png and it should be 146x178px.

To take a test drive before making it available in the user area, simply follow these steps:

  1. Login to Oempro admin area
  2. Click “Settings”
  3. Click “Landing Page Builder” on the left menu
  4. You should see the new landing page template on the “Template Tests” tab
  5. Choose the template you wish to test
  6. Click “Test Selected Template” button
  7. On the next step, you can play with your landing page template to be sure that it’s ready for production.

Landing Page Template Code Reference

This chapter is all about writing your landing page HTML code. In order to make certain parts editable or repeating, you need to define them in the HTML code. We did our best to make it as simple as possible for you.

Boilerplate HTML

To help you get started quickly, we prepared a boilerplate HTML template for you:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Landing Page</title>
<style type="text/css">
</style>
</head>
<body>
<!-- @builderVersion 1 -->
<style type="text/css" title="sl-theme-options"></style>
</body>
</html>

Copy this HTML boilerplate template and save it as:

/path/to/oempro/plugins/octlandingpage/page_templates/boilerplate.html

You can now login to your user area and proceed to the landing page builder by selecting this template.

This is the most basic HTML code which is required. First of all, be sure that you code your landing page in HTML5. The elements you see inside head tag are required. The character set meta, title and style are required. In addition, you can add more head elements to make your landing page responsive or anything else.

Just right after the body tag opening, these two lines should exist:

<!-- @builderVersion 1 -->
<style type="text/css" title="sl-theme-options"></style>

The style with title “sl-theme-options” tag should be empty.

Adding content blocks

Let’s go ahead and create our first content block for the boilerplate. We will be adding a paragraph with a title. Inside the body tag after the empty style block, let’s add the following HTML code:

<div class="sl-content-block paragraph" data-block-label="Paragraph with title" data-block-group="text" data-block-icon="text">
<div contenteditable="true">
<h1>Example title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

Now save your boilerplate.html and refresh your landing page builder. You should see this content-block on your builder screen. And on the left side, you should see the content block menu:

ss1

Let’s go over the HTML code we have added line by line:

  1. We opened a div block. This block is the container which keeps content block elements, the header and paragraph.
  2. Inside the main container div block, we opened a second div block. This is going to be editoable. Therefore we added contenteditable="true" to this div block.
  3. Inside the second div block, we added the content template: A header and a paragraph with dummy content
  4. We closed two div blocks

As you have probably noticed, we have added class and data parameters to the first div container. Let’s go over these parameters one by one. In order to define a content block, we add some parameters to that div element. They are;

  • sl-content-block
    This class will define div as a content block. It’s required.
  • data-block-label=""
    Just name your content block. For example: Header & paragraph
  • data-block-group=""
    Put your content block into a group on the left menu. Available group types: text, media, other, button
  • data-block-icon=""
    Set an icon for your content block. Available icons are:
    text
    text-with-image-on-left
    text-with-image-on-right
    text-with-image-on-top
    two-column-text
    blockquote
    one-column-gallery
    two-column-gallery
    three-column-gallery
    divider
    spacer
    call-to-action
    form
    video

Okay, now you are done with your first content block. Just play with it on the landing page editor. Add a new content block to your page, remove an existing one, change the order.

Heads up! If you want to make a content block to be static on the page, simply add sl-content-block-static class to the div container. You will not be able to remove that content block.

Now, let’s go ahead and add our second content block. This time, let’s create a content block with two columns. There will be header and paragraph on each column. Here’s the example HTML code for this:

<div class="sl-content-block paragraph sl-content-block-resizable-columns sl-content-block-hidden" data-block-label="Two column text" data-block-icon="two-column-text"  data-block-group="text">
<div class="column-container cf">
<div class="column" style="width:50%;">
<div contenteditable="true" style="padding-right:5%;">
<h4>Sample header level two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="column" style="width:50%;">
<div contenteditable="true" style="padding-left:5%;">
<h4>Sample header level two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>

In addition to the HTML code above, we added the following CSS styling to the header:

.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.column-container {
}
.column-container .column {
float: left;
}

Okay, now go to the landing page builder screen on your Oempro web browser and refresh your page. You will notice that the second content block we have added is not visible on the screen. Because we set it as “hidden” by adding sl-content-block-hidden class to the main div container. Now you can select this second content block from the left menu and drag onto your landing page.

We also added sl-content-block-resizable-columns class to the div container. This is required if you are going to create a content block with two columns and want your users to resize columns.

Okay, as a third content block, let’s create an image content block with a paragraph below the image. Here’s the required HTML code:

<div class="sl-content-block sl-content-block-hidden paragraph" data-block-label="Image with a paragraph" data-block-group="text" data-block-icon="text-with-image-on-top">
<img class="sl-content-block-image" src="http://placehold.it/400x100" alt="" width="100%">
<div contenteditable="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

Add this HTML code to your boilerplate and refresh your landing page builder. Now, from the left menu, drag and drop this content block into your page content. Move your mouse over the image and you will see upload and setting icons. Move your mouse over the paragraph and you can edit it.

Okay, a landing page without the call-to-action is nothing. So let’s add a content block for placing mail list subscription form. Simply add this HTML code to your boilerplate.html file:

<div class="sl-content-block paragraph" data-block-label="Subscription Form" data-block-icon="form" data-block-group="button" data-block-options="{'title':'Subscription form settings', options:[{'title':'Target list','type':'select','replace':'[name=&quot;FormValue_ListID&quot;]::attr#value','selectoptions':'%UserListsAsBlockOption%'}, {'title':'Button title','type':'text','replace':'input[type=&quot;Submit&quot;]::attr#value'}, {'title':'Button color','type':'select','replace':'input[type=&quot;Submit&quot;]::attr#class','selectoptions':'color-button-orange##!!##Orange!!##!!color-button-green##!!##Green!!##!!color-button-blue##!!##Blue!!##!!color-button-red##!!##Red'}]}">
<form action="%APP_URL%subscribe.php" method="post" accept-charset="UTF-8">
<input type="hidden" name="FormValue_ListID" value="">
<input type="hidden" name="FormValue_Command" value="Subscriber.Add">
<input name="FormValue_Fields[EmailAddress]" type="email" placeholder="Your email address...">
<input name="FormButton_Subscribe" type="submit" value="Subscribe" class="color-button-green">
</form>
</div>

You will notice a new parameter for the main div container called data-block-options. Let’s dive into this parameter.

data-block-options parameter is used to define specific parameters of a content block. For example, you can switch class elements of a subscribe button, or you can ask users to choose a value for a input element, etc. In the example above, we use data-block-options to ask user to select a target subscriber list and also define a title for the subscribe button. data-block-options accepts a JSON object. We will explain you the above example line by line. This is the JSON object we have set for data-block-options in the above example:

{
'title': 'Subscription form settings',
options: [{
'title': 'Target list',
'type': 'select',
'replace': '[name="FormValue_ListID"]::attr#value',
'selectoptions': '%UserListsAsBlockOption%'
}, {
'title': 'Button title',
'type': 'text',
'replace': 'input[type="Submit"]::attr#value'
}, {
'title': 'Button color',
'type': 'select',
'replace': 'input[type="Submit"]::attr#class',
'selectoptions': 'color-button-orange##!!##Orange!!##!!color-button-green##!!##Green!!##!!color-button-blue##!!##Blue!!##!!color-button-red##!!##Red'
}] }
  • title
    This sets the title of the options window for the content block
  • options
    This is the array which will define every single field on the options window

Now, let’s dive into “options” parameter. Each object in the options array should contain these parameters:

  • title
    Title of the field
  • type
    Set the field type. It can be “select” or “text”
  • replace
    see blow how to set the replace value
  • selectoptions
    If you set the field type as “select”, you need to define this parameter. You need to set the value and name of each option separated by ‘!!##!!’. Each value and name should also be separated by ‘##!!##’. Here’s an example: val1##!!##name1!!##!!val2##!!##name2

If you want to set a value or change attribute of an HTML parameter based on the entered value or selected option in the options menu, you will need to set the “replace” parameter for that field above. replace parameter has the following syntax:

selector::[attr_name]

Selector is the standard jQuery selector of any element in the HTML page. Here’re some examples:

input[type="Submit"]::attr#value

This replace parameter will let you to change the value attribute of the input with “submit” type.

input[name="EmailAddress"]::text

This replace parameter will let you to change the text value of the input element with name “EmailAddress”

Boilerplate HTML

This boilerplate HTML example can be found when you install the Landing Page Builder plugin. Simply login to your Oempro admin area and click “Landing Page Builder” link on the “Settings” left menu bar.

Any questions? We will be happy to assist you. Simply get in touch with us via support@octeth.com
Interested in getting notified about new landing page templates?
Subscribe to our mail list to have access to new landing page templates we and our solution partners will release over time.