Page specific components

Applies To


Page Specific Components

In this tip, we’ll show you how to create or duplicate an existing component, or Library item ( folder ) then insert that copy into a new page. An example of when you might want to do this is when you need to display specific images within an image component such as the Nivo Slider, or Default Slider within a page.

Many larger websites will include specific sections dealing with events, products or services. Each of these sections, or pages within these sections would contain images related directly to the page content. You can do the same, create a ‘page specific’ component, and display images directly related to the content of the page.

There are 2 types of components included in your template packages, that you may want to duplicate:

  1. single page components
  2. wrapped components ( components within a component folder )

There’s a big difference between the single page and wrapped components.

Single page components consist of one Library page, and that’s it. Any styles used for the single page components are included in the core ( styles.css ) or ( bootstrap.css ).

Wrapped components include a parent folder for the component files which include:

  1. a component page
  2. a component wrapper page
  3. a CSS folder for the style sheets
  4. an images folder for component specific images (optional)
  5. a graphics folder for component specific graphics used for the interface ( optional)
  6. and a js folder for all the javascript required to run the component.

For our tutorial, we’ll show you how to create a page specific ‘single page’ component, then a page specific ‘wrapped component’.

The process is basically the same for both, the ‘wrapped’ components require a couple of extra steps.

To create a page specific component, there are basically 3 steps.

Step 1: copy / duplicate of the existing Library (page) or shared (folder) then rename

Step 2: update the contents of your new Library page

Step 3: insert your new Library page or wrapper into your template page

Here’s a video demonstration showing how to update both types of components:

Here’s a video tutorial demonstrating how to add a Page Specific Image Component: