1. Home
  2. Docs
  3. Marketing Elements
  4. Price Menu

Price Menu SA Element

Price Menu is a powerful element that allows displaying a list of items, products, services, etc. along with its title, description, price, discounted price, image and so on. It allows creating an attractive Price Menu for your business with easy options. Keep convincing the visitors in the powerful benefits of your services and products using the simple and stylish Price Menu widget for Elementor, made for showcasing the pricing information. Here in this tutorial, you’re going to learn how to use the Price Menu element into Elementor Page Builder. So let’s get straight into it:


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Price Menu Element

 

»Content

 

Price Menu

Adding the Items:

⇒Title: Add the product title here. Click on Dynamic settings to apply the AnalogWP Classes to the title text. (Ex. Add a dark background)

⇒Description: Add a description of your product here. Click on Dynamic settings to apply the AnalogWP Classes to the product description text. (Ex. Add a dark background)

⇒Price: Type the product price along with currency sign if you want. Click on Dynamic settings to apply the AnalogWP Classes to the price text. (Ex. Add a dark background)

⇒Discount: Show/hide discount on the price menu. And the enter the original price to understand the value of the discount on your product.

⇒Show Image: Show/hide the product image on the menu. If you select Show, then upload an image from your system to the menu.

⇒Link: If you want to add a link to your product title, then enter the URL here. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.

⇒Add Item: Use the ‘+Add Item’ button to add more items to the price menu list.

 

⇒Menu Style: Set a menu style from the list to define the style effect for the price menu decoration.

⇒Title Separator: If you want to separate each title from the rest of the product content, then enable Title Separator.

 


»Style

 

Menu Item

⇒Background Color: Choose the background color for the menu items.

⇒Items Spacing: Customize the space between items manually for different dimensions.

⇒Background Color: Choose the background color.

⇒Padding: Set the padding value for the top, right, bottom and left around the price menu items for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the menu item for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the menu items for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Title

⇒Color: Add a custom color to the title text of your product.

⇒Typography: Set the typography options for the titles.

⇒Margin Bottom: Set a margin value for the bottom of the product title for different dimensions.

 

Title Separator

⇒Border Type: Select a border type from the list according to your preference.

⇒Border Height: Set the border height for different dimensions.

⇒Border Weight: Set the border weight for different dimensions.

⇒Border Color: Add a custom color to the border.

⇒Margin Bottom: Set a margin value for the bottom of the product title for different dimensions.

 

Price

⇒Color: Add a custom color to the price text.

⇒Typography: Set the typography options for the price texts.

⇒Original Price:

→Strikethrough: Show/hide a strikethrough within the original price.

→Original Price Color: Add a custom color to the original price. We recommend adding a separate color than the discounted price so that visitors can notice the difference.

→Original Price Typography: Set the typography options for the original price texts.

 

Description

⇒Color: Add a custom color to the description of your product.

⇒Typography: Set the typography options for the descriptions.

⇒Margin Bottom: Set a margin value for the bottom of the product description for different dimensions.

 

Image

⇒Image Size: Customize the fixed size of the image from our pre-defined size type.

⇒Background: Add a custom background color to the product image background.

⇒Width: Customize the image width manually for different dimensions.

⇒Margin: Set the margin value for the top, right, bottom and left around the product image for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the product image for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the image for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the image border.

⇒Border Radius: Set the border-radius around the image for different dimensions.

⇒Vertical Position: Set the image vertical position either top, middle or bottom.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Price Menu Element.


Was this article helpful to you? Yes No

How can we help?