Minimal Pricing Table + Background Image

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.

Plan Title Here
-----

**$29**/mo
==========

Plan Feature 1

Plan Feature 2

Plan Feature 3

Plan Feature 4

Button Link Text

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

// Minimal Pricing Table With Background //

.sqs-block-markdown {
  max-width: 400px;
  background: url(https://IMAGE-URL.png) !important;
  background-size: contain !important;
  border-top: black 5px solid !important;
  border: #e3e3e3 1px solid;
  border-radius: 10px;
  padding: 40px !important;
  margin: 20px;
  text-align: center;
}

// Pricing Table Plan Title //

.sqs-block-markdown h2 {
  color: #000000;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 20px 30px 35px 30px;
}

// Pricing Table Plan Price //

.sqs-block-markdown h1 strong {
  font-size: 35px;
  line-height: 20px;
  font-weight: 200;
  color: #000000;
}

.sqs-block-markdown h1 {
  font-weight: 200;
  font-size: 18px;
  padding-left: 25px;
  padding-top: 0px;
  padding-bottom: 30px;
  margin: 0px;
  color: #000000;
}

// Pricing Table List //

.sqs-block-markdown  p {
  padding: 10px 30px 10px 30px;
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 20px;
  color: #242424;
}

// Pricing Table Button //

.sqs-block-markdown a {
  font-weight: 200;
  text-transform: uppercase;
  display: inline-block;
  border: 0px solid black !important;
  padding: 10px 35px !important;
  background: #000000;
  color: white !important;
  border-radius: 5px;
}

.sqs-block-markdown a:hover {
  color: #DDDDDD;
}

// Mobile Pricing Table //

@media (max-width : 667px) { .sqs-block-markdown {
    h2 {
      font-size: 20px !important;
    }
    .sqs-block-markdown h1 {
      font-size: 18px !important;
    }
      strong {
        font-size: 40px !important;
      }
    }
}

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.

Notes

No notes.

RandomMoov Labs