Constructing Your Instapage Landing Page

In the first part of this short series we covered the fundamentals of what landing pages are. In this part, we’ll walk through the construction process of an Instapage landing page.

How to Build Your Page

Designs that were first built within Photoshop should be converted to a pixel perfect landing page on the Instapage platform. All pages are structured by following the 960 grid system and by using horizontal page sections explained below.

Begin With a Blank Page

Instapage offers its users a variety of templates to choose from. While we focus on industry specific templates for our general users, you will start with a blank canvas. 

You do not need to use any other program in order to fully complete your Instapage template, however you can convert or import your other previously designed themes if you wish. CSS and custom JavaScript are also supported.

Adding Landing Page Elements

With Instapage you can begin to add your landing page elements by clicking on the ADD NEW option on the main toolbar and then selecting which element to add to your page.

Typically, adding one element on one clearly defined page section is ideal. However, you have the full capability to structure your page as you please. You may also adjust the height of the page sections according to the elements you have added.

Within the application there’s an X/Y tooltip which will appear whenever you move an element. This will help if you’re accustomed to designing via this method or if you are converting from another theme. The coordinates are determined by the middle of the element being moved relative to how far it is from the top left of the main page column.

The Main page column has a defined standard page width of 960px.

You can add the following elements to your custom built landing page template: 

• Page Sections
• Headline
• Text (Paragraph)
• Image
• Video
• CTA Button
• Forms
• Maps
• Social Sharing Buttons
• HTML Links
• Shapes

All of these are added by clicking on which element you want to add and then placing/editing on your page. We’ll discuss adding elements in more detail below.

Page Sections & Boxes

Page sections are used to separate different content areas on your landing page. The section always spans the entire width of the page and cannot be resized horizontally. Page sections can be repositioned vertically anywhere on the page (demonstrated in the video)

You can group content with both sections and boxes in two ways. If you already have content on your page you can add a box (by choosing it from the shapes element) and then drag your content into that box. Or, you can create the box first and then drag and drop objects directly into the box which will nest them.

Once the objects are nested you can now move them about your page as a single object. Select the box and proceed from there.

The Box shape is typically used to create a standard square or rectangle that you can use to highlight forms, images, text, and more. It should not span the entire width of the page.

When editing page sections or box shapes you'll be provided with the following attributes:

• Background Color: Clicking on this allows you to choose a primary color for the shape background.
• Border Color: Clicking on this allows you to choose a color for the border surrounding the box.
• Border Width: Enter a number here to determine the thickness of the border.
• Border Style: Solid, dashed, dotted, double.
• Background Image: You set an image like a pattern as the background of your shape.
• Round Corners: Click on the small up / down arrows on any corner to adjust how round you'd like it.
• Transparency: You can use this to enhance the look of your pages by doing things like revealing the page background below.

Adding Text to your Landing Page

You can add a headline and paragraph text by clicking on the respective options from the toolbar. When you click on the paragraph or headline button you’ll see a preset paragraph appear on your page, you can then edit this paragraph accordingly.

The text editor lets you modify the color, font size, alignment and you can also add numbered lists or create a link.

Adding Images and Video

After clicking to add a new image element you'll be given the option to choose an existing one from a folder or to upload a new one. Any images you upload will be saved on our servers and you can use them at a later time without re-uploading.

You can replace images at any time by selecting the image > clicking Edit > choosing replace.

Use Images to augment your product or service (pictures are worth a thousand words), but again don't get too carried away. Too much visual will distract users from the conversion goal.

To learn more about how using images on a landing page can improve conversion take a look at Use Images on Your Landing Page to Boost Conversions.

You can upload a video to your landing page by selecting the video option and linking to your chosen YouTube or Vimeo video. You can resize and position the video according to your needs. Then choose whether you’d like the video to autoplay or hide the progress bar.

Adding Forms

Select ADD NEW from the main toolbar and then click FORMS. This will populate a form onto your landing page. You can drag and drop and resize your form to suit your specific design needs and you can customize button style, form style, color, font by clicking the EDIT button after you click the form.

You can also set pre-made fields or create your own custom dropdowns. Forms can be linked to our integrated email services such as Mailchimp or Aweber or can work alone. We also provide a redirect option as well (both integrations and form redirects should not be used on your page).

Adding Buttons

To add a button to your page click ADD NEW from the main toolbar. This will populate a button on your landing page. If you click on the button you will be able to resize, change the color or font, and drag and drop the feature where ever you like.

After clicking on the button, above you will see a link icon. This is a link event feature. This will open a link manager that will allow you to add an outbound link to your button, a pop up (Lightbox) to your button, a file download, or link to another Instapage landing page.

Adding a Pop-Up

A lot of landing pages use a two-step sign up process where a visitor clicks on a button which opens a pop-up. Inside the pop-up is the lead generation form. Because of this and because pop-ups can be useful for revealing more information, we’ve made it really easy to add pop ups to buttons, Images, and text links.

Simply click on one of these three types of elements > click the link button > and then select the pop up option.

You can resize the pop-up box like you would any other element. Any type of content can be added inside of the pop up.

Implementing the Mobile Version (Required)

As Instapage offers complete drag & drop customization, we do not currently support automatic responsive design. Because of this you must reconstruct your desktop page in the mobile view based on the smaller screen size and what makes sense within a mobile context.

You can move elements between your desktop and mobile version by copying and pasting.

Mac Users:

• Command-C = Copy
• Command-V = Paste

PC Users:

• Ctrl-C = Copy
• Ctrl-P = Paste

Preview Your Page

To see the final layout of your very own Instapage template click on the Preview option and review your template before you click Publish.

Your Checklist

• Review Images and Layout
• Review Copy and Fonts
• Test Links
• Test Form and Button
• Publish Page
• When creating your help document for the template, please include this link to the usage instructions. If you have included any custom Javascript/CSS in your template, you should include detailed instructions for how to use or update the scripts and functionality.

Note: Publishing your page allows you to provide a live preview link in template marketplaces.

ThemeForest Approval Requirements

All landing page templates must be customizable. Instapage users should be able to easily interchange any element they desire.

To make sure templates don’t lose their quality when the end user makes changes, it is important that your page passes approval by ThemeForest. Please keep the following guidelines in mind:

• Images should be easy to swap
• Page sections should be used to properly segment your page
• Javascript code needs to begin with a comment including author’s contact information and support instructions
• There should be no broken elements
• Form buttons need to be attached firmly to their respective forms
• Your page should have an activated mobile version

Downloading Your Template

In order to use, share, or sell your finished template, you’ll need to download it. In order to download, click on the more options button found on the dashboard and select Download Page.

The file will have a “.instapage” extension. Once you’ve downloaded your file, feel free to rename it as necessary, but leave the “.instapage” extension intact.

Packaging Multiple Layouts Together

Want to package multiple layouts of the same template? Please steer clear of using page variants for packaging multiple layouts together.

Instead, create each layout as a separate page and download each layout separately. This will ensure you have a functional preview link for each layout and it will reduce confusion from the downloader, as variants are used specifically for A/B testing.

Conclusion

Hopefully this has given you a thorough introduction to Instapage and authoring Instapage templates for sale on marketplaces such as ThemeForest. There's plenty more to learn, however, so if you have any questions please feel free to ask away in the comments.

Also, check out the Envato’s Most Wanted Instapage competition happening right now!