UI Pricing

September 12, 2021 Elementor Widgets
UI Pricing
UI Pricing
  1. Title: Every pricing plan needs a title. Use this field to enter the title. Choose the title that goes along with the plan.
  2. Meta: Write the meta for the title.
  3. Description: Enter the description of the plan.
  4. Price: Use this field to insert the pricing plan price. The addon will automatically arrange the showcasing of this price.
  5. Price symbol: Define the symbol for price currency (ex: $ (Dollar), € (Euro), £ (pound) ...)
  6. Highlight: Indicate important notes to highlight the pricing column that is written on the corner ribbon. (ex: popular, basic, featured, premium ...)
  7. Highlight style: Choose a style for the ribbon from the drop-down list.
  8. Items: Click on the button "Add Item" to create new items for the pricing plan.
  9. Button URL: Button link is the absolute URL of the page that will be linked. Remember the link must contain http:// or https:// in the URL.
  10. Buttom text: Button text is the text that will be displayed on top of the button. It’s quick text on what that button is going to do. Leave it blank if don’t want any button.
Card Settings
Card Settings
  1. Card style: Select the card style from the predefined options or create a custom style
    - For a custom style: you can set the background color and color of the card.
  2. Card size: You can choose between 2 size options (small or large)
  3. Card font: Click on the edit button to configure the card font. 
    - Family: Choose the font for card text.
    - Size: Control the font size of the card text.
    - Weight: The font-weight normally refers to the thickness of any font, the higher the value is the thicker they become.
    - Transform: this option will make the text appear in all-uppercase or all-lowercase, or with each word capitalized.
    - Style: use this option to change all the text to normal or italic style.
    - Decoration: there are 3 different decoration options. You can choose one of the given options to decorate the text.
    - Line-height: Adjust the height between text lines.
    - Letter spacing: Adjust the space between letters.
Title Settings
Title settings
  1. Title tag: Choose a heading element.
  2. Title font: Click to edit the typography of the title font.
  3. Title color: Set the color of the title.
  4. Style: Select a heading style.
  5. Title margin: Set the vertical margin of the title.
Meta settings

Meta settings

  1. Meta font: Set the meta font by clicking on the edit button.
  2. Title color: Choose a color for the meta title. 
  3. Style: Choose one of the meta styles that may differ in font-size, but come with predefined color and font.
  4. Meta margin: Set the vertical margin for the title.
  5. Alignment: Align the meta text above, below or inline with the title.
Description settings

Description Settings

  1. Content font: Click the edit button to configure the typography of the content font.
  2. Description color: Set the color of the description text.
  3. Description margin: Set the vertical margin for description.
Pricing settings

Pricing Settings

  1. Price font: Click on the edit button to configure the typography of the price font.
  2. Price color: Set the color of the price number.
  3. Style: Choose a price style.
  4. Price margin: Set the vertical margin of the price.
Social Settings

Symbol Settings

  1. Symbol font: Click on the edit button to configure the typography of the currency symbol.
  2. Symbol color: Set the color of the symbol color.
  3. Style: Choose a symbol style from the drop-down list. 
  4. Currency margin-top: Set the top margin of the currency symbol.
Button settings

Button settings

  1. Content font: Click on the edit button to configure the typography of the button font.
  2. Button style: Select a style from the drop-down list for the button. There are 8 different button styles. 
  3. Button shape: As the name suggests, this option will allow you to change the shape of the button, currently, there are 4 button shapes.
  4. Full-width button: A full-width button will take the total width of the web page. So, if you want a full-width button set this option to “Yes”.
  5. Button size: Set the size of your button from the drop-down list of sizes. 
  6. Button margin: Set the vertical margin for the button.
Tags: ,