| Style |
| Layout |
columns |
Select one of the three predefined layouts (columns, grid, table). Columns features separate columns. Grid groups the columns together in a single block. Table displays a table structure complete with a table head. |
| Skin |
skin1 |
Select one of the predefined skins (default, skin1, skin2, skin3, skin4). Skin defines the column elements to be colored in main color for each column. It's the fastest way to color the columns. Also there are color options available for each element to create a unique coloring. |
| Main skin color |
rgb(0, 131, 255) |
Set main skin color to color elements according to the selected skin. |
| Round off column corners |
true |
Turn on this option to make column edges rounded. |
| Columns border |
true |
Turn on this option to display column border. |
| Content |
| Head: title |
Plan name |
Set the head column's title. The title will be displayed on the level with the titles of the rest of the columns. Works only with the table layout. |
| Head: features |
- |
Set the names for the features to be displayed in the comparison table. Each feature name is displayed on the level with the corresponding feature in the table. Works only with the table layout. |
| Head: text color |
rgb(23, 25, 26) |
Set the head column's text color. Works only with the table layout. |
| Head: background color |
rgb(247, 247, 247) |
Set the head column's background color. Works only with the table layout. |
| Columns: featured column |
false |
Use this option to highlight a column against the other ones. Hint: use it to highlight your most profitable plan. |
| Columns: title |
Title |
Set the columns title. As a rule, it's the name of your plan. |
| Columns: title caption |
- |
Set a short additional description as the title's caption. For example, you can say here who will profit the most from this plan. |
| Columns: features |
- |
The list of features. You can list any feature or item, characteristic of the offer. |
| Columns: features text |
- |
Enter the feature description. |
| Columns: features icon |
none |
Select feature icon from the list. |
| Columns: features hint |
- |
Add a hint to provide your customers with additional information or provide a more detailed description of the feature. Hover on the question mark next to the feature text to display the hint. |
| Columns: price prefix |
- |
Set small price prefix. |
| Columns: price currency |
$ |
Choose the currency. |
| Columns: price |
- |
Set the price. |
| Columns: price postfix |
month |
Set small price postfix. |
| Columns: price caption |
- |
Set the price caption - payment period, special offer, discount price, etc. |
| Columns: button label |
Select |
Set the button label text. |
| Columns: button link |
- |
Set the link to redirect your user to after clicking on the button. |
| Columns: button caption |
- |
Set the button caption. This text under the button can be used as an extra call to action. |
| Columns: picture URL |
- |
Paste the URL of the picture you want to display on your column. The picture's aspect ratio should be 3:2. |
| Columns: ribbon text |
- |
Set the ribbon text. The ribbon is a visual element that will attract more attention to the column where it's placed. |
| Columns: ribbon background color |
- |
Set the ribbon background color. |
| Columns: ribbon text color |
- |
Set the ribbon text color. |
| Column settings: main skin color |
rgb(0, 131, 255) |
Set main skin color to color this column's elements according to the selected skin. |
| Elements |
| Title: show title |
true |
Turn on/off the title. |
| Title: title color |
- |
Set the title's text color. |
| Title: caption color |
- |
Set the caption's text color. |
| Title: title font size |
24 |
Set the title font size in pixels. |
| Title: title font weight |
regular |
Select the title font weight from the predefined optinos (regular and bold). |
| Features: show features |
true |
Turn on/off the features. |
| Columns: features style |
clean |
Select the features list style from the list (clean, divided, striped). Clean displays the features only without any additional elements. Divided separates the features with lines. Striped displays the features list in a zebra pattern. |
| Columns: features align |
left |
Select the features text align. |
| Columns: features icon color |
- |
Set the features icon color. |
| Columns: features text color |
- |
Set the features text color. |
| Price: show price |
true |
Turn on/off the price. |
| Price: price text color |
- |
Set the price text color. |
| Price: price caption color |
- |
Set the price caption color. |
| Price: price font size |
24 |
Set the price font size in pixels. |
| Price: price font weight |
regular |
Choose the price font weight (regular, bold). |
| Button: show button |
true |
Turn on/off the button. |
| Button: button type |
outline |
Choose the button type (outline or filled). |
| Button: button size |
medium |
Choose the button size (small, medium, large). |
| Button: button color |
- |
Set the button color. |
| Button: button text color |
- |
Set the button label color. |
| Button: button caption color |
- |
Set the button caption color. |
| Picture: show picture |
true |
Turn on/off the picture. |