Pricing Table

AI Pricing table add-on allows you to create and display visually appealing pricing tables on your website, making it easy to showcase different pricing options, plans, features, and benefits to your audience. It helps users compare and select the most suitable pricing option, improving their decision-making process and potentially boosting conversions for your business.

How to set up the AI Pricing Table:

Step 1: Search and find Pricing Table in the search box under the Elements Tab. After that, easily drag and drop the widget wherever you want inside the Elementor section.

Step 2: This is how the element will look after inserting the AI Day Counter addon.

How to set up content for AI Pricing Table?

Under the content tab, you will be able to configure the AI Pricing Table section.

Pricing TableChoose the Table layout option from the dropdown menu, then align it. To organise the table’s elements in a specific order, such as what should come first and second, just drag and drop them. Alternatively, you can deactivate a specific icon in a section by moving it from the Visible area to the Disable section.

FeaturesDecide whether the icon should appear before or after the text and use +Add Items to add as many features as you want to list in the table. Select the Item Name, add the Text, then add the Icon by choosing the Icon Library, then set the Hyperlink to the Text.

PriceEnter the Price value along with any necessary text before and after it.

TitleChoose the title for the pricing table and, according to your preferences, change the tags and transform the text into capitalization, lowercase, or uppercase.

Icon: Select the suitable Icon from the Icon Library or upload SVG Image and set its view in the dropdown.

Image: Select the image from Media Library or from the URL additionally you can alter the image size. 

 Content: Enter the eye-catching Content here.

Ribbon: Turn on the toggle to add a ribbon to the Table.

Button: From the drop-down menu, choose the button type. Add the URL and the text that needs to appear within the button for the user to be redirected to the checkout page. In addition, align it, if necessary, add an icon, and modify its spacing.

How to add Styles to the Pricing Table?

General SectionIn the General Section, set Counter Box Padding, Margin, and Border Radius. Additionally, you can set the Font color, Background color, Box shadow, and Typography for each Font individually in the Normal and Hover Modes.

PriceSet the margin, padding, background colour, and price colour. Additionally, you can customize the Typography for the Before, Price, and After Price fields separately.

RibbonHere, you may change the Ribbon’s colour and background colour as well as its position in the dropdown menu.

Additionally, you can also add styling to Feature, Title, Icon, Image, Button, Content by changing the color, typography & many more as per your preference.

Powered by BetterDocs

Enjoy the free pro experience. Help us by sharing our plugin. It will help us add more features in the future. 

Resources
Scroll to Top