Minimal Pricing Table - Humaaans Edition

Plugin Delivery

Squarespace Compatibility & Requirements

Compatibility notes preserved from the original release.

Customizable Options

• This plugin proudly features the Humaaans: Mix and Match Illustration Library created by Pablo Stanley.
• 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.
• Next, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.
• 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 from one of the illustrations in Step Five. 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.
• Available background images. Right click and copy the image’s url.
• The people illustrations below are from the Humaaans: Mix and Match Illustration Library by Pablo Stanley. Go and download the free pack today… it’s great!
• This plugin comes with an Unlimited Use License. View License Terms

Install

Legacy plugins install by hand, there is no Plugin Studio build for this one.

1. 1Copy the code from the Code Documentation section below.
2. 2In Squarespace, open Website, Pages, Website Tools, Custom CSS for CSS, or Settings, Advanced, Code Injection for HTML and JavaScript.
3. 3Paste the code, save, then refresh your site to see the plugin running.

Code Documentation

// Minimal Pricing Table Humaaans Edition //

.sqs-block-markdown {
max-width: 400px;
background: url(https://IMAGE-URL.png) !important;
background-size: contain !important;
background-color: #FFFFFF !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: #2b44ff;
color: white !important;
border-radius: 20px;
}

.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;
}
}
}

Classes and Styling

Selectors and variables this plugin uses, target them in Custom CSS to restyle it.

FAQ

Answers to common questions about setup, customization, and troubleshooting.

Changelog

A history of updates released for this plugin.

Recommended

Community

Give claps, share your site, and talk with others using this plugin.