Home Shortcodes 17. Compare Table

17. Compare Table

COMPARE TABLE

There are two ways to add Compare Table shortcode
  1. Add Compare Table shortcode in “Classic Mode” editor interface
  2. Add Compare Table shortcode in Visual Composer
HOW TO USE COMPARE TABLE SHORTCODE IN CLASSIC MODE
Step 1: Go to Pages > Add New Page > click icon “Shortcode” shortcode and choose Compare Table
Step 2: Enter values for options in Compare Table shortcode
compare2
Step 3: Shortcode structure is appeared as follows, you need to fill the content
The [comparetable] shortcode has the following variables/options:
  1. [comparetable]
    • class (text) – custom CSS class
    • id (text) – custom ID. If not provided, random ID is generated
    • color (hexa color) – main color of compare table
  2. [c_column]
    • class (text) – custom CSS class. Use “recommended” class to turn this column into special one
    • column (number) – number of columns in this compare table. It should match number of [c-columns] shortcode within [comparetable]
    • color (hexa color) – text color of column
    • bg_color (hexa color) – background color of column
    • title (text) – Title of column
    • price (number) – Price value
    • currency (character) – Currency symbol
    • price_text (text) – additional text after price
    • price_color (hexa color) – color of price text
  3. [c_row]
  • class (text) – custom CSS class
HOW TO USE COMPARE TABLE SHORTCODE WITH VISUAL COMPOSER
Step 1: Go to Pages > Add New Page > Backend Editor
comparetable3
Step 2: Click Add element
comparetable4
Step 3: Click Row shortcode to insert a line
<comparetable5
Step 4: Click the option to choose the number of columns you need to use, for example: the number of columns are 3
comparetable6
Step 5: Click “plus sign” icon, then choose Compare Table shortcode. This is actually a [c_column] shortcode, so each column should have a [c_column] shortcode
 comparetable7
comparetable8

 

Step 6: Enter values for this column
comparetable15
Step 7:Now add rows to the column. Click “plus sign” icon in Compare Table shortcode and choose “Row”
comparetable9
 comparetable10

 

Step 8: Enter values for the Row
comparetable11
Step 9: In order to insert more rows, click “plus sign” icon under of Compare Table shortcode and follow the same steps as step 7,8. It is unlimited to insert more rows
comparetable12
Step 10: In each row, you can add any content or shortcode. For example, to insert Button shortcode, click “plus sign” icon as the image below and choose Button shortcode
comparetable13
Step 11: After adding components for Compare Table shortcode in column 1 is completed, move to column 2 or 3, then follow the above steps
comparetable14