Pricing Section

Pricing Sections

Welcome to the “Pricing Sections” documentation. Looking to integrate pricing section into your website? Our widget empowers you to create captivating pricing displays that can showcase your offerings effectively. In this guide, we'll show you how to use the editor to customize your pricing section widget.

Step 1 : Open The Editor
Step2 : Add And Customize Cards
Step 3 : Configure Settings
Step 4 : Choose Colors
Step 5 : Preview





Step 1: Open the Editor
1. Go to Pricing Section template.
2. Click on "Edit" after choosing your template.




Step 2: add and customize cards
1. In this panel, you can easily add, remove, or edit your cards as needed.




2. Customize each card by uploading an image and selecting its style, either as a cover or inline. You can also add shadow and a border to your card.





3. Edit your card's content colors, including the background, text, button, and theme.




4. Choose your button style, either filled or outlined, and decide whether your card should have a badge. If so, write its label.




5. Finally, insert links for both monthly and yearly pricing, choose whether to open them in a new tab, and decide whether they should be silent or not.






Step 3: Configure settings

In this pricing card settings panel, you have control over various aspects:
You can fine-tune the roundness and width of the cards.





2. Make decisions about whether to display the title, the toggle for month and year, and subtitle.        





3. Additionally, you can choose to align the text center, use custom text, and enable the checkmark icon option.





Step 4: Choose Colors

Within this panel, you can select colors that match your website's design.





Step 5: Preview

Lastly, you can click on “Preview” to see how your pricing section widget looks on both desktop and mobile devices. After this, you can proceed to the next step.





Related Articles:
Comparison Table Popup / Section Shop