Ghost Plugins

View Original

Minimal Pricing Table + Background Image

See this gallery in the original post

Look Demo

Use this simple and beautiful solution to create a pricing table. This plugin uses css editor, markdown block, and works with all template families.

How To Install

Add a Markdown Block to the page you’d like your pricing table on.

Copy and paste the text below into the Markdown Block and enter your info accordingly.

Be sure to add a hyperlink link to the text you’ve entered in place of Button Link Text. This will become your call to action button.

Save the page when done.

See this content in the original post

Next, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

See this content in the original post

Customize

There are quite a few values you can change, so we sectioned them so they are easier to find.

  • Pricing Table Box: To change the background, replace IMAGE-URL.png with the url of the image you’d like to use. Adjust the border top, border, border radius, max width, and text alignment to your liking.

  • Title, Price, and List: You can change any of these values to target font size, color, spacing, and more.

  • Button: Adjust the background, color, border radius, and padding to modify the call to action button.

  • To change the font families, go to Site Styles and edit the header 1, header 2, and body text settings.

License

This plugin comes with an Unlimited Use License. View License Terms

See this content in the original post