(→Feature Meta) |
|||
| (90 intermediate revisions by one user not shown) | |||
| Line 1: | Line 1: | ||
| − | [[ | + | [[Category:Core Sections]] |
| − | + | ||
| − | == | + | <html> |
| − | There are different ways to set up the | + | <iframe width="600" height="370" src="http://www.youtube.com/embed/D3eDWGpxIm4?rel=0&playlist=IC-hC8L9cDc" frameborder="0" allowfullscreen></iframe></html> |
| + | |||
| + | [[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 /> | ||
| + | |||
| + | ==Enable Features== | ||
| + | There are different ways to set up the Features Section | ||
===Create a new page using the "Feature Page" template=== | ===Create a new page using the "Feature Page" template=== | ||
| − | [[File:Create-a-new-page.png|200px|thumb|right|Create a new page]] | + | [[File:Create-a-new-page.png|200px|thumb|right|alt=Create a new page|Create a new page]] |
From your WordPress Administration Panel: | From your WordPress Administration Panel: | ||
# Select the "Pages" panel, then "Add New" | # Select the "Pages" panel, then "Add New" | ||
# Enter a title for your new page | # Enter a title for your new page | ||
| − | # | + | # Click the "Template" dropdown & select '''"Template |1"''' |
| − | + | ||
# Click "Publish" | # Click "Publish" | ||
# Click "View Page" | # Click "View Page" | ||
| − | You will now see the | + | 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) |
| − | === | + | |
| − | [[File:Activate-on-existing-page.png|200px|thumb|right| | + | ===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: | From your WordPress Administration Panel: | ||
| − | # Select the "PageLines" panel, then "Templates" | + | # Select the "PageLines" panel, then [[Glossary#Template Setup|"Templates"]] |
| − | # Select the Template Area that you want the | + | # Select the [[Glossary#Template Area|Template Area]] that you want the Features section to go |
| − | #* If you select the | + | #* 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 "Header" or "Morefoot," by default the | + | #* 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 " | + | #Drag the "Features" section from the "Available/Disabled Sections" over to the "Active Sections" |
# The Section Order will save automatically | # The Section Order will save automatically | ||
| − | You will now see the | + | You will now see the Features section on every page that it is active on. |
| − | ===Hide | + | |
| − | [[File:Hide-Features.png|200px|thumb|right|Hide Features]] | + | ===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: | 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 wish to hide the | + | # Click to edit the page that you wish to hide the Features section |
# On the "Meta Panel," click the "Page Setup" tab | # On the "Meta Panel," click the "Page Setup" tab | ||
| − | # Under "Individual Page Section Control," click "Hide | + | # Under "Individual Page Section Control," click "Hide Features" |
# Click "Save Meta Settings" | # Click "Save Meta Settings" | ||
| − | Because the | + | 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. |
| − | ===''Show'' | + | |
| − | [[File:Hide-Features-by-default.png|200px|thumb|right|Hide Features by default]] | + | ===''Show'' Features on individual pages=== |
| − | You can also hide the | + | [[File:Hide-Features-by-default.png|200px|thumb|right|alt=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.<br /> | ||
From your WordPress Administration Panel: | From your WordPress Administration Panel: | ||
# Select the "PageLines" panel, then "Templates" | # Select the "PageLines" panel, then "Templates" | ||
# Make sure you have the correct Template Area selected for the type of pages you want to hide | # Make sure you have the correct Template Area selected for the type of pages you want to hide | ||
| − | # Under "Active Sections" click " | + | # Under "Active Sections" click "Features ''Options''" |
# Click "Hide This By Default" | # Click "Hide This By Default" | ||
# The Section Options will save automatically | # The Section Options will save automatically | ||
| − | [[File:Show-Features.png|200px|thumb|right|Show Features]] | + | [[File:Show-Features.png|200px|thumb|right|alt=Show Features|Show Features]] |
| − | Now the | + | Now the Features section will be hidden by default until you select to show it on the individual page. |
# Select the "Pages" panel, then "All Pages" | # Select the "Pages" panel, then "All Pages" | ||
| − | # Click to edit the page that you wish to show the | + | # Click to edit the page that you wish to show the Features section |
# On the "Meta Panel," click the "Page Setup" tab | # On the "Meta Panel," click the "Page Setup" tab | ||
| − | # Under "Individual Page Section Control," click "''Show'' | + | # Under "Individual Page Section Control," click "''Show'' Features" |
# Click "Save Meta Settings" | # Click "Save Meta Settings" | ||
==Add New Feature== | ==Add New Feature== | ||
| − | From your WordPress Administration Panel: [[File:Add-new-feature-complete.png|200px|thumb|right|Add | + | From your WordPress Administration Panel: [[File:Add-new-feature-complete.png|200px|thumb|right|alt=Add New Feature|Add New Feature]] |
# Select the "Features" panel, then "Add New Feature" | # Select the "Features" panel, then "Add New Feature" | ||
# Enter a Title for your Feature | # Enter a Title for your Feature | ||
#* By default this will be displayed as a Heading on your Feature Slide | #* By default this will be displayed as a Heading on your Feature Slide | ||
| − | # Enter text to be displayed on the Feature | + | # Enter text to be displayed on the Feature |
# Choose your Feature Setup Options | # Choose your Feature Setup Options | ||
## '''Feature Text Position''' | ## '''Feature Text Position''' | ||
| Line 68: | Line 76: | ||
###* '''Tips For Creating a Background Image''' | ###* '''Tips For Creating a Background Image''' | ||
###** The default image width & height is '''930x380 pixels''' | ###** The default image width & height is '''930x380 pixels''' | ||
| − | ###** The width of the | + | ###** The width of the Features section is determined by the "[[Glossary#Content Area|Content Area]]" width in the "[[Glossary#Layout Editor|Layout Editor]]" settings |
| − | ###** There is a padding of 15 pixels on the right & left side of the | + | ###** There is a padding of 15 pixels on the right & left side of the Features section |
| − | ###** If the total " | + | ###** 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 | + | ###** 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 | + | ###** 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''' | ###** Supports '''.png''', '''.jpg''', & '''.gif''' | ||
## '''Feature Design Style''' | ## '''Feature Design Style''' | ||
| Line 101: | Line 109: | ||
==Feature Sets== | ==Feature Sets== | ||
| − | A Feature Set is what controls which Features are displayed on | + | A Feature Set is what controls which Features are displayed on individual pages |
===Create Feature Set=== | ===Create Feature Set=== | ||
| − | [[File:Create-Feature-Set.png|200px|thumb|right|Create Feature Set]] | + | [[File:Create-Feature-Set.png|200px|thumb|right|alt=Create Feature Set|Create Feature Set]] |
From your WordPress Administration Panel: | From your WordPress Administration Panel: | ||
# Select the "Features" panel, then "Feature Sets" | # Select the "Features" panel, then "Feature Sets" | ||
| Line 112: | Line 120: | ||
# Click "Add New Category." | # Click "Add New Category." | ||
===Assign Features to a Feature Set=== | ===Assign Features to a Feature Set=== | ||
| − | [[File:Assign-Features-to-Set.png|200px|thumb|right|Assign Features to Set]] | + | [[File:Assign-Features-to-Set.png|200px|thumb|right|alt=Assign Features to Set|Assign Features to Set]] |
From your WordPress Administration Panel: | From your WordPress Administration Panel: | ||
# Select the "Features" panel, then "Features" | # Select the "Features" panel, then "Features" | ||
| Line 122: | Line 130: | ||
* You can also assign a Feature to a Feature Set while you are creating the Feature | * You can also assign a Feature to a Feature Set while you are creating the Feature | ||
| − | ===Assign | + | ===Assign Feature Set to Features=== |
| − | [[File:Assign-Feature-Set-to-Slider.png|200px|thumb|right|Assign Feature Set to | + | [[File:Assign-Feature-Set-to-Slider.png|200px|thumb|right|alt=Assign Feature Set to Features Section|Assign Feature Set to Features Section]] |
From your WordPress Administration Panel: | From your WordPress Administration Panel: | ||
# Select the "Pages" panel, then "All Pages" | # Select the "Pages" panel, then "All Pages" | ||
| Line 130: | Line 138: | ||
# Under "Select Feature Set To Show," click the drop down to select a Feature Set | # Under "Select Feature Set To Show," click the drop down to select a Feature Set | ||
# Click "Save Meta Settings" | # Click "Save Meta Settings" | ||
| − | * If you do not assign a Feature Set | + | * 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 your Features. <br />[[File:Feature-Meta.png|200px|thumb|right|Feature Meta]] | + | These settings will further customize your Features. <br />[[File:Feature-Meta.png|200px|thumb|right|alt=Feature Meta|Feature Meta]] |
From 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 | + | # Click to edit the Page that will display the Features section |
| − | # On the MetaPanel, click " | + | # On the MetaPanel, click "Features" |
| + | ## '''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 | ||
## '''Number of Feature Slides''' | ## '''Number of Feature Slides''' | ||
| − | ##* This will limit the number of Features that will appear in the | + | ##* 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 |
| + | ## '''Feature Post Sort Order''' | ||
| + | ##* Choose from different options for sorting your feature slides | ||
| + | ## '''Feature Post Sort Order''' | ||
| + | ##* Based on the sort order chosen above, choose either "Descending" or "Ascending" | ||
## '''Select Feature Set To Show''' | ## '''Select Feature Set To Show''' | ||
##* Click the drop down to select a Feature Set | ##* Click the drop down to select a Feature Set | ||
## '''Feature Navigation Mode''' | ## '''Feature Navigation Mode''' | ||
##* This controls what the buttons for each Feature slide will look like | ##* This controls what the buttons for each Feature slide will look like | ||
| − | ##* If you select "No Navigation," you must set the | + | ##* 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 |
## '''Feature Viewing Time (Timeout)''' | ## '''Feature Viewing Time (Timeout)''' | ||
| − | ##* This controls whether or not the | + | ##* This controls whether or not the Features section will be manual or automatic |
| − | ##* By default, the | + | ##* 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 |
## '''Feature Transition Time (Timeout)''' | ## '''Feature Transition Time (Timeout)''' | ||
##* This controls the amount of time in milliseconds that it takes for a Feature to transition to the next one | ##* This controls the amount of time in milliseconds that it takes for a Feature to transition to the next one | ||
| Line 153: | Line 168: | ||
##* Click the drop down to choose from 28 different transition effects | ##* Click the drop down to choose from 28 different transition effects | ||
## '''Show Play/Pause Button''' | ## '''Show Play/Pause Button''' | ||
| − | ##* When the | + | ##* 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.. |
## '''Feature Post Source''' | ## '''Feature Post Source''' | ||
| − | ##* The | + | ##* 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 |
| − | ##* Click the drop down menu to select | + | ##* Click the drop down menu to select your Post Source |
| + | ##* See below for more information | ||
## '''Post Category''' | ## '''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 | ##* 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''' | ## '''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 | ##* 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" | # 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== | ||
| − | + | 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], install, & activate the Post Types Order plugin [[File:Feature-Sort-Order.png|200px|thumb|right|Feature Sort Order]] | + | 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 /> |
| + | [http://downloads.wordpress.org/plugin/post-types-order.zip Download], install, & activate the Post Types Order plugin <br /> | ||
| + | [[File:Feature-Sort-Order.png|200px|thumb|right|alt=Feature Sort Order|Feature Sort Order]] | ||
From your WordPress Administration Panel: | From your WordPress Administration Panel: | ||
# Select the "Features" panel, then "Re-Order" | # Select the "Features" panel, then "Re-Order" | ||
# Click and drag to rearrange the order of the Features | # Click and drag to rearrange the order of the Features | ||
# Click "Update" | # Click "Update" | ||
| − | + | [[File:Post-Types-Order-setup.png|200px|thumb|right|alt=Post Types Order Setup|Post Types Order Setup]] | |
| + | <br /><br /><br /><br /><br /> | ||
| + | * When you first install & activate the Post Types Order Plugin, you will see a message that the plugin must be configured. | ||
*# 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 General settings you desire. If you are unsure what these setting mean, leave them alone | ||
*# Click "Save Settings" | *# Click "Save Settings" | ||
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 |
There are different ways to set up the Features Section
From your WordPress Administration Panel:
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)
From your WordPress Administration Panel:
You will now see the Features section on every page that it is active on.
Using Section Control, you can control whether or not to show or hide an Active section on a page to page basis
From your WordPress Administration Panel:
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.
You can also hide the Features section by default, and choose the pages you want to show it on.
From your WordPress Administration Panel:
Now the Features section will be hidden by default until you select to show it on the individual page.
A Feature Set is what controls which Features are displayed on individual pages
From your WordPress Administration Panel:
From your WordPress Administration Panel:
From your WordPress Administration Panel:
From your WordPress Administration Panel:
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.
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.
You can use the Features Meta to control the sort order of the features either descending or ascending using the following methods:
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
From your WordPress Administration Panel: