(→Customize with CSS) |
|||
| (6 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 /> | <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 128: | Line 140: | ||
Here's an example of how this section looks with the following CSS applied. | 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 { | .pcol-title { | ||
background-color: #2d2d2d; | background-color: #2d2d2d; | ||
| Line 143: | Line 154: | ||
text-align: left; | text-align: left; | ||
color: white !important; | color: white !important; | ||
| − | font-size: 24px | + | font-size: 24px} |
| − | + | ||
.pcol-highlight { | .pcol-highlight { | ||
background-color: #2d2d2d; | background-color: #2d2d2d; | ||
| Line 152: | Line 163: | ||
.pcol-link { | .pcol-link { | ||
background-color: #2d2d2d; | background-color: #2d2d2d; | ||
| − | border-radius: 0px 0px 11px 11px | + | border-radius: 0px 0px 11px 11px} |
| − | } | + | |
.action-link{border-radius: 25px} | .action-link{border-radius: 25px} | ||
| + | |||
.pcol-content p{ | .pcol-content p{ | ||
color: #ffffff; | color: #ffffff; | ||
font-family: arial; | font-family: arial; | ||
font-weight: bolder; | font-weight: bolder; | ||
| − | font-size: 17px | + | font-size: 17px} |
| − | } | + | |
.pcol-link {bottom:0px} | .pcol-link {bottom:0px} | ||
| + | |||
.feature-list li a, .feature-list li a:hover { | .feature-list li a, .feature-list li a:hover { | ||
color: black; | color: black; | ||
| − | border: none | + | border: none} |
| − | } | + | |
.pcol-content{ | .pcol-content{ | ||
background-color: #2d2d2d; | background-color: #2d2d2d; | ||
| − | border-bottom: 4px solid black | + | border-bottom: 4px solid black} |
| − | } | + | |
.pcol-features { | .pcol-features { | ||
| Line 175: | Line 187: | ||
border: none; | border: none; | ||
border-radius: 11px; | border-radius: 11px; | ||
| − | + | padding-left: 10px; | |
| − | padding-right: 10px | + | padding-right: 10px} |
| − | } | + | |
.pcol-features ul li { | .pcol-features ul li { | ||
border-bottom: 1px solid #C8C8C8; | border-bottom: 1px solid #C8C8C8; | ||
| − | border-top: 1px solid #eeeeee | + | border-top: 1px solid #eeeeee} |
| − | } | + | |
li#menu-item-111 {border: none;} | li#menu-item-111 {border: none;} | ||
.endlink {border-bottom: none !important} | .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}