Creating a custom page template using impactpagebuilder

ImpactPageBuilder gives you an incredibly powerful toolkit for creating an unlimited number of Impact Templates, then assigning them to individual Pages & Posts on your WordPress sites.

Here is step-by-step guide for configuring ImpactPagebuilder.

Installing ImpactPagebuilder

1. Download the impact.zip file & unzip to plugins folder located at /wordpress/wp-content/plugins

2.Go to WordPress Dashboard -> Plugins -> Installed Plugins

3. Activate ImpactPagebuilder.

4. As anon as you activate impact page builder , a menu as Impact has been engendered on the dashboard where you can edit the template on your WordPress site with an option given by impact. Let’s check for the sub-menus in Impact .

Initially, we will see how to create a custom template created by Impact . Lets go to – Impact->Template Builder

  • Impact->Template Builder :

Impact provides you the actual preview window that shows you the actual page template where the changes you make will display on the fly in this preview window and you edit existing template , save template or delete them.

When you click on the Show Template Options button , it creates the impact pop up to have an options to edit the existing template. This pop up can be dragged and dropped anywhere on the screen as per the convenience.  Pop up will appear as –

This is very useful as it shows how your site will look .

impact_popup

Lets go one by one with the options in the pop up to edit the template –

Template Structure : It consists setting for header , footer and sidebar. You can change the setting here and look for the changes in the template besides.

impact_tempate_structure

Width & heights / Margins & Paddings : Here you can change the widths of header , content , sidebars & footer height whereas margins of content , container & padding of content , container . Also Content/Sidebar Gap etc .

impact_width_settings

Title Area : Title area gives the setting for title of the template .

impact_tittle

Backgrounds : Main /Header/Wrap : You can change the type , color or upload an image for main background , header background and wrap background.

impact_background

Backgrounds : Content/Sidebar/Footer : You can change for background of content by changing the color or uploading a background image. You can do the same for sidebar as well as footer .

impact_background_content

Border Options : In this section , you can do the settings for border of the template . Check for the attached screen shot as well to look for the changes .

impact_border

Active widget area : The way active widget area works the way as WordPress hooks . And as the WordPress hooks are the little sections placed before and after the header or before and after the main content of your site . This allows you to hook into the content area or the header or footer etc. And do the alignment for the widget activated.

impact_widget_area

Here you can create a impact hook areas and places them before and after or inside many of the divs of the site .

Template Custom CSS : You can actually add the custom css for the every single impact template . As you add the custom css , you can check the results in the preview window . This template custom css pre populate the main divs so you can easily add custom css if you like .

Lets take one example here – we will give the border to the sidebar as

#impact-sidebar {
border : 3px solid

}

and you can check for the result in the preview window .

impact_custom_css

Here’s the way you can edit the template and look for the changes in the preview window. To save these changes , goto Save template as and enter the proper template name and click on Save Template to save the template .

impact_save_template

Once you saved , you can edit the template as well to do the change with the specific areas / settings of the impact template.

To edit the template , goto Edit Template and select the template to be edited here .

impact_edit_template

  • Impact->Impact Hooks

Another important feature of Impact is impact hooks which allows you to add HTML , JavaScript and text in the textarea given.

Select the template from Save hook box and also the hook location to hook the content into.

Lets see an example here as – put a content in the footer section of the template as –

<br \>
<center> copyright @2015 Impact Page Builder </center>

impact_hooks

ImpactPageBuilder also provides the widgets created in the widgets section of your WordPress i.e at Appearance->Widgets

impact_widget_area

Now , to look for the template , create a new page on your WordPress and look for the Impact Page Options . Select Yes to use impact for this page and select the page template to be shown for this page .

impact_page_settings

And here’s the impact page will look like –

Screenshot from 2015-07-08 17:55:27

  • Impact ->Nuts & Bolts

Here is the setting provided by Impact to export the template and import too .

impact_export

If you have imported the templates , you can use it into the page by including the impact page options . ( seen at the top )

So that’s pretty much what you need to know in order to get started with ImpactPageBuilder.