How to Use Drag and Drop

[edit] Please Note

These docs are now deprecated, we have a new Support area located here

(Difference between revisions)
Henry (Talk | contribs)
(Created page with "Category:Framework <html> <div class="page-header zmt"> <h1>How to Use the Drag & Drop Template System</h1> </div> <iframe width="600" height="370" src="http://www.youtu...")

Latest revision as of 17:42, 15 June 2012

One of the most important features of PageLines the Template Setup. Using drag and drop technology, you can easily place your sections wherever you want on your site.

This guide will show you how to use the Template Setup to add new sections to your header, footer and default page template.

Contents

[edit] Overview of the Template Setup

Access the Template Setup by clicking on "Templates" under the PageLines Tab in your WordPress Administration Panel.

Template Setup Overview
Template Setup Overview

Template Setup Overview Refer to the image "Template Setup Overview"

  1. These are Template Areas where you can add different Sections
    1. The Header,Morefoot and Footer will modify all your pages
    2. The Page Templates area allows you to choose which type of page you are modifying
  2. These are additional template areas for content inside your pages
    1. The Content Area templates will allow you to add sections inside the area where your page content appears
    2. The Sidebar Area templates will allow you to modify the sections that appear in your sidebars
  3. These are the different page types you can use inside your WordPress pages
  4. This is a list of active sections inside the selected Template Area
  5. This is a list of the available sections for the selected Template Area
  6. You can reset all of the template settings here
  7. Visit PageLines.com and let us know how your doing

[edit] Using Sections

Branding Section over Nav Section
Moving the Branding

Sections are the magic behind the drag and drop framework! You can use sections anywhere on your page to add features, highlights, banners, carousels and so much more.

Lets check out a simple example of how to use sections.

Moving Your Navigation

Select the Header Template Area and lets take a look at what we have here. You will notice there are three active sections; Site Branding, Navigation, Secondary Nav. In the image to the right you can see the PageLines Brand Image above the Navigation menu. The Secondary Nav is not visible because the menu has not been created in Wordpress.

Maybe you want your navigation above your brand image. No problem.

  1. Click and hold on "Site Branding" in the Active Sections
  2. Drag Site Branding below Navigation

The sections will save automatically and you can refresh your home page to see the changes.

[edit] Editing Page Templates

Changing Sections
Changing Sections
Default Home Page
Default Home Page

Drag and drop. Super simple right? So now lets change some sections on the default page template.

If you go to the home page on your site, and then look at the Default PageLines Template Setup they probably looks something like the Default Home Page image on the right. We've added some dummy text just to show where the content area will be.

Lets add a few new sections to the home page.

  1. Inside of the Template Setup area select the Page Templates Area
    1. Make sure Default Page is selected as the Page Type
  2. Click and hold on the Carousel Section in the Available/Deactivated Sections area and drag the Carousel to the top of the active sections
  3. Click and hold on the Boxes Section and drag it below the Carousel
  4. Click and hold on the Features and drag it below the Banners
  5. Now change your page area to the Content Area
  6. Lets remove the comments from the page by dragging the Comments Section from Active Sections to Available/Deactivated Sections
  7. Finally lets add a highlight to the content area by dragging the Highlight Section into the Active Sections of the Content Area above the Post Loop

The changes will be saved automatically, refresh your home page to see the changes.

The default page template will be used on all new pages you create. When you are editing an individual page you can modify the page template being used. Changing sections on other page template works just the same as the default template.

In the image on the right you can see how a Highlight Section now appears inside the content area. There is a also a highlight section above the content which spans the full page. Using sections in the Content Area will give you great control over your page layouts.

[edit] Using the Section Options

You may notice that there is an options button on every section. Click it and you will find the global option to "Hide This By Default".

Checking this box and saving your settings will make that section disappear on any page that is currently active for. You can then go into specific pages and used the Meta Settings to show individual sections on that page.

This can be very useful if you want to use the same page type on multiple different pages but want different sections to appear on those pages.

For example you could use the Default Page Template on two different pages. Use a Feature Slider Section and Boxes Section and hide them both by default. On page one you could activate only the Feature Slider and on page 2 you could activate only the Boxes Section. Try it out!

[edit] Section Cloning

Cloning Sections
Cloning Sections
Cloned Meta Settings
Cloned Meta Settings

On some sections you will notice a Clone button inside the section setting.

Cloning allows you to use the same section more than once on the same page.

Lets add a second image carousel to the page we created before.

  1. Inside of the Template Settings in PageLines make sure the Page Templates Area is selected and Default Page is chosen
  2. Click on the Carousel Sections Options button
  3. Click the Clone button

A Highlight#2 Section will appear below the original Highlight Section with the same drag and drop control as the first.

Refresh your page to see the changes.

You can now modify the settings for the individual Highlight Sections from the Meta Settings on individual Pages.

[edit] Getting New Sections

PageLines comes equipped with some cool sections you can use but there are even more options! Check out the PageLines Store for all the great new sections built by members of the community!