The Price Text design options let you customize the appearance of the Price text displayed in modules such as the Pricing Tables module. These settings control the typography, alignment, spacing, and effects for the Price, helping you maintain a cohesive design.
Where to Find the Price Text Options
Open the Pricing Tables module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Design Tab: Locate the Price Text option group.
Price Text Customization Settings
Feature Pricing Area Background Color: Select a background color for the price text when the Table item is set as Featured.
Featured Price Text Color: Select the Price text color if the item is set as Featured.
Pricing Area Background: Selected the Pricing Area background color if the item is set as Featured.
Price Font: Select a font for the image's Price text from the dropdown or upload a custom font to match your site’s design.
Price Font Weight: Adjust the boldness of the font. Options include light, regular, bold, and more.
Price Font Style: Apply stylistic effects to the image's Price text, such as:
Italicized
Capitalized
Small Capitals
Underlined
Strike-through
Price Text Alignment: Set the alignment for the image's Price text:
Left
Center
Right
Justify
Price Text Color: Choose a color for the image's Price text using your site’s palette or the color picker.
Price Text Size: Adjust the font size using the slider or by entering a numerical value.
Price Letter Spacing: Control the spacing between letters. Increase for a more open look or decrease for tighter text.
Price Line Height: Define the vertical spacing between lines to ensure readability.
Price Text Shadow: Add a shadow effect to the image's Price text. Customize:
Horizontal and Vertical Position: Adjust the shadow’s placement.
Blur Strength: Soften or sharpen the shadow edges.
Shadow Color: Choose a shadow color that complements your design.
Price Fill Type: Choose the image's Price text fill options:
None - No image's Price text fill.
Gradient - Fill the image's Price text with a Gradient
Image - Fill the image's Price text with an Image
Transparent - Fill the image's Price text with a transparent fill.
Price Stroke Width - Choose the image's Price text stroke thickness.
Text Stroke Color - Choose the image's Price text stroke color.
Border Radius: Set the rounded corner for the pricing wrapper element.
Border Styles, Border Width, Border Color, and Border Styles: Choose the border styles for the pricing wrapper element.
Tips for Using Price Text Option Group Option
Ensure Clarity: Use bold fonts and sufficient spacing to make the image's Price text easy to read.
Highlight Interaction: Apply contrasting colors or subtle text shadows to draw attention to the image's Price text.
Stay Consistent: Align the image's Price text style with the rest of your module design, including fonts and colors.
Test Across Devices: Preview on various screen sizes to ensure alignment and readability.