In this section we will show you 2 different method to create a Pricing Table:

• Import a sample from the demo, and make additional modifications on that
• Create a Pricing Table from scratch

Import a Pricing Table from the demo page

As you can see on the demo site there are many different Pricing Table. These demo tables are also can be found in your list, installed by default to help you in the beginning. More tables in different packages are available for download in the following link: Get more packages.

In this case download a package, open your backend, and navigate to Components/Go Pricing/Import & Export menu item. The Select Action parameter should be set to Import value. You can drag the previously downloaded or exported file above the green Upload area, or simple just click on the button, then browse for the file.

When you have done with the import you can navigate back to Components/Go Pricing and you will see the newly uploaded table(s). Now you can edit that. The dashboard of the edit page will described in details in the next section.

Create a Pricing Table from scratch

You need to navigate to Components/Go Pricing, and click on the Create new table button. Then you will be redirected to the edit view.

First steps

When you create a new table, you need to add its name and id. After that you will be able to save that. Basically the edit view can be separated into 2 main parts, one for the whole table related settings on the top, and the other below that, with the Column editor view.

Name & ID

As you can read above, here you can specify the name and the id of the Pricing table. You can also add a thumbnail image for that, which will appear in the list view for that. If you leave that empty the Go Pricing will automatically create a thumbnail image after you save it.

Style & Skin

In this section you will find style related settings. Please note, that these settings refers for all columns you made.

First you need to decide which theme would you like to use with the Style parameter. Please note, that if you have any unsaved parameter, and if you change the style, those ones will lost. With the Clean settings, you will have some additional fields.

Enable column borders will draw borders around each pricing column. With Column border radius you can set these borders' curves.

You are also able to Enable row borders and Box-shadow as well.

There is possibility to place tooltips into specified areas of the table. You can set their properties here, such as Width, BG color and Text color.

Layout

With the Column space you can add the distance of the columns in px. Column Min/Max Width will set the min-max sizes of a table.

When you create a column there is a footer part by default. You can hide that with the Hide Footer. You can also Enlarge columns in case of mouseover on the column.

It is also possible to make the Columns, Rows in body and Rows in footer equalize, so they will have the same sizes.

Responsivity

If you enable the Responsivity feature, you will able to set the number of the visible columns on different screen sizes.

Animation

On this tab you can set the basic settings for the table animations. The detailed settings, such as Delay or Easing can be set for each column separately under the Column options/Animation tab. You will find the description about that later.

Animation Presets parameter is a list with the predefined animation presets, which are visible on the demo site. If you select a preset that will load its stored default values into your tables. So for example you have 3 columns, and select the Flag preset, it will load the proper values for the columns to have that animation. Please note, that if you already set the animation settings for the columns, and select a new preset your settings will override. But you are able to save your settings with the Save current as preset parameter. Then it will appear under the Custom presets in the list.

Play only once will means, that the animation won't play again and again, when the viewport reach the table area (when you scroll to the table again).

The Scroll offset(%) parameter means that the animation will play, when the viewport reach the table. The percent value refers for the height of that.

Column Editor

In this section you can create the table(s) with an intuitive editor. We will run through on all options by sections, and describe all the available features.

Column Options

You will find settings here, which refers only for this table, such as styling and animation options.

Style & layout

With the Column Style option you can select the layout of your table. There are many predefined ones, and each has a preview image under the selectbox. You can define the table's Main color under that.

With Disable Hover parameter you can switch off all hover/active state of the table. Disable enlarge will mean that the table won't be enlarge in case of hover. You can also switch this functionality off for all tables in the main config,

Decoration

You need to double-click on the Decoration tab to open its popup window on the right. This will be the workaround in the followings for some settings. You can set shadow for the table, and the different ribbons and tags are also available there.

Animation

This tab is with in connection with the previously mentioned Animation settings in the main options. If you select an animation preset there, their default values will load here. To see the available settings, please use the previously mentioned double-click method, and the popup will open on the right. You will able to set 2 animations there. The first settings refers for the table animation, and with the Counter animation you can enable movement for the price.

Header

Style

With this parameter you can set some style settings for the header, such as BG image and position. With the active left and right buttons you can also step to the next setting panel easily.

Title

Set the title of the whole table. By click on the </>, you can also choose from font awesome icons.

Price

Price related settings will be there, like amount, type and style.

General

General settings are quite important especially the Replace header parameter. By enable this setting the other header-related settings will override by your custom HTML content. With this option you can extend the functionality if you are familiar with HTML.

Body

You can basically paste any content into the body rows of the table. by default you get 3 rows for edit, but you can add more, or even delete which is not used, moreover you can also duplicate an existing one. If you open its editor a simple popup will appear. You can place HTML content or even a button, which is selectable by the Row type parameter.

Footer

Footer is quite similar to the Body part above. Footer won't appear, if you have disabled it in the settings.

Under the table options you will find 3 buttons. With them you can delete, duplicate the table. The third button is for collapse/expand all of the options tab of the table.

So once you have a table, you can duplicate it or even create a new by click on the + button. You can also rearrange the tables with a simple Drag 'n' Drop method.

If you are ready with the work, or just would like to see the tables live, click on the Save button, then on the Preview one. A popup will appear, where your tables will be visible.

• < Prev
• Next >