How To Use & Customize Pricing Image Box Widget

Pricing Image Box Widget allows you to add a visual box that combines images and text in a beautiful way. Use this widget to create the most attractive feature section, or use it to promote your products.

Follow the step-by-step instructions:

1. Go to Menu Romethemekit Pro.

2. And you will be able to see the Pricing Image Box Widget.

3. Click Add New Container.

4. Select your layout : Flexbox or Grid.

5. On the canvas select your structure.

6. Drag the widget from the Elementor 

7. Drop it on the selected area.

8. Setting your header title content here, you can enable or disable the Sale Price.

• You can select image or icon will show in your pricing box.
• If you want to use image, enable image like picture below.
• If you want to use icon, disable image, click Icon library → Choose Icon → Click Insert.

9. Add or Edit the description here.

• Click Add Item.
• Enable divider if you want to use divider.
• Click Show Icon to add icon in description.

10. Setting Button :

• Click Show to add icon.
• Click Icon Library → Choose Icon → Click Insert.
• Setting Icon Position & Button Text.

11. Setting Ribbon :

• Click Yes to enable ribbon.
• Setting Icon Position & Ribbon Text.

12. Setting Footer :

• Edit the footer text or delete the text if you don’t want to show the footer.

13. Container Style (used to customize the container style) :

• Click Style → Container.
• You can enable Container Hover.
• Customize the border type, border color, padding, border radius, and background color.

14. Image Style (used to customize the image style) :

• Click Style → Image.
• Customize the padding and radius image here.

15. Header Title Style (used to customize the header title style) :

• Click Style → Header Title.
• Customize the typography, alignment, padding, spacing, text and background color heading, subheading and header & price.

16. Normal Price Style (used to customize the normal price style) :

• Click Style → Normal Price.
• Customize the typography, alignment, text color and spacing.

17. Price Style (used to customize the price style) :

• Click Style → Price.
• Customize the position, typography, text color price and promotion tag, spacing, alignment, and position.

18. Feature Style (used to customize the feature or description style) :

• Click Style → Feature.
• Customize the feature style.
• Customize the divider style as you wish here.

19. Button Style (used to customize the button style) :

• Click Style → Button.
• Customize the typography, padding, margin, alignment, size, icon spacing, text, button and icon color.

20. Ribbon Style (used to customize the ribbon style) :

• Click Style → Ribbon.
• Customize the typography, distance, border type, text and background color.

21. Footer Style (used to customize the footer style) :

• Click Style → Footer.
• Customize the typography, alignment, padding, text and background color.

22. Don’t forget to click Publish to save the changes.