Pricing Card

A Pricing Card is an excellent way to present an Offer, acting as a price tag on your page that displays all the features of your product and directs your users to the checkout page with a Call to Action. You can use multiple Pricing Cards together in a section to showcase multiple Offers you may have for one product such as pricing plans, bundles and more. Learn to add a Pricing block to showcase your Products, Services, Pricing Options, and more.

In this article:

Add and Remove a Pricing Card block

To add a Pricing Card block:

  • Click the section you want to edit or create a new one.
  • In the sidebar, select Add Content.
  • From the list, select Pricing Card.
  • Your newly created Pricing Card block will generate at the bottom of the section.
  • Click Save to keep your changes:


To remove a Pricing Card:

  • In your Page, hover over the existing Pricing Card block and click Edit.
  • In the sidebar, scroll to the bottom and click Delete This Block.
  • Click Save to keep your changes:

Customize your Pricing Card block:

In a Pricing Card block, configure the width of the block, name, price, heading, and customize the text and appearance of the message displayed by setting the List icon and List icon color.


  • In your Page, hover over the existing Pricing Card you want to edit and click Edit.
  • Navigate to the sidebar and select the number of columns to adjust the width of the Pricing Card block:



Customize the name of your Pricing Option.


Specify the Price of the specific Pricing Option.

Heading and Text

Customize the message describing the features included.

List Icon and Icon Color

Customize the appearance of the List describing the features by changing the icon to Check, Plus, or Star and by selecting a color for the Icon.

Block Settings

To adjust the look and feel of the Pricing Card block, configure your Block Settings by customizing the Call to Action, Background, Desktop and Mobile Layout, Animations, and Time Reveal.

Configure your Block Settings:

  • Hover over the block you want to customize and click Edit.
  • Configure your Block Settings in the sidebar.
  • Click Save to keep your changes:


Call To Action

Add and customize the action and appearance of a Call to Action button.

The Call to Action (CTA) button can be used to:

  • Lead a visitor to a custom Landing Page
  • Lead to a sale by going to a Checkout Page
  • Encourage your audience to download a file
  • Lead to any website page with a URL link
  • Open a Two-Step Optin Popup
  • And act as an anchor link to lead to a section of the page


Select a background color, adjust the Border radius to create a rounded or squared border, and select the Box Shadow size.

Desktop Layout

Configure the layout of the Block displayed on a Desktop device. Hide the block, adjust the Text Alignment, customize the padding inside and outside the Block, remove the padding altogether, and adjust the placement of the block.

Mobile Layout

Configure the layout of the Block displayed on a Mobile device by choosing to hide or display the block, adjust the Text Alignment, and customize the padding inside and outside the Block.


Create visual effects by configuring the animations settings for the block. Select the type, direction, delay, and duration of your animation.

Time Reveal

The Time Reveal setting allows you to offset the time before the content in a block is revealed after a visitor enters the page.

Contact support or access our 24/7 Live Chat:

Contact Support Live Chat

Previous Article


Next Article


Need Help? Chat With Us Now!