Pricing Table Module
The Pricing Table is a useful module when you want to showcase different pricing options for a product or service on your page.
How to Use the Pricing Table Module
To add a Pricing Table Module to your landing page, click the grey (+). Once the module has been selected a box with options to add your various tiers will appear. Click the plus sign (+) to add a new tier.
Customize the Pricing Table Module
You will be able to customize each option fully as well as customize the entire module to fit your landing page look and feel.
Content Tab
The Content tab allows you to add content to your Pricing Table. It is made of the following elements.;
-
Pricing options: Add you individual offerings here by clicking on the plus sign (+). Once your offerings are added, you can rearrange them by dragging the individual grey box or clicking on the settings wheel of each offering to modify.
-
Elements: Toggle on or off the option to have bullets for your pricing tier.
-
Background Label: Change the background color for the entire module. This color does not apply to the heading which can be set under Design options > Title Text.
-
Admin: This will change the label of the module in the builder for easy identification by you and your team.
Design Tab
The Design tab allows you to design your Pricing Module to fit your brand standards. The Pricing Module design tab is made up of:;
-
Layout: Select options for your featured pricing tier to make it stand out.
-
Bullet: Change the color of your bullets in the offering description or set a separate bullet color for your featured pricing tier.
-
Text: Set the orientation of your text in the description of your pricing tier to right, center, or left.
-
Title Text: Select a background color for your pricing table header, or your featured offering. Additionally change the font, size, and color of your Title Text.
-
Body Text: Set the color, font, weight alignment, and more of the text in the description of your pricing table.
-
Subheader Text: Set the color, font, weight alignment, and more of the subheading text in the header of your pricing table.
-
Currency and Frequency text: Set the font, weight, text size, spacing, and more of your currency ($) and frequency (month, year, etc) in your pricing table.
-
Price Text: Set the font, weight, text size, spacing, and more of your numeric cost in your pricing table.
-
Button: Toggle the option to Use Custom Styles for Button and have a fully customizable button for your pricing table including adding a hover icon, changing the color, and more!
-
Sizing: This is the sizing for your entire price module. If the size goes below 100% on the slider, options for aligning your module left, center, or right will automatically appear.
-
Spacing: Add customized margins or padding here.
-
Border: Set the border radius, style, width, and color of your Pricing Table module.
-
Box Shadow: Add a shadow behind your module.
-
Filters: Define your color saturation, and the contrast of light and dark areas, add a sepia filter, or blur your entire module. Lots of options for filters in this section. Blend Mode allows you to modify how your image blends with any other layers beneath it. Choose normal to return to the default option.
-
Animation: Pick an animation style to enable animations for your image module. Each animation will allow you to customize it further, controlling duration, direction, and intensity.
Advanced Tab
Within the advanced tab, you will find options such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the modules many elements. You can also apply custom CSS classes and IDs to the module.
CSS ID & Classes
Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling or to create links to particular sections of your page. Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space.
Custom CSS
Custom CSS can also be applied to the module and any of the modules internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element.
CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.
Visibility
This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smartphones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.
