Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

Creating Custom Landing Pages in WordPress with Impact Plugin

Last updated on by
Elegant Themes
Creating Custom Landing Pages in WordPress with Impact Plugin

Impact Page Builder plugin is one of the revolutionary plugins that was released not too long ago. It allows you to create Custom Landing Pages within your WordPress theme from your WordPress admin panel. In this guide we will be showing you how to begin working with Impact Page Builder.

What is Impact Page Builder?

As you know, one of the most important components of any WordPress site is its Theme. WordPress Themes provide consistent design and layout across all your web pages. Many themes even allow you to rearrange some parts of the layout from page to page (such as Headway), so that you can have a static CMS homepage or page-specific sidebars, etc.

On the surface, it may seem like your theme is giving you a great deal of flexibility and design control. If we look a little deeper, we find that no matter how flexible our theme is, all our pages looks pretty much the same with their idential Headers, Footers, Backgrounds, and so on.

What if you want to have a totally stripped down sales page for a product? What if you want your site to have different sections, each with their own unique look? What if you want to have multiple niche mini-sites running from the same domain?

Impact gives users the ability to create an unlimited number of completely unique design templates that can be applied to WordPress Pages & Posts. Impact is not a theme, which means it’s free from the constraints a theme imposes. Impact is 100% compatible with your active theme.

Before we go any further, we want to let you know that Impact Page Builder is a PAID Plugin, and you would have to purchase it before you can use it. We were not paid to write this installation guide, and by no means we received any benefits from the author. We were merely given a review copy to test drive this plugin which we did and fell in love with it.

Some examples of Impact Plugin in Work

Note, these might look like custom site designs, but these are just some examples that were made using Impact Page Builder:

Impact showcase

Impact showcase

Impact showcase

This plugin can really work like magic. Purchase your copy now. Once you’ve downloaded your copy of Impact, you’re ready to walk through the guide below.

Installing Impact

Inside the .zip file you downloaded, you will find another .zip file containing the Impact software. This will be named impact.zip.

Once you have located this file you can then proceed to your WordPress Dashboard to upload and install it. Log into your WordPress Dashboard and click on “Plugins” followed by “Add New”.

Click the “Upload” button at the top and then the “Browse” button below. Now browse your computer to locate the Impact Software zip file mentioned above and select it for upload. Now click the “Install Now” button to the right.

After the upload is complete, click “Activate Plugin”. If the installation was successful you should now see an “Impact” section in your WordPress Dashboard left sidebar:

Creating Your First Template

Click on “Template Builder” under the “Impact” left sidebar heading. Now click the “Show Template Options” button on the left to reveal the Impact Template Builder Options Box.

Note: This pop-up box can be dragged to any location in your browser.

Once the Template Builder Options Box is up you can click on each sub-heading to access the different options. Here you will find…

Template Structure:

Here you can adjust your Header, Footer and Sidebar areas according to your needs.

Widths & Heights / Margins & Padding:

Not only can you adjust your main template dimentions and spacing in this section, but you will find your Total Site Width according to your current setup. This can be very useful information as you start adding images and Custom CSS to your template.

Title Area:

Here you can choose the type of title for your template, upload a logo image, and adjust positioning. For this particular tutorial, let’s add an Image Logo to your Impact Template. First click the “Browse” button to upload and select a logo image.

Once the Image Uploader popup box appears you can upload your logo image by clicking “Upload”, browsing your computer to locate the image you would like to use for your logo image and then double click it to select and upload it.

You may want to first create a sub-folder for your image, naming that sub-folder exactly the same name as the Impact Page Template you are creating. This will prove useful if you later wish to Export this Template for backup or transfer purposes.

To create a sub-folder right click the “impact” folder on the left of the uploader popup box and then click “New Subfolder”. Then type out the name and hit Enter on your keyboard to finalize the process. From there you can double click the sub-folder to enter it and upload your images for that particular Template.

Once the image is uploaded you will need to double click the image inside the Image Uploader to insert the proper link in the Impact background option area. Now change the “Title:” option to “Logo Image”. You should now see your logo image displaying in your Template’s Header area.

Backgrounds: Main / Header / Wrap:

Here you can customize your main background areas by select a background type, color (using the built-in color pickers) and image. You’ll find that adding an image is exactly the same as adding a “Logo Image”, as we just went through above.

You’ll notice with any of these design options that the changes take effect on-the-fly, displaying in real time on your preview of your template. To test this out let’s change your “Main Background” color. To do this click on the color picker and drag the color selects around until you find a desired color.

Backgrounds: Content / Sidebar / Footer:

This section is the same as above, but with different background areas to customize.

Border Options:

From here you can customize your main layout border.

Active Widget Areas:

In this section you will find many different locations in which you can activate Widget areas. For this tutorial go ahead and check the box next to “After Header” to activate the After Header Widget area.

Note: You don’t need to adjust the Widget area Alignment or Width.

Template Custom CSS:

In this section you will find pre-populated CSS content that will give you a head start in getting more specific with your template customization. You can add any CSS to this area and it will override all other styles for this particular template.

For this tutorial let’s add a border around the sidebar area. Scroll down until you find this CSS:

#impact-sidebar-wrap {

}

Then add the following CSS code to add a 3 Pixel Solid Gray Border around your Sidebar area:

border: 3px solid #666;

You should see the border appear in your template preview window as you add the CSS code.

Note: If you paste in CSS code (as apposed to typing it in yourself) you may have to hit the space bar to get the changes to take effect in your template preview window.

Saving Your Template

Now that we’ve customized our template it is time to save it.

Go to the “Save Template As” section, type in first-template in the “Template ID” text field and then click the “Save Template” button:

Impact Hooks

Now that we’ve created the basic framework for our custom page template we can click on the “Impact Hooks” admin page in the WordPress Sidebar where you’ll find even more ways to add content to your template.

For this tutorial we’re going to add a Copyright to our template’s footer area using an Impact Hook. In the large box titled “Enter Custom HTML, JavaScript & Text Here” add the following text:

<br />
<center>Copyright © 2010 Impact Page Builder</center>

In the above box titled “Save Hook Box” select “first-template” in the first drop-down menu and in_footer in the second drop-down menu. Now click “Save Hook Box” to save your content and location.

Custom Navigation Menu

WordPress provides a powerful Custom Navigation Menu feature. It is this feature that you will use to add Navigation Menus to your Impact Page Templates. So let’s create a menu now so we can add it to your Template.

Under the “Appearance” section in the left sidebar click “Menus”.

In the “Menu Name” field where it says “Enter menu name here” type in “First Nav” and then click the “Create Menu” button.

On the left you’ll see that you can add different types of pages to your Custom Nav Menu. In the “Pages” section click “View All” and then select “Home” and “About”. Now click the “Add to Menu” button to add these pages to your custom menu.

Next, under “Custom Links” type in http://impactpagebuilder.com in the URL field and “Impact” in the “Label” field. Now click the “Add to Menu” button.

Once you have added pages to the custom menu click the “Save Menu” button on the right.

Add a Custom Menu Widget:

Now that we’ve created a Custom Menu we need to add it to our template.

Click on “Widgets” under the “Appearance” section in the left sidebar.

While in the Appearance » Widgets section let’s go ahead and add a Widget to your template’s Sidebar Widget area. Locate the “first-template Sidebar” Widget area. Now locate the “Calendar” Widget under “Available Widgets” and drag it to this Sidebar Widget area and then click the “Save” button.

Assigning An Impact Template To A Page Or Post

You can apply Impact Templates to both Posts & Pages.

For this tutorial we will add it to a Page. So under the “Pages” section in the left sidebar click “Add New”. Add your page title and content as you would any other WordPress Page, then scroll down the page until you get to the “Impact Page Options”.

Set the “Use Impact For This Page?” option to “Yes” and Select Your Impact Template (ie. first-template) from the drop-down menu to the right. Then add your Page Title, Meta Description and Meta Keywords in the option fields below.

Note: You can even add per-page Header and Footer Scripts if you need to.

Now click the “Publish” button to publish your WordPress/Impact page.

At the top you should now see a yellow banner that says “Page published. View page”. Click on the “View page” link to view your live Impact page. It should look something like this:

Congratulations!

You’ve just created your very first Impact Custom Page Template and published it on your WordPress Website. This is just one example. The sky is your limit because you can create as different looking landing pages as you want with this plugin. So your main theme could be one thing, and have 15 different landing pages running to promote 15 different products. This is one great plugin for everyone who is into affiliate marketing. Get Impact Page Builder right now.

Impact has just notified us that there is a 20% off discount available if you use the coupon “wpbeginner“.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. dixonge says:

    FYI – your affiliate link is broken…

  2. Brad Trivers says:

    Very cool plugin.

    I use the iThemes Builder theme to accomplish the same thing, but I’ll definitely keep this in mind for sites that I don’t use builder for.

    You should do a review of iThemes Builder and I think you’ll find it’s power pretty impressive – especially with the Builder Style Manager plugin (maybe you have and I missed it?).

  3. Ben Joven says:

    I thought this article was about wordpress landing pages; like for lead generation.

    Does anybody know any wordpress themes that are good for PPC landing pages?

    • Editorial Staff says:

      This plugin lets you create custom Landing pages which is the BEST Solution for lead generation.

  4. Jermaine Young says:

    Seems a bit “intermediate to advanced” to me. I might look into this later but there may be simpler solutions. Thanks for sharing.

  5. Albert says:

    Thanks for this wonderful tutorial. I have to use this plugin for landing pages. Now PPC landing page designing is very easy with Impact Page Builder in WordPress.

  6. Bjorn van der Neut says:

    Just both a single license and trying out how its works. First impression is verry cool :)

    But now I have to figure out how I can add a menu in de sidebar and a slide show on top etc.

    For people who want to buy a license its a one time fee.

  7. Azad Shaikh says:

    Does it effect other pages. I mean does it slows down my other pages my adding more js and css on every pages.

    Thanks

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.