Docs

How to Use the Features Section

[edit] Please Note

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

(Difference between revisions)
(→Feature Order)
 
(186 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
[[category:New Page]]
+
[[Category:Core Sections]]
−
The key to smart strategic Web design is finding an appropriate and interactive way to display information. One comes upon endless possibilities when searching for ways to display information. One solution, the feature section, is an excellent way to display information such as images in an organized and compact manner. Features are excellent for organizing content into a nice clean module and a variety of media and content can be delivered in a manner that calls your visitors to action.
+
  
−
There are many reasons to use the Feature Section Slider. The Feature Section is a common tool, and often it is the first thing your visitors will see. Therefore, they are very usable and convenient for any user, and they can be used almost anywhere with the drag & drop ability of Platform Pro.
+
<html>
 +
<iframe width="600" height="370" src="http://www.youtube.com/embed/D3eDWGpxIm4?rel=0&playlist=IC-hC8L9cDc" frameborder="0" allowfullscreen></iframe></html>
  
−
This article focuses on how to implement the several feature section techniques correctly. We will cover when you should use it as a slider and how to make a good slideshow, and we will showcase good feature section uses  and the use of the feature section as a featured posts slider.
+
[[File:Features-Front-End.png|200px|thumb|right|alt=Features|Features]]
 +
The [[Glossary#Features Section|Features section]] is one of the most dynamic and useful sections included with the PageLines framework. This tutorial will teach you how to use it; as well as some tips and tricks on how to customize it to its fullest.<br /><br /><br /><br /><br /><br /><br /><br /><br />
  
−
Many blogs use a feature slider to feature top posts (featured posts). It is a great way to show many top posts and not take up too much space. By fitting numerous featured posts into a smaller element, you are allowing more space for other content and focusing your reader's attention to your message.
+
==Enable Features==
 +
There are different ways to set up the Features Section
 +
===Create a new page using the "Feature Page" template===
 +
[[File:Create-a-new-page.png|200px|thumb|right|alt=Create a new page|Create a new page]]
 +
From your WordPress Administration Panel:
 +
# Select the "Pages" panel, then "Add New"
 +
# Enter a title for your new page
 +
# Click the "Template" dropdown & select '''"Template |1"'''
 +
# Click "Publish"
 +
# Click "View Page"
  
−
=Activating the Feature Slider=
+
You will now see the Features section with the two default Features on your new page. (By default, you will also see the [[Glossary#Boxes Section|Boxes section]] underneath the Features section. This is because the Feature [[Glossary#Page Template|Page Template]] also has the Boxes section turned on by default)
−
There are different ways to set up the Feature Slider.
+
−
==Create a new page using the "Feature Page" template==
+
−
# Login to your WordPress Administration Panel.
+
−
# Select the "Pages" panel, then "Add New."
+
−
# Enter a title for your new page.
+
−
# Under "Page Attributes" click the "Template" dropdown.
+
−
# Select "Feature Page."
+
−
# Click "Publish."
+
−
# Click "View Page."
+
  
−
You will now see the Feature Slider with the two default Features on your new page. (By default, you will also see the PageLines Boxes underneath the Feature Slider. This is because the Feature Page template also has the PageLines Boxes section turned on by default.)
+
===Enable the Features section on existing pages===
 +
[[File:Activate-on-existing-page.png|200px|thumb|right|alt=Enable on existing page|Enable on existing page]]
 +
From your WordPress Administration Panel:
 +
# Select the "PageLines" panel, then [[Glossary#Template Setup|"Templates"]]
 +
# Select the [[Glossary#Template Area|Template Area]] that you want the Features section to go
 +
#* If you select the [[Glossary#Page Template|"Page Templates"]] area, by default the Features section will be displayed on every page that is assigned to the type of Page Template you choose
 +
#* If you select [[Glossary#Header|"Header"]] or [[Glossary#Morefoot|"Morefoot,]]" by default the Features section will be displayed on ''every page'' regardless of the Page Template
 +
#Drag the "Features" section from the "Available/Disabled Sections" over to the "Active Sections"
 +
# The Section Order will save automatically
  
−
==Activate the Pagelines Carousel on existing pages==
+
You will now see the Features section on every page that it is active on.
−
# Login to your WordPress Administration Panel.
+
−
# Select the "PageLines" panel, then "Settings."
+
−
# Select the "Template Setup" tab.
+
−
# Select the Template Area that you want the Feature Slider to go.
+
−
#* If you select the "Page Template area, by default the Feature Slider will be displayed on every page that is assigned to the Page Template you choose
+
−
#* If you select "Header" or "Morefoot," by default the Carousel will be displayed on ''every page'' regardless of the Page Template.
+
−
#Drag the "Pagelines Features" section from the "Available/Disabled Sections" over to the "Displayed Default Page Sections."
+
−
# The Section Order will save automatically.
+
  
−
You will now see the Feature Slider on every page that it is active on.
+
===Hide Features on individual pages===
 +
Using [[Glossary#Section Control|Section Control,]] you can control whether or not to show or hide an Active section on a page to page basis
 +
[[File:Hide-Features.png|200px|thumb|right|alt=Hide Features|Hide Features]]
 +
From your WordPress Administration Panel:
 +
# Select the "Pages" panel, then "All Pages"
 +
# Click to edit the page that you wish to hide the Features section
 +
# On the "Meta Panel," click the "Page Setup" tab
 +
# Under "Individual Page Section Control," click "Hide Features"
 +
# Click "Save Meta Settings"
 +
Because the Features 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 Features section displayed.
  
−
==Hide the Feature Slider on individual pages==
+
===''Show'' Features on individual pages===
−
# Login to your WordPress Administration Panel.
+
[[File:Hide-Features-by-default.png|200px|thumb|right|alt=Hide Features by default|Hide Features by default]]
−
# Select the "Pages" panel, then "All Pages."
+
You can also hide the Features section by default, and choose the pages you want to show it on.<br />
−
# Click to edit the page that you wish to hide the Feature Slider.
+
From your WordPress Administration Panel:
−
# On the "Meta Panel," click the "Page Setup" tab.
+
# Select the "PageLines" panel, then "Templates"
−
# Under "Individual Page Section Control," click "Hide PageLines Features."
+
# Make sure you have the correct Template Area selected for the type of pages you want to hide
−
# Click "Save Meta Settings."
+
# Under "Active Sections" click "Features ''Options''"
−
Because the Feature Slider is displayed by default when you activate it, you will need to use this method for every page that you do not want the Feature Slider displayed.
+
# Click "Hide This By Default"
−
==''Show'' the Feature Slider on individual pages==
+
# The Section Options will save automatically
−
You can also hide the Feature Slider by default, and choose the pages you want to show it on.
+
−
# Login to your WordPress Administration Panel.
+
−
# Select the "PageLines" panel, then "Settings."
+
−
# Select the "Template Setup" tab.
+
−
# Make sure you have the correct Template Area selected for the type of pages you want to hide.
+
−
# On the "Meta Panel," click the "Page Setup" tab.
+
−
# Under the "Displayed Default Page Sections," click "Pagelines Features ''Options.''"
+
−
# Click "Hide This By Default."
+
−
# Click "Save Options."
+
−
Now the Feature Slider will be hidden by default until you select to show it on the individual page.
+
−
# Select the "Pages" panel, then "All Pages."
+
−
# Click to edit the page that you wish to ''show'' the Feature Slider.
+
−
# Under "Individual Page Section Control," click "''Show'' PageLines Features."
+
−
# Click "Save Meta Settings."
+
  
−
=Add New Features=
+
[[File:Show-Features.png|200px|thumb|right|alt=Show Features|Show Features]]
−
# Login to your WordPress Administration Panel.
+
Now the Features section will be hidden by default until you select to show it on the individual page.
−
# Select the "Features" panel, then "Add New Feature."
+
# Select the "Pages" panel, then "All Pages"
−
# Enter a title for your Feature. By default this will be displayed as a Heading on your Feature Slide.
+
# Click to edit the page that you wish to show the Features section
−
# Enter text to be displayed on the Feature Slider.
+
# On the "Meta Panel," click the "Page Setup" tab
−
# Click "Publish."
+
# Under "Individual Page Section Control," click "''Show'' Features"
−
==Feature Setup Options==
+
# Click "Save Meta Settings"
−
===Feature Text Position===
+
−
* This option will control the position of the Feature's title & any text that you wrote.
+
−
===Feature Background Image===
+
−
Upload an image for the feature background.
+
−
# Click "Upload Image."
+
−
# 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."
+
−
====Tips For Creating a Background Image====
+
−
* The default image width & height is '''930x380 pixels.'''
+
−
* The width of the Feature Slider is determined by the "[[Content Area]]" width in the "[[Layout Editor]]" settings.
+
−
** There is a padding of 15 pixels on the right & left side of the Feature Slider.
+
−
** If the total "[[Content Area]]" width is 960 pixels, the width of the Feature Slider will be 930 pixels.
+
−
** If the image you created is wider than the Feature Slider, the ends of the image will cropped, not squished.
+
−
* To change the height of the Feature Slider, go to the MetaPanel settings for the page that will display the Feature Slider & [http://www.pagelines.com/wiki/index.php?title=Feature_Slider#Feature_Area_Height enter the new height in pixels.]
+
−
* Supports '''.png''', '''.jpg''', & '''.gif'''
+
  
−
===Feature Design Style===
+
==Add New Feature==
−
Select the design style you would like this feature to have (e.g. default background color, text color, overlay? etc...)
+
From your WordPress Administration Panel: [[File:Add-new-feature-complete.png|200px|thumb|right|alt=Add New Feature|Add New Feature]]
−
# Choose from the Drop Down options
+
# Select the "Features" panel, then "Add New Feature"
−
* The Background Color will appear behind any background image you use.
+
# Enter a Title for your Feature
−
* Using the default "Transparent Text Overlay" will help distinguish your text if there is a background image behind it.
+
#* By default this will be displayed as a Heading on your Feature Slide
−
===Feature Media Image===
+
# Enter text to be displayed on the Feature
−
Upload an image of the appropriate size for the feature media area.
+
# Choose your Feature Setup Options
−
# Click "Upload Image."
+
## '''Feature Text Position'''
−
# Browse your computer for your image & click "Open."
+
##* This option will control the position of the Feature's title & any text that you wrote
−
#* If you already uploaded an image to your server, simply type the full URL of the image & click "Save Meta Settings."
+
## '''Feature Background Image'''
−
* The position of the Feature Media Image will depend on the "Feature Text Position" setting.
+
### Click "Upload Image"
−
* Supports '''.png''', '''.jpg''', & '''.gif'''
+
### Browse your computer for your background image & click "Open"
−
===Feature Media HTML===
+
###* If you already uploaded a background image to your server, simply type the full URL of the image & click "Save Meta Settings"
−
Insert HTML, Embed Code From YouTube, Flash, etc...
+
###* '''Tips For Creating a Background Image'''
−
* NOTE: To use this you must not use a Feature Page Image.
+
###** The default image width & height is '''930x380 pixels'''
−
* If you are embedding an iframe and are having issues with drop-down menus dropping behind your video, try adding "?wmode=opaque" to the end of your embed code.
+
###** The width of the Features section is determined by the "[[Glossary#Content Area|Content Area]]" width in the "[[Glossary#Layout Editor|Layout Editor]]" settings
−
===Feature Thumb===
+
###** There is a padding of 15 pixels on the right & left side of the Features section
−
When your Feature Navigation Mode is set to "Thumb Navigation," create an image 50px wide by 30px tall and upload here.
+
###** If the total "Content Area" width is 960 pixels, the width of the Features section will be 930 pixels
−
* Supports '''.png''', '''.jpg''', & '''.gif'''
+
###** If the image you created is wider than the Features section, the ends of the image will cropped, not squished
−
===Feature Link URL===
+
###** To change the height of the Features section, go to the MetaPanel settings for the page that will display the Features section & enter the new height in pixels
−
Adding a URL here will add a link to your feature slide
+
###** Supports '''.png''', '''.jpg''', & '''.gif'''
−
===Link Text===
+
## '''Feature Design Style'''
−
Enter the text you would like in your Feature Link URL
+
##* Select the design style you would like this feature to have (e.g. default background color, text color, overlay? etc...)
−
===Navigation Label===
+
##* The Background Color will appear behind any background image you use
−
When your Feature Navigation Mode is set to "Feature Names," enter the title you would like to appear.
+
##* Using the default "Transparent Text Overlay" will help distinguish your text if there is a background image behind it
−
=Feature Sets=
+
## '''Feature Media Image'''
−
A Feature Set is what controls which Features are displayed on certain pages.
+
##* Upload an image of the appropriate size for the feature media area
−
==Create New Feature Sets==
+
### Click "Upload Image"
−
# Login to your WordPress Administration Panel.
+
### Browse your computer for your image & click "Open"
−
# Select the "Features" panel, then "Feature Sets."
+
###* If you already uploaded an image to your server, simply type the full URL of the image & click "Save Meta Settings"
−
# Type a Name for the Feature Set.
+
###* The position of the Feature Media Image will depend on the "Feature Text Position" setting
−
#* This name is how it will appear on your site.
+
###* Supports '''.png''', '''.jpg''', & '''.gif'''
−
# Type a Slug for the Feature Set.
+
## '''Feature Media HTML'''
−
#* The “Slug” is the URL-friendly version of the Feature Set Name. It is usually all lowercase and contains only letters, numbers, and hyphens.
+
##* Insert HTML, Embed Code From YouTube, Flash, etc...
 +
##* To use this you must not use a Feature Page Image
 +
##* If you are embedding an iframe and are having issues with drop-down menus dropping behind your video, try adding "?wmode=opaque" to the end of your embed code
 +
## '''Feature Thumb'''
 +
##* When your Feature Navigation Mode is set to "Thumb Navigation," create an image 50px wide by 30px tall and upload here
 +
##* Supports '''.png''', '''.jpg''', & '''.gif'''
 +
## '''Feature Link URL'''
 +
##* Adding a URL here will add a link to your feature slide
 +
## '''Link Text'''
 +
##* Enter the text you would like in your Feature Link URL
 +
## '''Navigation Label'''
 +
##* When your Feature Navigation Mode is set to "Feature Names," enter the title you would like to appear
 +
# Click "Publish"
 +
 
 +
==Feature Sets==
 +
A Feature Set is what controls which Features are displayed on individual pages
 +
===Create Feature Set===
 +
[[File:Create-Feature-Set.png|200px|thumb|right|alt=Create Feature Set|Create Feature Set]]
 +
From your WordPress Administration Panel:
 +
# Select the "Features" panel, then "Feature Sets"
 +
# Type a Name for the Feature Set
 +
#* This name is how it will appear on your site
 +
# Type a Slug for the Feature Set
 +
#* The “Slug” is the URL-friendly version of the Feature Set Name. It is usually all lowercase and contains only letters, numbers, and hyphens
 
# Click "Add New Category."
 
# Click "Add New Category."
−
==Assign Features to a Feature Set==
+
===Assign Features to a Feature Set===
−
# Login to your WordPress Administration Panel.
+
[[File:Assign-Features-to-Set.png|200px|thumb|right|alt=Assign Features to Set|Assign Features to Set]]
−
# Select the "Features" panel, then "Features."
+
From your WordPress Administration Panel:
−
# Click to edit the Feature that you want to assign.
+
# Select the "Features" panel, then "Features"
−
#* You can also select multiple Features by checking the box next to the Title and under "Bulk Action," select "Edit," then click "Apply."
+
# Click to edit the Feature that you want to assign
 +
#* You can also select multiple Features by checking the box next to the Title and under "Bulk Action," select "Edit," then click "Apply"
 
# Check the box next to the Feature Set that you want to assign the Feature to.
 
# Check the box next to the Feature Set that you want to assign the Feature to.
−
# Click "Update."
+
# Click "Update"
−
* You can assign a Feature to more than one Feature Set.
+
* You can assign a Feature to more than one Feature Set
−
* You can also assign a new Feature to a Feature Set as soon as you create it.
+
* You can also assign a Feature to a Feature Set while you are creating the Feature
  
−
==Assign a Feature Set to the Feature Slider==
+
===Assign Feature Set to Features===
−
# Login to your WordPress Administration Panel.
+
[[File:Assign-Feature-Set-to-Slider.png|200px|thumb|right|alt=Assign Feature Set to Features Section|Assign Feature Set to Features Section]]
−
# Select the "Pages" panel, then "All Pages."
+
From your WordPress Administration Panel:
−
# Click to edit the Page that you want to assign the Feature Set to.
+
# Select the "Pages" panel, then "All Pages"
−
# On the MetaPanel, click "Feature Meta."
+
# Click to edit the Page that you want to assign the Feature Set to
−
# Under "Select Feature Set To Show," click the drop down to select a Feature Set.
+
# On the MetaPanel, click "Feature Meta"
−
# Click "Save Meta Settings."
+
# Under "Select Feature Set To Show," click the drop down to select a Feature Set
−
* If you do not assign a Feature Set to a page that has an active Feature Slider, the Feature Slider will display all of your Features.
+
# Click "Save Meta Settings"
 +
* If you do not assign a Feature Set, the Features section will display all of your Features
  
 
==Feature Meta==
 
==Feature Meta==
−
These settings will further customize the Feature Slider.
+
These settings will further customize your Features. <br />[[File:Feature-Meta.png|200px|thumb|right|alt=Feature Meta|Feature Meta]]
−
# Login to your WordPress Administration Panel.
+
From your WordPress Administration Panel:
−
# Select the "Pages" panel, then "All Pages."
+
# Select the "Pages" panel, then "All Pages"
−
# Click to edit the Page that you want to update.
+
# Click to edit the Page that will display the Features section
−
# On the MetaPanel, click "Feature Meta."
+
# On the MetaPanel, click "Features"
−
===Number of Feature Slides===
+
## '''Feature Area Height'''
−
This will limit the number of Features that will appear in the Feature Slider, regardless of the number of Features assigned to the Feature Set.
+
##* To change the height of the Features section, enter the height (in pixels) into the text box
−
===Select Feature Set To Show===
+
##* The default height of the Features section is 380 pixels
−
Click the drop down to select a Feature Set.
+
## '''Number of Feature Slides'''
−
===Feature Navigation Mode===
+
##* This will limit the number of Features that will appear in the Features section, regardless of the number of Features assigned to the Feature Set
−
This controls what the buttons for each Feature slide will look like.
+
## '''Feature Post Sort Order'''
−
* If you select "No Navigation," you must set the Feature Slider to "auto mode." (using the Feature Viewing Time setting.)Otherwise your users will have no way to go to the next Feature and the Feature Slider will stay parked on the first one.
+
##* Choose from different options for sorting your feature slides
−
===Feature Viewing Time (Timeout)===
+
## '''Feature Post Sort Order'''
−
This controls whether or not the Feature Slider will be manual or automatic.
+
##* Based on the sort order chosen above, choose either "Descending" or "Ascending"
−
* By default, the Feature Slider is set to manual mode and has a Timeout value of 0. To change to automatic, enter a value in milliseconds to control how long each Feature slide will appear before transitioning to the next one.
+
## '''Select Feature Set To Show'''
−
===Feature Transition Time (Timeout)===
+
##* Click the drop down to select a Feature Set
−
This controls the amount of time in milliseconds that it takes for a Feature to transition to the next one.
+
## '''Feature Navigation Mode'''
−
===Transition Effect===
+
##* This controls what the buttons for each Feature slide will look like
−
Click the drop down to choose from 28 different transition effects.
+
##* If you select "No Navigation," you must set the Features section to "auto mode." (using the Feature Viewing Time setting) Otherwise your users will have no way to go to the next Feature and the Features section will stay parked on the first Feature
−
===Show Play/Pause Button===
+
## '''Feature Viewing Time (Timeout)'''
−
When the Feature Slider is set to Automatic Mode, check this box to add a play/pause button to the Feature Slider. That way users can pause the automatic transitioning in order to watch a video, read a feature, etc..
+
##* This controls whether or not the Features section will be manual or automatic  
−
===Feature Post Source===
+
##* By default, the Features section is set to manual mode and has a Timeout value of 0. To change to automatic, enter a value in milliseconds to control how long each Feature slide will appear before transitioning to the next one
−
The Feature Slider will by default use "Feature Post (custom post type)" slides that you create. As an alternative, you can set the Feature Post Source to show a category of regular Blog Posts instead of Feature Posts.
+
## '''Feature Transition Time (Timeout)'''
−
* Click the drop down menu to select "Use Post Category"
+
##* This controls the amount of time in milliseconds that it takes for a Feature to transition to the next one
−
===Post Category===
+
## '''Transition Effect'''
−
If your Feature Post Source is set to "Use Post Category," click the drop down to select the post category that you want to use.
+
##* Click the drop down to choose from 28 different transition effects
−
===Feature Area Height===
+
## '''Show Play/Pause Button'''
−
To change the height of the Feature Slider, enter the height (in pixels) into the text box.
+
##* When the Features section is set to Automatic Mode, check this box to add a play/pause button to the Features section. That way users can pause the automatic transitioning in order to watch a video, read a feature, etc..
−
* The default height of the Feature Slider is 380 pixels.
+
## '''Feature Post Source'''
−
===Remove Transition Syncing===
+
##* The Features section will by default use "Feature Post (custom post type)" slides that you create. As an alternative, you can set the Feature Post Source to show a category of regular Blog Posts instead of Feature Posts, or you can choose ''All''Posts
−
This controls whether features can move on to the screen while another is transitioning off. If checked, features will have to leave the screen before the next can transition on to it.
+
##* Click the drop down menu to select your Post Source
 +
##* See below for more information
 +
## '''Post Category'''
 +
##* If your Feature Post Source is set to "Use Post Category," click the drop down to select the post category that you want to use
 +
## '''Remove Transition Syncing'''
 +
##* This controls whether features can move on to the screen while another is transitioning off. If checked, features will have to leave the screen before the next can transition on to it
 +
# Click "Save Meta Settings"
 +
 
 +
==Feature Post Source==
 +
===Background Image===
 +
If you set your Feature Post Source to "Use Post Category," the post's "Featured Image" will be used as the background image. If your post does not have a "Featured Image", the background will be black.
 +
 
 +
If you do not want your background image to be the "Featured Image", you can easily change it by adding the following custom CSS:
 +
 
 +
<div style="background-color: #FFFF00">
 +
 
 +
<nowiki>#</nowiki>feature_<span style="color:red">###</span> .feature-wrap {background-image: url("<span style="color:red">link to background image</span>") !important}
 +
</div>
 +
Where <span style="color:red">###</span> = the div id of that particular Feature Slider. Use a [http://www.pagelines.com/wiki/index.php?title=CSS_Customization#How_to_use_CSS_Inspection_Tools CSS Inspections tool] such as Firebug to find the id number.
 +
===Text Position===
 +
By default, your blog excerpts will be displayed on the left side of the Feature Slider. To move the excerpts to the right side, add the following custom CSS:
 +
 
 +
<div style="background-color: #FFFF00">
 +
<nowiki>#</nowiki>feature_<span style="color:red">###</span> .fcontent {float: right !important}
 +
</div>
 +
 
 +
Remember that <span style="color:red">###</span> = the div id of that particular Feature Slider.
 +
 
 
==Feature Sort Order==
 
==Feature Sort Order==
−
By default, the Feature Slider will display the Features chronologically, with the newest Features displayed first. To change the order of the Features, or any post type for that matter (features, banners, or boxes), you must install the [http://wordpress.org/extend/plugins/post-types-order Post Types Order] plugin. It will allow you drag and drop control over the order.
+
You can use the Features Meta to control the sort order of the features either descending or ascending using the following methods:
 +
* Post ID
 +
* Title
 +
* Date
 +
* Last Modified
 +
* Random
  
−
# [http://downloads.wordpress.org/plugin/post-types-order.zip Download the Post Types Order plugin]
+
If you are unable to achieve your desired sort order using these options, you can alternatively use the [[Glossary#Post Types Order Plugin|Post Types Order]] plugin. It will allow you drag and drop control over the order however you want.<br /><br />
−
# Login to your WordPress Administration Panel.
+
[http://downloads.wordpress.org/plugin/post-types-order.zip Download], install, & activate the Post Types Order plugin <br />
−
# Select the "Plugins" panel, then "Add New."
+
[[File:Feature-Sort-Order.png|200px|thumb|right|alt=Feature Sort Order|Feature Sort Order]]
−
# Click "Upload," then "Choose File."
+
From your WordPress Administration Panel:
−
# Locate the "post-types-order.zip" file that you downloaded and click "Open"
+
# Select the "Features" panel, then "Re-Order"
−
# Click "Install Now."
+
# Click and drag to rearrange the order of the Features
−
# After the plugin successfully installs, click "Activate Plugin."
+
# Click "Update"
−
# Select the "Features" panel, then "Re-Order."
+
[[File:Post-Types-Order-setup.png|200px|thumb|right|alt=Post Types Order Setup|Post Types Order Setup]]
−
# Click and drag to rearrange the order of the Features.
+
<br /><br /><br /><br /><br />
−
# Click "Update."
+
 
* When you first install & activate the Post Types Order Plugin, you will see a message that the plugin must be configured.  
 
* When you first install & activate the Post Types Order Plugin, you will see a message that the plugin must be configured.  
−
*# Login to your WordPress Administration Panel.
+
*# Select the "Settings" panel, then "Post Types Order"
−
*# Select the "Settings" panel, then "Post Types Order."
+
*# Choose the General settings you desire. If you are unsure what these setting mean, leave them alone
−
*# Choose the settings you desire. If you are unsure what these setting mean, leave them alone.
+
*# Click "Save Settings"
−
*# Click "Save Settings."
+

Latest revision as of 18:14, 26 March 2012


Features
Features

The Features section is one of the most dynamic and useful sections included with the PageLines framework. This tutorial will teach you how to use it; as well as some tips and tricks on how to customize it to its fullest.








Contents

[edit] Enable Features

There are different ways to set up the Features Section

[edit] Create a new page using the "Feature Page" template

Create a new page
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. Click the "Template" dropdown & select "Template |1"
  4. Click "Publish"
  5. Click "View Page"

You will now see the Features section with the two default Features on your new page. (By default, you will also see the Boxes section underneath the Features section. This is because the Feature Page Template also has the Boxes section turned on by default)

[edit] Enable the Features section on existing pages

Enable on existing page
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 Features section to go
    • If you select the "Page Templates" area, by default the Features section will be displayed on every page that is assigned to the type of Page Template you choose
    • If you select "Header" or "Morefoot," by default the Features section will be displayed on every page regardless of the Page Template
  3. Drag the "Features" section from the "Available/Disabled Sections" over to the "Active Sections"
  4. The Section Order will save automatically

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

[edit] Hide Features 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 Features
Hide Features

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 Features section
  3. On the "Meta Panel," click the "Page Setup" tab
  4. Under "Individual Page Section Control," click "Hide Features"
  5. Click "Save Meta Settings"

Because the Features 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 Features section displayed.

[edit] Show Features on individual pages

Hide Features by default
Hide Features by default

You can also hide the Features 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 "Features Options"
  4. Click "Hide This By Default"
  5. The Section Options will save automatically
Show Features
Show Features

Now the Features 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 Features section
  3. On the "Meta Panel," click the "Page Setup" tab
  4. Under "Individual Page Section Control," click "Show Features"
  5. Click "Save Meta Settings"

[edit] Add New Feature

From your WordPress Administration Panel:
Add New Feature
Add New Feature
  1. Select the "Features" panel, then "Add New Feature"
  2. Enter a Title for your Feature
    • By default this will be displayed as a Heading on your Feature Slide
  3. Enter text to be displayed on the Feature
  4. Choose your Feature Setup Options
    1. Feature Text Position
      • This option will control the position of the Feature's title & any text that you wrote
    2. Feature Background Image
      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"
        • Tips For Creating a Background Image
          • The default image width & height is 930x380 pixels
          • The width of the Features section is determined by the "Content Area" width in the "Layout Editor" settings
          • There is a padding of 15 pixels on the right & left side of the Features section
          • If the total "Content Area" width is 960 pixels, the width of the Features section will be 930 pixels
          • If the image you created is wider than the Features section, the ends of the image will cropped, not squished
          • To change the height of the Features section, go to the MetaPanel settings for the page that will display the Features section & enter the new height in pixels
          • Supports .png, .jpg, & .gif
    3. Feature Design Style
      • Select the design style you would like this feature to have (e.g. default background color, text color, overlay? etc...)
      • The Background Color will appear behind any background image you use
      • Using the default "Transparent Text Overlay" will help distinguish your text if there is a background image behind it
    4. Feature Media Image
      • Upload an image of the appropriate size for the feature media area
      1. Click "Upload Image"
      2. Browse your computer for your image & click "Open"
        • If you already uploaded an image to your server, simply type the full URL of the image & click "Save Meta Settings"
        • The position of the Feature Media Image will depend on the "Feature Text Position" setting
        • Supports .png, .jpg, & .gif
    5. Feature Media HTML
      • Insert HTML, Embed Code From YouTube, Flash, etc...
      • To use this you must not use a Feature Page Image
      • If you are embedding an iframe and are having issues with drop-down menus dropping behind your video, try adding "?wmode=opaque" to the end of your embed code
    6. Feature Thumb
      • When your Feature Navigation Mode is set to "Thumb Navigation," create an image 50px wide by 30px tall and upload here
      • Supports .png, .jpg, & .gif
    7. Feature Link URL
      • Adding a URL here will add a link to your feature slide
    8. Link Text
      • Enter the text you would like in your Feature Link URL
    9. Navigation Label
      • When your Feature Navigation Mode is set to "Feature Names," enter the title you would like to appear
  5. Click "Publish"

[edit] Feature Sets

A Feature Set is what controls which Features are displayed on individual pages

[edit] Create Feature Set

Create Feature Set
Create Feature Set

From your WordPress Administration Panel:

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

[edit] Assign Features to a Feature Set

Assign Features to Set
Assign Features to Set

From your WordPress Administration Panel:

  1. Select the "Features" panel, then "Features"
  2. Click to edit the Feature that you want to assign
    • You can also select multiple Features by checking the box next to the Title and under "Bulk Action," select "Edit," then click "Apply"
  3. Check the box next to the Feature Set that you want to assign the Feature to.
  4. Click "Update"
  • You can assign a Feature to more than one Feature Set
  • You can also assign a Feature to a Feature Set while you are creating the Feature

[edit] Assign Feature Set to Features

Assign Feature Set to Features Section
Assign Feature Set to Features Section

From your WordPress Administration Panel:

  1. Select the "Pages" panel, then "All Pages"
  2. Click to edit the Page that you want to assign the Feature Set to
  3. On the MetaPanel, click "Feature Meta"
  4. Under "Select Feature Set To Show," click the drop down to select a Feature Set
  5. Click "Save Meta Settings"
  • If you do not assign a Feature Set, the Features section will display all of your Features

[edit] Feature Meta

These settings will further customize your Features.
Feature Meta
Feature Meta

From your WordPress Administration Panel:

  1. Select the "Pages" panel, then "All Pages"
  2. Click to edit the Page that will display the Features section
  3. On the MetaPanel, click "Features"
    1. Feature Area Height
      • To change the height of the Features section, enter the height (in pixels) into the text box
      • The default height of the Features section is 380 pixels
    2. Number of Feature Slides
      • This will limit the number of Features that will appear in the Features section, regardless of the number of Features assigned to the Feature Set
    3. Feature Post Sort Order
      • Choose from different options for sorting your feature slides
    4. Feature Post Sort Order
      • Based on the sort order chosen above, choose either "Descending" or "Ascending"
    5. Select Feature Set To Show
      • Click the drop down to select a Feature Set
    6. Feature Navigation Mode
      • This controls what the buttons for each Feature slide will look like
      • If you select "No Navigation," you must set the Features section to "auto mode." (using the Feature Viewing Time setting) Otherwise your users will have no way to go to the next Feature and the Features section will stay parked on the first Feature
    7. Feature Viewing Time (Timeout)
      • This controls whether or not the Features section will be manual or automatic
      • By default, the Features section is set to manual mode and has a Timeout value of 0. To change to automatic, enter a value in milliseconds to control how long each Feature slide will appear before transitioning to the next one
    8. Feature Transition Time (Timeout)
      • This controls the amount of time in milliseconds that it takes for a Feature to transition to the next one
    9. Transition Effect
      • Click the drop down to choose from 28 different transition effects
    10. Show Play/Pause Button
      • When the Features section is set to Automatic Mode, check this box to add a play/pause button to the Features section. That way users can pause the automatic transitioning in order to watch a video, read a feature, etc..
    11. Feature Post Source
      • The Features section will by default use "Feature Post (custom post type)" slides that you create. As an alternative, you can set the Feature Post Source to show a category of regular Blog Posts instead of Feature Posts, or you can choose AllPosts
      • Click the drop down menu to select your Post Source
      • See below for more information
    12. Post Category
      • If your Feature Post Source is set to "Use Post Category," click the drop down to select the post category that you want to use
    13. Remove Transition Syncing
      • This controls whether features can move on to the screen while another is transitioning off. If checked, features will have to leave the screen before the next can transition on to it
  4. Click "Save Meta Settings"

[edit] Feature Post Source

[edit] Background Image

If you set your Feature Post Source to "Use Post Category," the post's "Featured Image" will be used as the background image. If your post does not have a "Featured Image", the background will be black.

If you do not want your background image to be the "Featured Image", you can easily change it by adding the following custom CSS:

#feature_### .feature-wrap {background-image: url("link to background image") !important}

Where ### = the div id of that particular Feature Slider. Use a CSS Inspections tool such as Firebug to find the id number.

[edit] Text Position

By default, your blog excerpts will be displayed on the left side of the Feature Slider. To move the excerpts to the right side, add the following custom CSS:

#feature_### .fcontent {float: right !important}

Remember that ### = the div id of that particular Feature Slider.

[edit] Feature Sort Order

You can use the Features Meta to control the sort order of the features either descending or ascending using the following methods:

  • Post ID
  • Title
  • Date
  • Last Modified
  • Random

If you are unable to achieve your desired sort order using these options, you can alternatively use the Post Types Order plugin. It will allow you drag and drop control over the order however you want.

Download, install, & activate the Post Types Order plugin

Feature Sort Order
Feature Sort Order

From your WordPress Administration Panel:

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






  • When you first install & activate the Post Types Order Plugin, you will see a message that the plugin must be configured.
    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"
Retrieved from "http://www.pagelines.com/wiki/index.php?title=How_to_Use_the_Features_Section&oldid=4967"