How to Use the Banners Section

Revision as of 17:47, 26 March 2012

Banners are a great way to show content on your site. Specifically, they are inspired by a highly effective way of giving product tours. The purpose of this document is to give you a good understanding of how to use the banner section inside of the PageLines framework.

To view some examples of Banners, click on our Core demo site.

Add New Banner

Add New Banner

From your WordPress Administration Panel:

1. Select the "Banners" panel, then "Add New Banner"
2. Enter a Title for your Banner
3. Enter text to be displayed on the Banner
4. Choose your Banner Setup Options
   1. Banner Alignment
      • Choose which side to place the media
   2. Banner Media
      • Upload an image for the banner
        1. Click "Upload Image"
        2. Browse your computer for your background image & click "Open"
           • If you already uploaded a background image to your server, simply type the full URL of the image & click "Save Meta Settings"
   3. Banner Text Width (In %)
      • Set the width of the text area as a percentage of full content width. The media area will fill the rest.
   4. Banner Media
      • Add HTML Media for the banner, e.g. Youtube embed code. This option is used if there is no image uploaded.
   5. Banner Text Padding
      • (optional) Set the padding for the text area. Use CSS shorthand, for example: 25px 30px 25px 35px; for top, right, bottom, then left padding.
5. Click "Publish"

Banner Sets

A Banner Set is what controls which Banners are displayed on individual pages

Create Banner Set

Create Banner Set

From your WordPress Administration Panel:

1. Select the "Banners" panel, then "Banner Sets"
2. Type a Name for the Banner Set
   • This name is how it will appear on your site
3. Type a Slug for the Banner Set
   • The “Slug” is the URL-friendly version of the Banner Set Name. It is usually all lowercase and contains only letters, numbers, and hyphens
4. Click "Add New Category."

Assign Banner to a Banner Set

Assign Banner to Set

From your WordPress Administration Panel:

1. Select the "Banners" panel, then "Banners"
2. Click to edit the Banner that you want to assign
   • You can also select multiple Banners by checking the box next to the Title and under "Bulk Action," select "Edit," then click "Apply"
3. Check the box next to the Banner Set that you want to assign the Banner to.
4. Click "Update"

• You can assign a Banner to more than one Banner Set
• You can also assign a Banner to a Banner Set while you are creating the Banner
  
  

Enable Banners

There are different ways to set up the Banners section.

Create a new page using the "Banner Page" template

Create a new page

From your WordPress Administration Panel:

1. Select the "Pages" panel, then "Add New"
2. Enter a title for your new page
3. Under "Page Attributes" click the "Template" dropdown
4. Select "Banner Page"
5. Under the "MetaPanel", click "Banner Section"
   • The Banner Section may still show as "inactive" until you save the Meta Settings
   1. Max Number of Banners
      • You can limit the number of Banners that will appear on that page
   2. Default Banner Set
      • Click the Drop Down and select the banner set that you want displayed on that page. If you do not select a Banner Set, all of your Banners will be displayed
6. Click "Publish"
7. Click "View Page"

You will now see the Banner(s) on your new page. (By default, you will also see the Highlight Section above the Banners. This is because the Banner Page Template also has the Highlight section turned on by default.)

Enable the Banners Section on existing pages

Enable on existing page

From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Templates"
2. Select the Template Area that you want the Banners section to go
   • If you select the "Page Templates" area, by default the Banners section will be displayed on every page that is assigned to the type of Page Template you choose
   • If you select "Header," "Morefoot, or "Footer," by default the Banners section will be displayed on every page regardless of the Page Template
3. Drag the "Banners" section from the "Available/Disabled Sections" over to the "Active Sections"
4. The Section Order will save automatically

You will now see the Banners section on every page that it is active on.

Hide Banners on individual pages

Using Section Control, you can control whether or not to show or hide an Active section on a page to page basis

Hide Banners

From your WordPress Administration Panel:

1. Select the "Pages" panel, then "All Pages"
2. Click to edit the page that you wish to hide the Banners section
3. On the "Meta Panel," click the "Page Setup" tab
4. Under "Individual Page Section Control," click "Hide Banners"
5. Click "Save Meta Settings"

Because the Banners section is displayed by default when you enable it, you will need to use this method for every page that you do not want the Banners section displayed.

Hide Banners by default

Show Banners on individual pages

You can also hide the Banners section by default, and choose the pages you want to show it on.
From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Templates"
2. Make sure you have the correct Template Area selected for the type of pages you want to hide
3. Under "Active Sections" click "Banners Options"
4. Click "Hide This By Default"
5. The Section Options will save automatically

Show Banners

Now the Banners section will be hidden by default until you select to show it on the individual page.

1. Select the "Pages" panel, then "All Pages"
2. Click to edit the page that you wish to show the Banners section
3. On the "Meta Panel," click the "Page Setup" tab
4. Under "Individual Page Section Control," click "Show Banners"
5. Click "Save Meta Settings"
   
   
   
   
   

Banner Sort Order

By default, the Banners will be displayed chronologically, with the newest Banners displayed first. To change the order of the Banners, or any post type for that matter (Banners, Features, Boxes, etc...), you must install the Post Types Order plugin. It will allow you drag and drop control over the order.

Download, install, & activate the Post Types Order plugin

Banner Sort Order

From your WordPress Administration Panel:

1. Select the "Banners" panel, then "Re-Order"
2. Click and drag to rearrange the order of the Banners
3. Click "Update"

• When you first install & activate the Post Types Order Plugin, you will see a message that the plugin must be configured.
  

  

  Post Types Order Setup
  1. Select the "Settings" panel, then "Post Types Order"
  2. Choose the General settings you desire. If you are unsure what these setting mean, leave them alone
  3. Click "Save Settings"