Xpricing-DMS PageLines Section

 

Xpricing-DMS PageLines Section

The Xpricing-DMS section used DMS 2’s ProPricing section as a starting point. There many enhancements. Here’s more than a dozen things you can only do in Xpricing-DMS:

  • Set a custom color for Xpricing-DMS via color picker
  • Choose the width of each pricing column (e.g. 3 columns wide, 6 columns wide, 3 columns wide)
  • Add a custom CSS class to a single column
  • Many classes automatically added to be able to target any cell with LESS CSS
  • Customize the “Most Popular” text (e.g. “Best Value”)
  • Add a checkbox below the Sign Up button to replace the button’s URL (e.g. button goes to /sign-up but if checkbox is checked, goes to /sign-up?nonprofit=yes)
  • Move the button from top (above attributes) to bottom (below attributes)
  • Open button link in new window
  • Add children attributes to parent attributes (start line with “##” for parent and “#” on subsequent lines for each child)
  • Expand all children within the section or just for one parent at a time
  • Make text gray to indicate “not included” (start line with “_”)
  • Display column without borders/lines
  • Make columns tight/together (i.e. remove grid spacing)
  • Background color on hover to highlight current column
  • Disable contrasting/alternating row colors
  • Dual width (content width and full-width) section
  • Can upload an image as the “price area” instead of using just text
  • Can force table to not flow over to next line (for responsive use)

Shortcodes

Shortcodes work well in both ProPricing and Xpricing-DMS.

The and shortcodes are recommended and work well with Xpricing-DMS.

My Icon Font Shortcode plugin makes green checkmarks and red x’s extra quick and easy too!

[i color="green"]fa-check[/i] becomes <i style=”color:green;” class=”fa fa-check”></i><br />
[i color="red"]fa-times[/i] becomes <i style=”color:red;” class=”fa fa-times”></i><br />

Usage Tips

  • Use &nbsp; to create a blank line (either for price or for an attribute line)
  • Use <hr class=”soften”/> as the last attribute if the button is below the attributes for a classy-looking separation
  • Each cell can be targeted via CSS so you can target just one thing if you need to (example: #xpricing-dms-id .xpricingdms-1 .xp-price targets the section’s 1st column’s pricing area)
  • Some CSS tweaking may be needed based on the content you enter (for more complex tables)
  • FYI: These aren’t HTML tables; they’re divs

Video

Screenshots

Xpricing-DMS Global Site Settings Color Option

1-Config

2-First Half of Accordion Options

3-Second Half of Accordion Options

Examples

Below are several Xpricing-DMS sections with various different settings.