Pricing Table Element

Last Update: March 11, 2024

The Pricing Table Element affords you a graphic way of showcasing your services, prices and overall offerings. With the Pricing Table Element, two different design styles can be selected, along with various column widths. You can make a column standout for added visibility, change the type of currency and the currency position, change the length of payment time, such as monthly or weekly, and even and add buttons to the footer section. These many options allow you to create beautiful, customized pricing tables throughout your site with ease. Read on to find out more about this professional Element, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Pricing Table Element

The Pricing Table Element allows you to easily show pricing tables on your website.

To start, add the element into your desired column. The Pricing Table Element has two preset styles, and this is the first option to choose. But that’s just the start. There are many extra styling options to allow you to control background, background hover, border, heading and divider colors, as well as the pricing and body text colors.

After the styling options, come the table options. The Table tab gives you a visual idea of how your table is laid out, and you can add columns and rows and edit the content right here. One important option on this tab is the Standout option. This adds lift up and drop shadow styling to the selected column to make it stand out more. You can even add Call to Action buttons at the bottom. Clicking on Add Button will call the button Element, where you can style a button before being taken back to complete the Pricing Table Element. Try it out!

Read below for a detailed description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element in your Global Options > Avada Builder Elements > Pricing Table section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

Table Options

 

HeadingDescription
TypeSelect the type of pricing table.
Background ColorSet pricing table background color.
Background Hover ColorSet pricing table background hover color.
Border ColorSet pricing table border color.
Divider ColorSet pricing table divider color.
Heading ColorSet pricing table headings color.
Pricing Text ColorSet pricing table price text color.
Body Text ColorSet pricing table body text color
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Table Item Options

HeadingDescription
Column TitleThe title for the pricing column.
StandoutChoose to apply standout styling to the pricing column..
Currency SymbolSet the curreny symbol if desired.
Currency PositionChoose to flip the icon.
PriceSet the price.
Time PeriodSet the period for the price.
Featured RowsOrganize and add content to the pricing table.
Footer ContentEnter some content for column footer.

In this article