Minimal Info Box
Description
A simple solution to a clean info box or pricing table. This plugin uses css editor and works with all template families.
How To Install
Add a Markdown Block to the page you’d like your info box 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.
Title --------------- Sentences and text info here. Button Link Text
Next, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.
// Info Box // .sqs-block-markdown { max-width: 600px; background: #ffffff; border: #DDDDDD 1px solid; border-radius: 0px; padding: 30px !important; margin: 20px; text-align: left; } // Info Box Title // .sqs-block-markdown h2 { color: #000000; font-size: 26px; letter-spacing: 0px; padding: 20px 30px 0px 30px; } // Info Box Text Info // .sqs-block-markdown p { padding: 10px 30px 30px 30px; margin: 0; font-size: 16px; text-transform: none; letter-spacing: 1px; line-height: 28px; color: #181818; } // Info Box Button // .sqs-block-markdown a { font-weight: 200; font-size: 15px; text-transform: none; display: inline-block; border: 1px solid black !important; padding: 15px 30px !important; background-color: white; color: black !important; border-radius: 0px; } .sqs-block-markdown a:hover { background-color: black !important; color: white !important; }
Customize
There are quite a few values you can change, so we sectioned them so they are easier to find.
Info Box: Adjust the background, border top, border, border radius, max width, and text alignment to your liking.
Title, and Text Info: 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 the design settings and edit the header 2 and body text settings.