Developer Documentation

Template Engine

Interested in making your own custom template to use in our template editor? Use the following documenation to guide you along the way.

After you create your own template you can use it as many times as you'd like, or you can share the template with other users.

Data Attributes

Attribute Possible Values Comments
data-edit background
wysiwyg
textarea *
text *
img
href
video
background: This will trigger the editor to prompt the user to browse for a file
wysiwyg: This will trigger the editor to launch a visual WYSIWYG
textarea * : This will trigger the editor to launch a basic textarea that you do not want the user to have formatting ability
text *: This will trigger the editor to launch a basic textbox. Typically used for one-liners, like <h1>, <h2>, etc
img: This will trigger the editor to prompt the user to browse for a file. Note: Should only be used on <img> elements
href: This will provide 2 textboxes in the editor. One for the link text, and one for the link location. Note: Should only be used on <a> elements
video: This is similar to "textarea", only difference it will tell the user it's meant for video code.

* textarea and text types will automatically generate a color picker to change the text color.
data-color-picker background
background: This will allow the end user to select a background color for the given element.

Although not required, you can use the "title" attribute to inform the user what element area the background color is associated with. For example:

<div id="footer" data-color-picker="background" title="Footer Bar Area">
    <div class="legal" data-edit="textarea">
        <i>© Copyright 2016 WebsiteName.com</i><br /><br />
    </div>
</div>
data-recommend-characters (Any) Example: 50 Works well with data-edit="text" If you have a specific headline or section you do not want wrapping, you can use this attribute to control how many characters the user inputs
data-recommend-size (Any) Example: 1920x700 Works well with data-edit="background" as this will trigger the editor to browse for a background image. It's also great for <img> elements
data-required yes If this attribute is set, we will make sure there is a value applied before publishing or uploading to their domain.
data-tracking yes If this attribute is set, we will append our tracking parameters to the end of the URL. Note: only works when data-edit="href" is set

Example Usage:

<a href="" data-edit="href" data-tracking="yes">Join Now!</a>
    
data-is-cta true This attribute tells our system this is a "Call-to-action" button. This means our system will automatically connect all pages together when using a multi-step funnel

Example Usage:

<a href="" data-edit="href" data-is-cta="true">Next Step!</a>
                    

Example Usages

Using textboxes

<h1 data-edit="text">I am a headline, when I click here, it will allow me to edit this text in a textbox.</h1>
<p data-edit="text">I am a paragraph, but notice I'm still using data-edit="text" because I do not want the user to be able to format this</p>

Using WYSIWYG

<p data-edit="wysiwyg">I am a paragraph, this time I want to allow formatting with a visual editor</p>

Change image and recommend a size

<img data-edit="img" data-recommend-size="200x70" />

Update Links

<a href="http://testing.com" data-edit="href">This text and the link location will be easily changed in the editor</a>

Changing a background image and recommend a size

<div data-edit="background" data-recommend-size="1920x700">This is a container with a background image. The data attribute here will prompt the user to browse for a new background image and provide a recommondation on the size to make it look it's best</div>

Other features and notes

Below will explain some of the other built in features of the template system.

Using Forms for Opt-in pages and squeeze pages

Using the form integration is easy. All you need is a form element on the page and an input with type = email:

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
Note: Our Editor will generate the proper form code based on if they have Aweber or GetResponse. If they do not have either of these, they will have the option to drop in their own custom form code.

List Elements

Our editor will automatically append a "delete" button next to each <li> element making it easy for users to delete menu items, bulleted items, etc

Meta and Head tags

  • <meta> Our editor will have a dedicated section that loops through each <meta> tags. This is nice for being able to customize the keywrods and descriptions. So make sure you add these meta tags to your template.
  • <title> We will also read the value of the <title> tag and allow the user to modify this.

Screenshots (Required)

We will display a screenshot to the user when they are creating a new page.
Width: 350px
Min-Height: 170px You can proportionally scale it down (We will use overflow:hidden when display to the user)
Filename: screenshot.png and screenshot-layout.png **

The filename must be called screenshot.png and be located in the root of your files next to index.html

** If your template has index-layout.html it's recommended to also provide screenshot-layout.png

Template Config (Required)

In the root of your template directory, you need to create a file called config.json See code sample below:


{
    "templateName": "Understanding Bitcoin",
    "pageType": 1,
    "preWrittenContent": "No",
    "proPackage": "No"
}

Property Explaination

Property Possible Values Comments
templateName (Any) Limit to 30 Characters
pageType 1: Capture Page
2: Sales Page
preWrittenContent Yes
No
Yes: This will tell the user the provided template has unique, pre-written content
No: This option means the template may have a couple sample headlines, but for the most part it's filled with Lorem ipsum.
proPackage Yes
No
Yes: This template will be bundled with a domain name, pre-written content, and come with a price.
No: Not much to explain here...

This property is not used right now, it's used as a placeholder for future use.

Organizing your files for upload

* Required Files *

index.html
The main index.html file will contain some sample data for given theme of your template. Please try to stay away from Lorem Ipsum text. We want to provide different ideas that go with the template. So if your template theme is about working from home, try to come up with some content about working from home.

screenshot.png
screenshot.png should be the actual screenshot of your template, see the screenshot section of the documentation for specs.

config.json
See the documentation specs for the required properties for this file


Optional, but recommended files:

index-layout.html
The purpose of index-layout.html is to allow a user to "start from scratch". Typicall all buttons, background colors, and text are in the gray and white tones.

cph-layout.css
You can call this file whatever you'd like, but the point being, you'll want to include a different CSS file for your index-layout.html file so you can change colors to be more generic.

screenshot-layout.png
As mentioned above in the screenshot specs, you can view examples of what screenshot-layout.png looks like:

Note: Your layout screenshots do not have to be exactly the same as the examples, but the idea is to provide an overall skeleton of what the template looks like.


To upload your file, simply Zip up your files, then log into a valid Capture Page Hosting account, then going to "My Custom Templates" or click here