How to make a price box using Elementor easily

Price Box is a very useful tool if you are running a website to sell any products. Normally, most eCommerce websites use it to sell packages, products, courses, daily necessaries, etc. People often address it as Tableau des prix in the tech industry. Furthermore, well-structured price tables make price comparison easier for the users and make it easy to decide what to purchase.

In fact, if you can present offers and prices to your customers with a decent price box design, they most likely are willing to pay. With Elementor, you can in fact create neat and stunning pricing tables. As for the widget Tableau des prix, Element Pack has developed it. This widget has awesome features that you can use to create an effective price box easily.

In this blog, we will show you a step-by-step process of creating a price box using Elementor et Element Pack Addon’s Tableau des prix Widget.

Creating a Beautiful Price Box with Elementor

First thing’s first. Though, it’s not worth mentioning, for beginners it may be helpful. Drag and drop the Tableau des prix widget (Element Pack logo attached) into your webpage.

If you don’t have the Element Pack plugin installed, no problem. In that case, you can use Elementors’ price table widget instead. Note that, both of them are available on pro versions.

Customizing Layout

We must mention one thing, the company Element Pack always puts tonnes of customizing options in each of their widgets. As a result, you have a big menu bar for customizing your price box. The Tableau des prix widget will help you to create unique and stylish designs easily.

Let’s move into the main course!

Once you drop the widget, it will pop up Content Tab. This tab holds the base settings for customizing the contents of the box. As you can see, the first section of Mise en page has two options; Skin & Mise en page. Both are set to Par défaut. Keep an eye on the section list of this tab.

In case you choose a different Peau (Partait), the appearance of your price box will also change. Now notice that there is a section ‘Image‘ is missing on the section list. Also, you can see no Mise en page option under Skin. However, the reason is, when you change the Peau option, it will automatically show/hide options related to that layout.

Once again, back to the default settings. The Mise en page option under Peau also has its uses. After all, you can choose from a number of layout styles from here. Each layout style is different and has different sets of options.

Un blog pour vous

Blogs les plus populaires

En savoir plus sur WordPress

Cliquez-moi

Adding Image & Details

After choosing a layout, what we need to do now is add our details. In fact, you can add any image to your price box if you want. Adding service/product-related images will bring more attention to it. In fact, adding images increase the charm of that product.

But, if the landing page already shows all the information about that service, you may not need any image. However, I will show you how to add images anyway.

Aller à Content Tab> Image section

Let’s be precise. To add an image to your price box is not a difficult matter. But what’s difficult, is choosing the right image. Just go to the Image section from the widget customizing panel and choose your image.

After choosing an image, you can also customize a few things about it. From the Onglet Style, se rendre sur le site Image. Here, you can find some options like Background color, Taille, Opacity, Hover Animation, etc.

For the most part, the image size, background color, and opacity options are enough. But, as you can see, Element Pack given out more options like Border, Border Radius, and Box shadow along with other options. However, try for yourself! I guaranty that you will make a great design.

Blog populaire

Comment utiliser le widget Iframe dans Elementor by Element Pack

Price Box Details

Now, let’s move on to the details.

Heading & Sub-heading

A title holds great importance for your content. Therefore, you must put something that grabs the attention of the visitors. For a price box, you need to put direct titles such as product names or service plans’ names. As for its customization, go to Style Tab> Header. There, you can change the color and typography of the title and sub-heading.

Price Tag

Next, let’s talk about the price tag. The Tableau des prix widget has an interesting setting for this part.

Like all the price labels on the market, you can change the pricing from the Tarification section. The fun part is, you can choose any currency label from the Currency Symbol option.

Again, if you click on the Switcher Sale, it will bring up another price field Original Price. Here, you can put the original price of your product with a crossed-out style. Generally speaking, you can use this to show discounted products or offers.

And Lastly, you can customize your price tag from the Style tab> Pricing. As shown above, try to leave the background color separate from the rest. Doing this will highlight the price tag to the viewers.

Features of Your Product/Service on the Price Box

Aller à Content Tab> Features

For starters, the features section holds the key to understand what things your offer includes. Though it’s not a briefly detailed part, it gives a quick view of the contents. Hence, for this part, use direct words and be specific.

Let’s talk about customization. As you can see, this section has a bunch of repeaters. You can add more or remove them also. Each repeater has two option sets, one as Normal Text, the other as Tooltip Text. For the normal text, you have options to choose a logo, logo color, and title. In most cases, you can ignore the tooltip option.

Now, let’s change the outlook of this part. In this case, go to Style Tab> Features. There, you will find the options shown above. We are, in fact, maintaining a single color for the whole price box. Again, the price tag is the only part highlighted.

However, you can change the color, typography, borderline width et weightet gap from this part. Moreover, there is an option to change the alignment of the texts. But, you may want to keep it in the middle of this style.

We are very close to the finishing part. Regardless of what type your price box is, you need to add the footer. Let’s see how to make one.

Le Content Tab of the Price Table widget has a section named Pied de page. Basically, the footer area has a call-out button and an additional text box. From the settings, you can see two switchers named Intégration des téléchargements numériques et Add Custom Attributes. You can use the first one to link EDD to your button. As for the second one, you can learn about it ici.

However, you can change the look of the footer from the Pied de page section in the Onglet Style. In fact, you can make the button round using the Rayon de la bordure option. You can change the background and foreground color of the footer here. Also, you can add a hover effect and a box shadow to the button.

Ribbon

People often use Ribbon on their price box to show features or new offers. It is nothing but a mark that highlights a specific product. Let us show you how you can use it.

Sur le site Content Tab, the last section is Ribbon. There is a switcher at the top of the section. You need to turn it on to make the ribbon appear. However, you can edit the title, change the position of it from Alignment & Horizontal/Verticle Position. Also, you can rotate the ribbon as you like.

Now, to change the outlook of the ribbon, go to Style Tab> Ribbon. Surely as the image above, you can easily design this by changing its color, border-radius, typography, and box shadow.

Have a Look at The Complete Price Box

Congratulations and thanks for keeping patients up to this moment. Look at the stunning price boxes you made with us. With the example above, you can easily create such boxes for your eCommerce websites.

One more thing, you can also add your custom backgrounds to these price boxes. It’s easy to create. It’s attractive. Also, it’s fun. Thanks for reading this blog. Have a great day!

Meilleure solution web

Vous souhaitez dynamiser votre site web avec notre produit ?

Visiter le pack d'éléments

Découvrez notre plugin complet

Produits

Installation

Notations