Comparison Table

Comparison Table

Welcome to the “Comparison Table” documentation. Looking to integrate comparison table into your website? Our widget allows you to create beautifully designed and informative tables to aid your users in making well-informed decisions. In this guide, we'll show you how to use the editor to customize your Comparison Table 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 Compariosn Table  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 the rows and cols as needed.




2. Customize each row by selecting its type, whether it's normal or a section, and choose its colors if desired.
For columns, you can decide whether it should be treated as a feature and select its color.





3. Easily rearrange rows and columns by using the drag icons.
Click the edit icon to customize the content of each cell.





4. You have the flexibility to choose your cell type, whether it's text, an image, a checkmark, a button, or simply leave it empty.





5. For each cell, you can make it transparent or apply a color. You also have the option to add borders in any direction and choose the alignment of the content.




6. Afterward, you can edit each type as follows: For text, simply type your desired text and adjust its color.
  •  For text, simply type your desired text and adjust its color.





  •  For images, upload the image you want.





  •  For buttons, select their style, write the label, and insert a link. You also have the option to add an icon and specify its position, choose button and label colors, and activate the "open in a new tab" option.






    • Step 3: Configure settings

    In this comparison table settings panel, you have control over various aspects:
    1. First, you have the option to display or hide the title.





    2.  Next, you can fine-tune the table's roundness, border, padding, and its text alignment.  





    3. When it comes to the buttons, you can choose their roundness and text size.





    4. Additionally, you have the option to choose the checkmark icons for "yes" and "no" and customize their colors and size.





    5. Finally, you can adjust the width of the images.





    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 Comparison Table widget looks on both desktop and mobile devices. After this, you can proceed to the next step.




    Related Articles:
    Pricing Section Popup / Section Shop