Key Features
- Dynamic Pricing Display: Display pricing structures with unique features and variations.
- Customizable Buttons: Use action buttons to redirect users to purchase or learn more about your plans.
- Feature Highlights: Add multiple feature items for each pricing plan.
What’s Needed?
To use the Elementor Price Box Widget, you only need the Elementor free version and Vertex Addons for Elementor.
Install and Activate the Price Box Widget
To activate this widget, please refer to our Widget Activation Guide.
How to Configure the Elementor Price Box Widget in Elementor
In this section, you’ll find a step-by-step guide to setting up the Price Box widget for your Elementor page. From the Content tab, you’ll input the title, price, features, and button settings to shape the content of your pricing box.
Content Tab
- Title:
- Add a title that accurately reflects your plan, product, or service name.
- Price:
- Price: Set the main price for the plan.
- Currency: Choose the currency symbol to display.
- Special Sales: Optionally, add a special sale label.
- Regular Price: Enter the original price if a discount is displayed.
- Features:
- Items: Each item represents a feature of the pricing plan.
- You can add, remove, and reorder features to emphasize the key aspects of each plan.
- Button:
- Button Show: Toggle to display or hide the button.
- Title: Set the button text, such as “Purchase” or “Learn More.”
- Link: Add the destination link for the button to encourage user action.
Final Outcome
This is how the final Price Box widget could appear on your site after configuration.
How to Style the Vertex Price Box Widget
The Style tab provides options to perfect the widget’s appearance, ensuring it blends with the site design and captures user attention.
- Title:
- Alignment: Set the title alignment (left, center, right).
- Background Type: Adjust the background for added emphasis.
- Text Color & Typography: Choose a color and typography for readability.
- Padding & Margin: Fine-tune the spacing for neat, structured presentation.
- Price:
- Text Color & Typography: Customize the price typography and color.
- Regular Price Color: Highlight a discounted regular price.
- Border Radius & Box Shadow: Add depth and shape to the pricing box for better visibility.
- Features:
- Background Type & Text Color: Differentiate features with distinct background and font colors.
- Typography & Alignment: Set fonts and text alignment to organize feature items clearly.
- Padding, Margin & Box Shadow: Adjust spacing and shadows to structure feature items neatly.
- Button:
- Background Type & Text Color: Customize button colors to match your brand.
- Typography, Alignment, and Padding: Adjust alignment and spacing to give the button a visually prominent position.
- Border Radius & Box Shadow: Round edges and add shadows to make the button stand out.
- Box:
- Border Radius & Box Shadow: Apply these to the main widget box to enhance depth and design consistency.
Advanced Tab
The Advanced tab options, standard across Vertex widgets, allow for custom positioning, animations, and additional styling through CSS.