Pricing Table Element

05/03/2019

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.

Standard

$1999monthly
  • 5 Projects
  • 5 GB Storage
  • Unlimited Users
  • 10 GB Bandwith

Premium

$2999monthly
  • 10 Projects
  • 15 GB Storage
  • Unlimited Users
  • 20 GB Bandwith

Professional

$3999monthly
  • 15 Projects
  • 30 GB Storage
  • Unlimited Users
  • 50 GB Bandwith

Maximum

$4999monthly
  • 30 Projects
  • 100 GB Storage
  • Unlimited Users
  • 150 GB Bandwith

Extreme

$5999monthly
  • Unlimited Projects
  • Unlimited Storage
  • Unlimited Users
  • Unlimited Bandwith
View more examples!

How To Use The Pricing Table Element

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

Step 1 – Create a new page or post, or edit an existing one.

Step 2 - Select the container and column you would like to place the portfolio items into.

Step 3 - Click on the + Element button at the bottom of the column. Select Portfolio.

Step 4 - 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. Be sure to visit the Pricing Table Element Demo page to get a good idea of what's possible with this awesome element.

Step 5 - 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!

Step 6 - Once you have completed styling your Pricing Table Element, click Save. You will be returned to the edit page. You can preview the page to view your content. To get the layout you want might take some further customization, but as always you can always come back into the element for further editing.

Read below for a detailed description of all element options.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Pricing Table Element 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

  • Type - Select the type of pricing table. Choose from Style 1, or Style 2.
  • Background Color - Set pricing table background color. Leave for the default value selected in the Theme Options (Avada > Theme Options > Fusion Builder Elements > Pricing Table Element).
  • Background Hover Color - Set pricing table background hover color.
  • Border Color - Set pricing table border color.
  • Divider Color - Set pricing table divider color.
  • Heading Color - Set pricing table headings color.
  • Heading Color - Set pricing table headings color. There are two of these options. One is for the Style 1 Pricing Table, and the other is for Style 2, but if you have Avada's Option Network Dependency option enabled, you will only see one option.
  • Pricing Text Color - Set pricing table price text color.
  • Body Text Color - Set pricing table body text color.
  • Element Visibility - Allows you to control the column's visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
  • CSS Class - Allows you to add a class for the column.
  • CSS ID - Allows you to add an ID for the column.
View The Options Screen

Table

  • Add / Remove Rows & Columns - Illustrated as A. You can add columns or feature rows to your pricing table here.
  • Column Settings - Illustrated as B. Each column has a title, with options to delete or clone the column.
  • Standout - Illustrated as C. Select if the column should be a Standout column. This lifts the column up and adds a drop shadow to make the column stand out from the others. You can have multiple Standout columns.
  • Head Title - Illustrated as D. This is the title that will show on the top of the column.
  • Currency Symbol - Illustrated as E. Enter your currency symbol, and whether it should be before or after the amount.
  • Price - Illustrated as F. Enter the price for that column.
  • Period - Illustrated as G.Enter the period for the price. Can also be left empty.
  • Delete Row - Illustrated as H. If you hover over a row, you can delete the row using the bin icon at the left.
  • Feature Row - Illustrated as I. Enter a feature of the product here.
  • Add Button - Illustrated as J. Click this to open the Button dialog. You can make your selections and choose Insert to add the button shortcode into the text field below.
  • Text Field - Illustrated as K.Allows you to add any text to the bottom row. Will also accept HTML markup and shortcodes, like a small image.
View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Pricing Table Element

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Portfolio Featured Image Size - Controls if the featured image size is fixed (cropped) or auto (full image ratio) for portfolio elements. IMPORTANT: Fixed works best with a standard 940px site width. Auto works best with larger site widths.
  • Number of Columns - Set the number of columns per row. With Carousel layout, this specifies the maximum amount of columns. IMPORTANT: Masonry layout does not work with 1 column.
  • Column Spacing - Controls the column spacing for portfolio items. In pixels.
  • Number of Portfolio Items Per Page - Controls the number of posts that display per page for portfolio elements. Set to -1 to display all. Set to 0 to use the number of posts from Settings > Reading.
  • Portfolio Text Layout - Controls if the portfolio text content is displayed boxed or unboxed or is completely disabled for portfolio elements.
  • Portfolio Text Display - Choose how to display the post excerpt for portfolio elements.
  • Excerpt Length - Controls the number of words in the excerpts for portfolio elements.
  • Strip HTML from Excerpt - Turn on to strip HTML content from the excerpt for portfolio elements.
  • Portfolio Title Display - Controls what displays with the portfolio post title for portfolio elements.
  • Portfolio Text Alignment - Controls the alignment of the portfolio title, categories and excerpt text when using the Portfolio Text layouts in portfolio elements.
  • Portfolio Text Layout Padding - Controls the padding for the portfolio text layout when using boxed mode in portfolio elements. Enter values including any valid CSS unit, ex: 25px, 25px, 25px, 25px.
  • Pagination Type - Controls the pagination type for portfolio elements. Choose from Pagination, Infinite Scroll, or Load More Button.
  • Load More Posts Button Color - Controls the background color of the load more button for ajax post loading for portfolio elements.
View The Options Screen

Pricing Table Element Parameters

Copy to Clipboard
    • type - Choose from 1, or 2. Sets the pricing table's style.
    • backgroundcolor - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background color.
    • background_color_hover - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the pricing table background hover color.
    • bordercolor - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the pricing table's border color.
    • dividercolor - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the divider color.
    • heading_color_style_1 - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the pricing table's style 1 headings color.
    • heading_color_style_2 - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the pricing table's style 2 headings color.
    • pricing_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the pricing table price text color.
    • body_text_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the pricing table body text color.
    • hide_on_mobile - Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
    • columns - Accepts a numerical value. For example, 3. Sets the number of pricing table columns.
    • title - The custom column title text. For example, Standard Pricing.
    • standout - Choose from yes, or no. Sets the specified column as featured.
    • currency - Accepts symbols.For example, $, or €. Sets the currency.
    • - Choose from left or right. Sets the currency position.
    • price - Accepts a numerical value. For example, 29.99. Sets price.
    • time - The time or duration. For example, monthly, yearly, or daily.
    • custom content - Insert the pricing table's content between the
      Copy to Clipboard

      tags.

    • custom content - Insert the footer's content between the
      Copy to Clipboard

      tags.

    • class - Add a custom class to the wrapping HTML element for further css customization. Learn more here.
    • id - Add a custom id to the wrapping HTML element for further css customization. Learn more here.