In this documentation, we will show you how to customize the Price Table widget presented by Element Pack Pro.

Inserting The Price Button Widget

Inserting the widget by following this,

1. Search by the Price Table  widget name.
2. Then select the appear widget ( with Element Pack Pro logo T.R corner).
3. After Drag and Drop it on the Elmentor Editor page.

Content Tab

The Content tab controller displayed here offers the flexibility to adjust the layout of the widget according to your preferences.

Layout Section

Go to Content > Layout

This section provides control to customize the layout,

1. Skin: Set the skin for price table (e.g.: Default, Pertain, Erect).
2. Layout: Set the layout, here are available (e.g.: One, Two, Three, Four etc).
3. Overflow Hidden: Enable the switcher to hide the overflow.
4. Alignment: Set the alignment for layout.

Image Section

Go to Content > Image

Make the image customize by following,

1. Choose Image: Choose from the media library.
2. Alignment: Set the alignment of the image.
3. Image Resolution: Set resolution for the image.

Header Section

Go to Content > Header

Make the header by following it,

1. Title: Set the title for the header.
2. HTML Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).
3. Subtitle: Set the subtitle for the header.
4. Sticky Heading: Enable the switcher to make it sticky.

Pricing Section

Go to Content > Pricing

Make the price section customizable by following,

1. Currency Symbol: Set the currency symbol for the price.
2. Price: Set the price.
3. Currency Format: Set the format of the currency.
4. Add Custom Attributes: Enable the switcher to add custom attributes.

5. Sale: Enable the switcher to show the sale price.
6. Original Price: Set the original price.
7. Add Custom Attributes: Enable the switcher to show the custom attributes.
8. Period: Set the period for it.

Features Section

Go to Content > Features

Set the feature content by following,

1. Click on the Feature item and it will open a toggle where all the options are available.
2. Text: Set the text for the feature item.
3. Icon: Select the icon from the icon library.
4. Icon Color: Set the color for the icon.
5. Icon Hover Color: Set the Icon Hover color.

6. Text: Set the text for the tooltip.
7. Placement: Set the placement for the

8. ” +Add Item ” : Click on the item to add new item.
9. Featured Hide On: You can hide featured hide for several devices (e.g.: Tablet, Phone).
10. Alignment: Set the content align (e.g.: Left, Center, Right ).

Footer Section

Go to Content > Footer

Make the footer by following it,

1. Button Text: Set the button for the text.
2. Easy Digital Download Integration: Enable it the set the digital integration.
3. Link: Set the link for the button.

4. Add Custom Attributes: Enable the switcher to add custom attributes.
5. Button ID: Set the id for the button.
6. Additional Info: Set the additional info.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects that are visually appealing and cohesive with the overall design of the interface.

Header Section

Go to Style > Header

Make the header section more stylish by following this,

1. Background Type: Set the background for the header section.
2. Color: Set the text color.
3. Padding: Set the padding for the header.
4. Border Radius: Set the border radius.

4. Box Shadow: Set the shadow for the header.
5. Alignment: Set the alignment for the header content.

Normal Sate for the Header

Title

6. Color: Set the color for the title.
7. Text Shadow: Set the shadow for the text.
8. Typography: Set the typography.

Sub Title

9. Color: Set the color for the sub title.
10. Text Shadow: Set the shadow for the text.
11. Typography: Set the typography.
12. Margin: Set the margin for the sub title.

Hover Sate for the Header

13. Title Color: Set the color for the title.
14. Sub Title Color: Set the color for the sub title.

Pricing Section

Go to Style > Footer

Make the price section customizable by following,

1. Alignment: Set the alignment by following.

Normal State for Pricing

2. Background Type: Set the backgroud for the normal state.
3. Color: Set the color for the price.
4. Border Type: Set the type for the border.
5. Border Width: Set width for the border.

6. Border Color: Set the border color.
7. Border Radius: Set the border radius.
8. Padding: Set the padding for the price section.
9. Margin: Set the margin for the price.

10. Text Shadow: Set the text shadow for the price section.
11. Typography: Set the typography for the price.

Currency Symbol

12. Size: Set the size for the currency symbol.
13. Position: Set the position for it.
14. Vertical Position: Set the vertical position.

Fractional Part

15. Size: Set the size for fractional part.
16. Vertical Position: Set the vertical position.

Original Price

17. Color: Set the color for the original price.
18. Typography: Set the typography for it.
19. Vertical Position: Set the vertical position for it.
20. Offset: Set the offset of it.

Period

21. Color: Set the color for the period.
22. Typography: Set the typography for the period.
23. Position: Set the position for it.

Hover State for Pricing

The changes will appear on the hover state,

24. Background Color: Set the background color for pricing.
25. Border Color: Set the border color.
26. Price Color: Set the price color.
27. Period Color: Set the period color.

Features Section

Go to Style > Features

Make the feature section more customizable by following it.

1. Background Type: Set the background for the features.
2. Border Type: Set the border type.
3. Border Radius: Set the border radius.
4. Padding: Set the padding.
5. Margin: Set the margin.

Normal Text

6. Color: Set the color for the normal text.
7. Hover Color: Set the hover color.
8. Typography: Set the typography.
9. Alignment: Set the alignment for the text.

10. Width: Set the width for the normal text.
11. List Padding: Set the list padding.
12. Striped: Enable it to show the striped.
13. Divider: Enable the switcher to show the divider.

14. Style: Set the style for it.
15. Color: Set the color for the normal text.
16. Hover Color: Set the hover color for it.
17. Weight: Set the weight for the normal text.

18. Width: Set the width for the divider.
19. Gap: Set the gap between the features.

Tooltip Text

20. Width: Set the width for the tooltip.
21. Typography: Set the typography for it.
22. Text Color: Set the text color.
23. Text Alignment: Set the text alignment.

24. Background Type: Set the background for the tooltip.
25. Arrow Color: Set the arrrow color.
26. Padding: Set the padding.
27. Border Type: Set the border type.

27. Border Radius: Set the border radius.
28. Box Shadow: Set the box shadow.

Footer Section

Go to Style > Footer

Make the footer section stylish by following,

1. Background Type: Set the background type.
2. Padding: Set the padding.
3. Border Radius: Set the border radius.

Button

4. Size: Set the size for the button.

Normal Sate for Footer

5. Text Color: Set the text for the button
6. Background Type: Set the background type for the button
7. Border Type: Set the border type.
8. Border Width: Set the width for the border.

9. Border Color: Set the color for the border.
10. Border Radius: Set the border radius.
11. Margin: Set the margin for it.
12. Padding: Se the padding.

13. Vertical offset: Set the vertical offset.
14. Box Shadow: Set the shadow for the box
15. Typography: Se the typography for it.

Additional Info

16. Color: Set the for the additional info.
17. Hover Color: Set the hover color.
18. Typography: Set the typography.
19. Margin: Set the margin for it.

Hover Sate for Footer

20. Text Color: Set the text folor
21. Background Type: Set the background type.
22. Border Color: Set border color.
23. Animation: Set the animation for the button.

Video Assist

You can watch the video above to learn about the Pricing Table widget.
Please visit the demo page for examples.

Thanks for staying with us.