Clicky

Pricing Tables From RWtuts
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Pricing Tables From RWtuts

Open your browser and go online and I can almost guarantee that within 30 minutes, you'll encounter an offer for a subscription or service that compares three or more variations: e.g. Beginner; Advanced; Pro. These comparison charts are easy enough to build within Stacks, but require a little thought and patience. RWtuts just released Pricing Tables, a simple stack that will relieve you of both.

Pricing Tables is so simple to set up that if you have your content prepared, your first comparison table will be complete within mere minutes – you just need to work your way down the stack settings! The example below took less than five minutes to set up.

When you drop a Pricing Tables stack onto your RapidWeaver page, all you'll see is a box with a logo inside it.
Oops! 'What did I do wrong?' Was my first thought.
However, when I switched to preview mode, I discovered the same Pricing Tables on my page, as demonstrated on the RWtuts website.
Huh? I didn't do anything yet!
So let's take a look at the settings:

Pricing Tables
Settings panel.
Columns Styling. Pricing Tables is set up to display the 'standard' three options that we see online on a daily basis. No amount of juggling will allow you to add just a single price table, or compare four options – it's "take it, or leave it". So after choosing a Font from a choice of ten options (the dreaded Comic Sans is also included), your next option is the column width, set in percentage of the container stack.
The next setting is Space (in px) and governs the spacing between the columns.Next up – Border width, BG Colour and Border Colour.

Header Styling. Set the Header Colour for Headers 1 through 3, the Font Colour and the Font Size.

Price Styling. Price Colour (actually the background colour which also formats the background behind the submit button) and Font Size.

Button Styling. Button Colour, Font Colour and Font Size.

Once you have your formatting set up, you can add your content. Moving down the settings panel you will find containers for the contents of each panel.
These include Title, Price, Descriptions 1 through 6, Button Link and Button Text.
Once you've added this content, you can go proceed to publish – your setup is complete already.

Pricing Tables is a minimalistic stack that takes the work out of building a flat comparison table. There are no bells, or whistles, with the exception of the fact that the column that your visitor hovers over grows a subtle shadow. The setup is simple and the results will suffice in many situations.


blog comments powered by Disqus
  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

Don’t miss a post!
Sign up for our monthly newsletter.

A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.