- Home
- Docs
- Saasland Documentation
- Saasland Elements
- Pricing Table Tabs
Pricing Table Tabs
Estimated reading : 3 minute
Pricing with Tabs will allow you to show pricing tables with different options.
Using Pricing Table Tabs
Pricing Table Tabs gives you the option to edit the Content, Style and Advanced options.
Contents:
You can select the contents of different tabs from here. You can add items and list down the details too. Using the element, you can input all sorts of required information in the pricing tab. You can include title, title tag, icon type, icon, icon color, background of icon to customize the pricing table.
Along with that you can add price, duration, item lists, button label and button URL to completely design your pricing tables.
To write an item list, write with <b> after each item so that it appears in a proper structure. For example,
Product Recommendations <b>
Abandoned Cart <b>
Style:
From the Style section, you can customize the following options. You can change color, background and typography of the options mentioned below:
- Tab Background Color
- Ribbon Background
- Item Title
- Item Subtitle
- Button Style
- Border
Lastly, the Style Section will give you the option to add padding to the element for design purposes.
Advanced
In the Advanced section of the tool, you will have the flexibility to add margin and padding to the element. You can also modify the Z-index to customize the element more.
You will also get the chance to edit and customize the following options:
- Motion Effects
- Background
- Border
- Positioning
- Responsive
- Attributes
- Custom CSS
Motion Effects:
From the Motion Effects option you can add different effects such as fading, zooming, bouncing, sliding, rotating, attention seeking motion, lightspeed and more effects to make your website look different.
Background:
If you want to customize the background with specific color, gradient or images, you can do that from the advanced settings as well. You can pick background type, color, gradient, gradient type and more.
Border:
If you want to add any line, box, dots and other design variations as borders of the element, you can do it from here. You can also customize the size and insert shadow effects if you want to.
Positioning:
This feature will allow you to fix the positioning of the element. From the width section you can select if the position will be full width, inline or customized. And you can set the position as absolute or fixed as well from these settings.
Responsive:
You can check the responsiveness of the elements if you toggle through the available options. However the change of the widget will be only visible on the live page or preview, not in the Elementor.