How to Use Instapage to Create a Landing Page (Without a Dev)

Steve Iva
By Steve Iva (Writer)
— Last Updated: 2018-08-24T13:31:07+00:00


Instapage is a powerful solution for building landing pages and has been used to create more than 2 million of them, making it one of the most dominant tools in the field. Not only does Instapage come with many features for creating and publishing web pages, it also includes integrations with marketing tools such as CRM systems, email marketing and social media.

For conversion rates and leads, landing pages are the most powerful tools available. Often, they’re the first point of contact between potential customers and whatever you’re selling. They are a single webpage with no ties to the rest of your website and, in most cases, follow a specific marketing strategy.

In this tutorial, we’re going to explain how to use Instapage to build landing pages without a developer. First, you’re going to learn how to create a basic webpage and use Instablocks. After that, we’re going to explain how to make your landing page look nice on mobile devices and what you have to do to make it rank well on Google, so let’s get started.

What Is Instapage?

Instapage-Logo

At first, Instapage may look like one of our best website builders, but many of those lack the tools necessary for optimizing and measuring your conversion rate. Plus, search engine optimization options are often only included in their paid plans. Instapage is much simpler to use and tailored to doing quick tests for marketing uses.

That makes Instapage a lightweight solution, unlike, say, Wix (read our Wix review), which might be oversized for this purpose and may require hiring a Wix-certified developer.

Even though Instapage only comes with a 14-day trial, it’s perfect for quick tests on products, services, prototypes or whole business models. Most people use Instapage to receive leads from ads, capture free traffic or build a temporary website to validate an idea or concept.

No matter why you need a landing page, Instapage makes it easy to create one. It’s a great tool that allows you to publish a webpage in a day, without entering a single line of code. Small businesses, especially, may want to experiment with different approaches and Instapage lets you do that on a small budget. All you need is elbow grease.

How a Landing Page Can Drive Conversions

graph-going-up

As we mentioned, you can use Instapage for many reasons, but all of them have one thing in common: they increase your conversions. A conversion is getting your potential customers to do something, such as an ebook download, email newsletter subscription or the purchase of goods and services. It’s the decisive factor in determining how fast your customer base grows.

A well-designed and thought out landing page is key to increasing the conversion rate of your business. Often, it’s the first thing potential customers relate to your brand, so you’d better leave them with a good impression.

Having a good conversion rate alone is not enough to make your business successful, though. It is also important to understand how much your customers cost to acquire, so balanced customer acquisition rates are an important factor as well.

That’s why you should keep your costs for customer acquisition, including the costs to create a landing page for your marketing strategy, low and should put off hiring a developer as long as possible. They aren’t exactly cheap.

Benefits of Not Hiring a Developer

For a small business, hiring someone new is a big decision. It’s a financial risk and small teams grow together, building their working relationships on trust. It’s hard to rely on someone they barely know.

On top of that, you have the problem of cost, so you don’t necessarily want to hire a developer for building a landing page. Besides the fact that building a webpage from scratch might be too time-consuming, it’s expensive too.

Developers need to adapt to the project domain and understand your goals first. Even if all goes well after hiring someone, it might take weeks to get your them started and the amount of communication increases, which complicates things. After a successful delivery and transition of your landing page, you may become overly reliant on your developer and vulnerable.

How to Use Instapage

In this section, we’re going to show you some of the features of Instapage and best practices for using it, so you can create a good landing page.

Create a Landing Page

First, choose from a list of landing page templates.

Instapage-Template-List

If you want to start from scratch, click on “blank page.” In this article, we’re going with the template “brandbook.”

After you click on the brandbook template and name your landing page, the landing page editor screen shows up, which looks like this:

Brandbook-Instapage-Example

Basics

The editor menu panel comes with many things you might want your landing page to do. You can add the following features to your page:

  • Instablocks
  • Headlines
  • Paragraphs
  • Images
  • Videos
  • Buttons
  • Forms
  • Shapes
  • Social Media Share Counter
  • Timers
  • Custom HTML

To add an element, click on the appropriate button in your menu and Instapage will add it to your landing page. After adding your element, you can edit it by selecting it and hitting the “edit” button, as shown in the screenshot below.

BasicsEdit-Element

The best elements for optimizing your landing page are “forms,” the “social media share” counter and the “timer” because they interact with your potential customers more directly than any other element.

After hitting the “form” icon, the following will appear on your landing page.

Instapage-Form

If you click on “edit,” you’ll see that the editor panel changes. You can modify the style of the buttons, the overall form style, add links under “form submissions,” add custom integrations to your forms, such as MailChimp, Salesforce or Zapier, and create a multi-step form submission. You might also have noticed a pop-up with two options: “+add field” and “done.”

Instapage-Form-Edit

Here’s where the full potential of Instapage comes in. When you hit the “+add field” button, you’ll see a couple of options that are preset for optimizing the conversion rate of your landing page.

FormAddFields

If you want to change the layout of your form, there are two ways to do so. If your CSS is good enough, you can edit the styling of the form with Instapage’s “inline style editor.” To do that, click on the form and hit “edit CSS styles.”

Edit-CSS-Styles

Enable “inline style editing” and start customizing the stylesheet for your form.

Inline-Style-Sheet

You can modify the CSS stylesheet of almost every element in Instapage. If you don’t feel comfortable doing custom CSS, you can modify the layout of your form with the “button style” and “form style options in the editor, as well.

Layout-Form-Modify

How to Use Instablocks

In order to build landing pages quickly, you need to understand the concept of Instablocks first. Instablocks are reusable components of your landing page. Each page is composed of one or more Instablocks. Save your blocks and reuse them to build landing pages faster.

In the upper left-hand corner, you see an “Instablocks” button. Hit it.

Instablocks-Editor

After clicking on the “Instablocks” button, you should see the following pop-up.

Instablock-Overview

As you can see, the header contains three big columns: “my blocks,” “global blocks” and “block templates.”

Under “my blocks” and “global blocks” you’re going to find custom blocks you’ve created in the past. “My blocks” are Instablocks, which are created for one specific landing page, while “global blocks” contain Instablocks from all your landing pages. That’s right, you can create a global Instablock and reuse it for all the landing pages you’re going to build.

To save an Instablock, click inside the block and move your mouse to the little menu in the upper left-hand corner and hit the “more” button, then decide if you want to save it under “global blocks” or “my blocks.” In this example, we’re going to save the first block under “my blocks.”

Instablock-Save

After saving your Instablock, it should appear in your overview.

Instablock-My-Blocks

If you want to insert your customized block into your landing page, click on it and hit “insert.”

Instablock-Insert-MyBlock

You’ll automatically go back to the whole webpage again with “insert block” buttons highlighted all over your landing page. Decide where you want to place your Instablock and click on the appropriate “insert block” button. After you’ve done that, your block will be inserted below.

Instablock-insert-block

Desktop and Mobile Versions

Nowadays, every page on the web should be responsive, including yours. In order to make your landing page mobile-friendly, there are some tips and tricks you might want to consider.

Certain techniques have prevailed among front-end developers to create mobile-friendly landing pages. You can rearrange elements, resize them or do both.

To get started, check if your landing page has a mobile version. To do so, hover over the “desktop/mobile” switch button at the top of your page.

Mobile-Page-Available

Once you turn the “mobile page” switch on, Instapage will generate a mobile version of your page. You can group elements on the desktop view to maintain their order of appearance in the mobile view.

If you want to see how your page looks on a mobile device, hit the “mobile” button at the top of your screen. Whenever you make changes to the desktop view, make sure that you switch to your mobile view and click on “regenerate mobile” to ensure that it stays up-to-date.

Mobile-Page-Regenerate

If you only want to apply changes from your desktop view to a specific section, use “regenerate block” instead.

Regenarte-Section

After you generate the mobile version of your landing page, make sure all elements are placed well. Don’t rely too much on the auto-generated page. If you want your objects to shrink instead of rearranging, group them and lock the “mobile aspect ratio.”

Mobile-Aspect-Ratio

Finalize and Publish a Landing Page

Now that you know how to use Instapage, let’s dive into some more advanced techniques and methods to finalize and publish your landing page.

Customize Your Landing Page with Own JavaScript, HTML and CSS

If you want to customize your web page with customized JavaScript snippets, HTML or CSS code, click on “settings” in your Instapage editor.

Instapage-Settings

You’ll see a drop-down menu that looks like this.

JavaScript-And-CSS

Hit “JavaScript” if you want to add JavaScript code to your web page or “HTML/CSS” if you want to add HTML and CSS. In either case, a code editor will appear at the top of your editor menu with three buttons: “head,” “body” and “footer.”

HTML-CSS-Editor

Feedback and Collaboration

After you finish your work, you might want to get feedback from your coworkers. Instapage has a strong set of features for collaboration. The most important one is the “comment” function.

Comment-Functionality

When you hit the “comment” button, you’ll be sent to a preview of your landing page with extended functionality, including the comment function and heatmap mode. In comment mode, your mouse pointer changes and you will be able to leave a note wherever you want by clicking on that area of the screen. Once done, you can open your comment by clicking on it.

Comment-Mode

Now your teammates can answer your comments and implement your feedback, which makes collaborating much easier.

SEO Settings

SEO is an essential part of your online marketing success, so you better optimize your webpage to get a higher Google ranking before you publish it. To do so, open the “settings” tab that you used when you’ve customized your landing page earlier and select “SEO.”

SEO

You should see the most relevant SEO settings for your page: the title, keywords, canonical link, meta description and the favicon.

You can also tell Instapage to hide your page from Google with the “hide from search engines” switch.

Publishing Your Site

You’ve created your landing page, made it mobile-friendly, customized it with HTML and CSS, implemented the feedback from your team and optimized it for Google and other search engines. Now it’s time to publish it to make it accessible to the rest of the world. All you have to do is click on the big blue “publish” button in the upper right-hand corner of your screen.

Publish

Don’t worry about breaking anything because Instapage will tell you if something’s wrong with your website, e.g., when the mobile version is missing. You’ll be able to choose between the following five options.

How-To-Publish-Your-Page

To publish your page using a custom domain, you’ll need, as you might have figured, a custom domain. You can still publish it as a demo page if you don’t want to buy a domain, though. If you do that, it will have “.pagedemo.co” at the end of its URL, which is okay since it’s just for testing purposes.

Another option is WordPress (read our WordPress review). If you already have a WordPress installation on a custom domain, you just need to install the Instapage plugin and log in with your Instapage credentials. The same applies for Drupal.

Final Thoughts

Instapage is a great tool for businesses looking to build professional landing pages without hiring a developer. It’s easy to use, relatively cheap, has tons of features and comes with a free trial. The tool is crammed with functions, but doesn’t feel oversized or too complex. It appears clearly and intuitively.

Sign up for our newsletter
to get the latest on new releases and more.

Whether you want to track your conversion rate, perform A/B tests or do rapid prototyping, Instapage will work for you. If you’re still not convinced after reading this article, try the 14-day trial. You won’t need to provide credit card information. If it still doesn’t impress you, check out our articles about potential alternatives, such as SquareSpace, Weebly or Jimdo.

Have you ever tried Instapage? Please tell us in the comments what you’ve used it for and which feature you personally liked best.