(→Pricing Meta) |
|||
| (19 intermediate revisions by one user not shown) | |||
| Line 1: | Line 1: | ||
| − | [[Category: | + | [[Category:Store Sections]] |
[[File:Pricing-Front-End.png|200px|thumb|right|alt=Pricing Section|Pricing Section]] | [[File:Pricing-Front-End.png|200px|thumb|right|alt=Pricing Section|Pricing Section]] | ||
| − | The Pricing section displays columns that allow your users to compare plans or products. It utilizes Custom Post Types, which allow you to easily modify and arrange your pricing columns. | + | The Pricing section is a premium section available in the [[Glossary#Store|PageLines Store.]] It displays columns that allow your users to compare plans or products. It utilizes Custom Post Types, which allow you to easily modify and arrange your pricing columns. |
| − | + | ||
| − | + | ==Install the Pricing Section== | |
| + | In order to use the Pricing section, you must first purchase, install, & activate it from the PageLines Store. | ||
| + | <br /> | ||
| + | From your WordPress Administration Panel: | ||
| + | # Select the "PageLines" panel, then "Store" | ||
| + | # Select the "Sections" tab, then "Add Sections" | ||
| + | # Select the "Top Premium" tab | ||
| + | # Locate the "Pricing" section and click "Purchase" | ||
| + | #* You will be redirected to PayPal.com where you can purchase the section. After purchase is complete, you will be directed back to the Store. | ||
| + | # Click "Install" | ||
| + | # Under the "Added" tab, you will find your newly installed section | ||
| + | #* It should already be activated | ||
==Enable the Pricing section== | ==Enable the Pricing section== | ||
[[File:Enable-Pricing-Section.png|200px|thumb|right|alt=Enable Pricing Section|Enable Pricing Section]] | [[File:Enable-Pricing-Section.png|200px|thumb|right|alt=Enable Pricing Section|Enable Pricing Section]] | ||
| + | After you have purchased, installed, & activated the Pricing section, you must then enable it in your [[Glossary#Template Setup|Template Setup.]] | ||
| + | <br /><br /> | ||
From your WordPress Administration Panel: | From your WordPress Administration Panel: | ||
# Select the "PageLines" panel, then "Templates" | # Select the "PageLines" panel, then "Templates" | ||
| Line 47: | Line 59: | ||
Now that you've configured which pages will show the Pricing section, it's time to create some Pricing columns | Now that you've configured which pages will show the Pricing section, it's time to create some Pricing columns | ||
==Add New Pricing Columns== | ==Add New Pricing Columns== | ||
| + | [[File:Add-New-Pricing.png|200px|thumb|right|alt=Add New Pricing|Add New Pricing]] | ||
From your WordPress Administration Panel: | From your WordPress Administration Panel: | ||
# Select the "Pricing" panel, then "Add New Pricing" | # Select the "Pricing" panel, then "Add New Pricing" | ||
| Line 88: | Line 101: | ||
==Pricing Meta== | ==Pricing Meta== | ||
| + | [[File:Pricing-Meta.png|200px|thumb|right|alt=Pricing Meta|Pricing Meta]] | ||
Now that you have set up your Pricing columns, there are a few more page-level steps that are needed to control some display options.<br /> | Now that you have set up your Pricing columns, there are a few more page-level steps that are needed to control some display options.<br /> | ||
| Line 94: | Line 108: | ||
# Click to edit the Page that will display the Pricing section | # Click to edit the Page that will display the Pricing section | ||
# Under "PageLines Meta Settings," click "Pricing Columns" | # Under "PageLines Meta Settings," click "Pricing Columns" | ||
| − | |||
| − | |||
## '''Columns Per Row''' | ## '''Columns Per Row''' | ||
##* Select the number of columns to display per row | ##* Select the number of columns to display per row | ||
| Line 104: | Line 116: | ||
## '''Column Colors''' | ## '''Column Colors''' | ||
##* Enter the price or primary highlight text to show for this column | ##* Enter the price or primary highlight text to show for this column | ||
| + | # Click "Save Meta Settings" | ||
==Pricing Sort Order== | ==Pricing Sort Order== | ||
| − | |||
| − | |||
| − | |||
[[File:Pricing-Sort-Order.png|200px|thumb|right|alt=Pricing Sort Order|Pricing Sort Order]] | [[File:Pricing-Sort-Order.png|200px|thumb|right|alt=Pricing Sort Order|Pricing Sort Order]] | ||
| + | By default, the Pricing columns will be displayed chronologically, with the newest Pricing column displayed first. To change the order of the Pricing column, or any post type for that matter (Banners, Features, 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.<br /> | ||
| + | |||
| + | [http://downloads.wordpress.org/plugin/post-types-order.zip Download], install, & activate the Post Types Order plugin. | ||
| + | |||
From your WordPress Administration Panel: | From your WordPress Administration Panel: | ||
# Select the "Pricing" panel, then "Re-Order" | # Select the "Pricing" panel, then "Re-Order" | ||
| Line 118: | Line 132: | ||
*# 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" | ||
| + | <br /> | ||
| + | |||
| + | ==Customize with CSS== | ||
| + | [[File:Pricing-With-CSS-Front-End.png|200px|thumb|right|alt=Pricing With CSS|Pricing With CSS]] | ||
| + | Use some CSS to really make your Pricing section look great. | ||
| + | <br /><br /> | ||
| + | Here's an example of how this section looks with the following CSS applied. | ||
| + | |||
| + | # Apply the following Column Colors to your page meta: | ||
| + | #* Header Background: #2D2D2D | ||
| + | #* Head Text Color: #F4F4F4 | ||
| + | # Add the following CSS to your Custom Code section: | ||
| + | <div style="background-color: #F2F2F2; clear: both;"> | ||
| + | .pcol-head { | ||
| + | border-radius: 11px} | ||
| + | |||
| + | .pcol-title { | ||
| + | background-color: #2d2d2d; | ||
| + | border-radius: 11px 11px 0px 0px; | ||
| + | border-bottom: 1px solid #000000; | ||
| + | text-align: left; | ||
| + | color: white !important; | ||
| + | font-size: 24px} | ||
| + | |||
| + | .pcol-highlight { | ||
| + | background-color: #2d2d2d; | ||
| + | font-size: 93px; | ||
| + | padding: 0px; | ||
| + | } | ||
| + | .pcol-link { | ||
| + | background-color: #2d2d2d; | ||
| + | border-radius: 0px 0px 11px 11px} | ||
| + | |||
| + | .action-link{border-radius: 25px} | ||
| + | |||
| + | .pcol-content p{ | ||
| + | color: #ffffff; | ||
| + | font-family: arial; | ||
| + | font-weight: bolder; | ||
| + | font-size: 17px} | ||
| + | |||
| + | .pcol-link {bottom:0px} | ||
| + | |||
| + | .feature-list li a, .feature-list li a:hover { | ||
| + | color: black; | ||
| + | border: none} | ||
| + | |||
| + | .pcol-content{ | ||
| + | background-color: #2d2d2d; | ||
| + | border-bottom: 4px solid black} | ||
| + | |||
| + | .pcol-features { | ||
| + | background-color: #e4e4e4; | ||
| + | border: none; | ||
| + | border-radius: 11px; | ||
| + | padding-left: 10px; | ||
| + | padding-right: 10px} | ||
| + | |||
| + | .pcol-features ul li { | ||
| + | border-bottom: 1px solid #C8C8C8; | ||
| + | border-top: 1px solid #eeeeee} | ||
| + | |||
| + | li#menu-item-111 {border: none;} | ||
| + | |||
| + | .endlink {border-bottom: none !important} | ||
| + | </div> | ||
The Pricing section is a premium section available in the PageLines Store. It displays columns that allow your users to compare plans or products. It utilizes Custom Post Types, which allow you to easily modify and arrange your pricing columns.
Contents |
In order to use the Pricing section, you must first purchase, install, & activate it from the PageLines Store.
From your WordPress Administration Panel:
After you have purchased, installed, & activated the Pricing section, you must then enable it in your Template Setup.
From your WordPress Administration Panel:
You will now see an empty Pricing section on every page that it is active on. If you don't want the Pricing section to be displayed on all of those pages, you must configure your pages to show/hide it
From your WordPress Administration Panel:
Because the Pricing 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 Pricing section displayed.
You can also hide the Pricing section by default, and choose the pages you want to show it on.
From your WordPress Administration Panel:
Now the Pricing section will be hidden by default until you select to show it on the individual page.
Now that you've configured which pages will show the Pricing section, it's time to create some Pricing columns
From your WordPress Administration Panel:
A Pricing Set is what controls which Pricing columns are displayed on individual pages
From your WordPress Administration Panel:
From your WordPress Administration Panel:
Now that you have set up your Pricing columns, there are a few more page-level steps that are needed to control some display options.
From your WordPress Administration Panel:
By default, the Pricing columns will be displayed chronologically, with the newest Pricing column displayed first. To change the order of the Pricing column, or any post type for that matter (Banners, Features, or Boxes), 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.
From your WordPress Administration Panel:
Use some CSS to really make your Pricing section look great.
Here's an example of how this section looks with the following CSS applied.
.pcol-head {
border-radius: 11px}
.pcol-title {
background-color: #2d2d2d;
border-radius: 11px 11px 0px 0px;
border-bottom: 1px solid #000000; text-align: left; color: white !important; font-size: 24px}
.pcol-highlight {
background-color: #2d2d2d; font-size: 93px; padding: 0px;
} .pcol-link {
background-color: #2d2d2d; border-radius: 0px 0px 11px 11px}
.action-link{border-radius: 25px}
.pcol-content p{
color: #ffffff; font-family: arial; font-weight: bolder; font-size: 17px}
.pcol-link {bottom:0px}
.feature-list li a, .feature-list li a:hover {
color: black; border: none}
.pcol-content{
background-color: #2d2d2d; border-bottom: 4px solid black}
.pcol-features {
background-color: #e4e4e4; border: none; border-radius: 11px; padding-left: 10px; padding-right: 10px}
.pcol-features ul li {
border-bottom: 1px solid #C8C8C8; border-top: 1px solid #eeeeee}
li#menu-item-111 {border: none;}
.endlink {border-bottom: none !important}