Mostly, the Price Table widget with a lot of features is really cool widget. But, nothing is trouble-free. Therefore, the documentation below will take you able to work without any hassle and quickly.
So, let’s dig in.
To Insert Widget
Inserting the widget is just a matter of dragging and dropping. As you see in the screenshot above, drag the Price Table widget inside your page.
Using the content tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.
Now, I’m going to show the sections of the Content Tab and how they work behind the price table widget by Element Pack.
Firstly, come to the Layout section. you find the control Skin and the control will allow you to select Partait skin with default one. Look at the photo beneath.
If you select the skin Erect, you will find the price table in the horizontal layout. See the example below.
But, in connection with the default skin, you will come up with the control of the Layout that includes a few options such as Header in at Middle.
In the same way, you can go for the rest of the options. Notice the image below.
Secondly, come to the Image section. From here, you’ll be able to add an Image with the table. One more thing, you can adjust the image alignment of the ELementor Price table.
Thirdly, in the Header section, you’ll be able to write for the Title and Subtitle as well as to define HTML Tag.
Go to the Content tab > Header.
Fourthly, this section will let you select the symbol of currency from the Currency Symbol control. When you are giving price value in the Price field, look at the Scale switcher button.
The switcher button will allow you to set the original price. Moreover, you can set a period of services like daily, weekly, etc. from the Period control.
Simply, go to the Content tab >Pricing.
Fifthly, in this section, you’ll come up with a list of repeaters. Remind that all the repeaters are editable, fit for copy, and delete.
In addition, it is possible to add more items to the list with the support of +ADD ITEM on the Price Table widget.
Here, every single repeater will allow you to add Text, Icon and Icon Color.
Oh! The most important thing is Tooltip Text that will let you name and set the placement (Top, Bottom, Left, and Right). Observe the image above.
In the sixth place, come to the Footer section, Simply add text in the Button Text field and URL in the Link field.
Moreover, you can use switcher buttons as your design and for adding extra information, you can go for Additional Info.
Lastly, go to the Content tab > Ribbon and select all the things following the screenshot above.
Now, let’s work with the Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design the Price Table widget by Element Pack.
Styling with the tab in Elementor will always give you a fantastic experience.
Let’s have a look.
To begin with, go to the Style tab > Image > and use the controls.
The most important thing is you will be able to add Hover Animation (such as, Pulse, Grow, etc.) and Opacity with Size and Background color.
Besides adding Background color, you can add Title and Sub Title easily. Just, keep your eyes on the images included.
Notice, this section includes a few things i.e. Currency Symbol, Fractional Part, Original Price, and Period. All these things are possible to style for the Elementor price table.
Simply, go to the Style tab > Pricing.
Here, under two modes, you’ll be able to decorate the Features.
Just, go to the Style tab > Features > Normal Text.
Just, go to the Style tab > Features > Tooltip Text.
Besides adding Background color, you can easily give style to the button under the modes i.e. Normal and Hover. Just, keep you eyes on the images included.
Just, go to the Style tab > Footer> Button > Normal.
Go to the Style tab > Footer> Button > Hover.
See the screenshot above and go to the Style tab > Ribbon.
In conclusion, hopefully, you’ve noticed what is Pricing Table widget and how it works for you. Watch the video inserted above. If you want to discover what more is possible to do using this one, you can visit the demo page.