The Price List widget lets you create catalogs and menus that include pricing. This is a great way to beautifully showcase your products or services and their pricing.
hey youtubers this is Noah from
Elementor again now I’ll be teaching you
about the prices list widget this
practical widget makes listing prices on
your page a much easier job as it
enables you to do so uniquely with only
a few clicks and adjustments so first
I’ll search for the widget and drag it
in and once it’s tracked and you will
see the content tab and the style tab in
the content area you have full control
over the widgets contents now here you
have the list of all the items in the
widget you could duplicate them and
delete them and you could add as many
items as you want by clicking here just
delete them now by clicking on each item
you have its settings so first you have
price where you could insert the price
of the item and you have title and
description where you could insert the
title and description of the item you
have image where you could choose the
image from the media library say I pick
this image see how it’s displayed and
you could insert a link for every item
with the option of opening it in a new
tab by clicking here so that was the
content area of this widget moving over
to the style area of the widget where we
have full control over the list style
image style and item style so in the
list style we have for the title and
price description and separator so for
the title and price we have the color
where you could choose the color of the
title and price okay and we have the
typography where you have the typical
typography options and such as size
[Music]
family wait transform style line hide
and letter-spacing next we have for the
description same thing we have the color
you could choose the color of the
description and it’s typography as well
and then we have the separator where we
could choose the type of the style of
separator from solid dotted – double or
none at all okay and once you choose a
separator if you choose none then you
don’t have the rest of the options but
if we do choose a style we have the
weight where you could choose the weight
of the separator and the color okay and
the spacing where we could choose we
could set the exact spacing from the
title and the prices see how it affects
the spacing all right and moving on to
the image style options here we have the
image size you could set it from
thumbnail all the way to full and
customize so if we set it as full we’ll
leave it at some male for now and you
have border-radius where you could set
the border radius of the edges of the
image so say I want a rounded image
I’ll give it 50 even rounder okay
depends on the image itself and you have
spacing where you could set the exact
spacing between the image and the
contents meaning the title prices and
the description
okay moving on to the item style options
here we have the rogue app where you
could set the exact spacing between each
and every item and we have the vertical
align which is relative to the image so
right now as you can see it’s top so
it’s more to the top of the image if we
set as bottom set to the bottom and
center alright so those were the style
options for the price list widget so now
I’ll just show you a few quick examples
how to set a creative priceless widget
on your page scrolling right down we
have here this section with a rather
standard priceless widget now here each
list item has its image so you can see
here we chose an image for each list
item okay and for the style we just
played around with the colors and
typography and look here as you could
see that separator is set as a solid
style instead of dashed or dotted
scrolling down we have another display
really nice display for the widget now
here it’s in three different columns
each one is a standard priceless widget
but we gave with the style we gave it
different topographies we played around
with the colors and typography is here
and here the separator is dotted and
next we have your section now here each
list item also has an image but look
here under style image style as you
could see we gave it first of all the
image sizes customize and we gave it a
border radius of 50 pixels to make it
completely rounded and here we also have
a border radius we’ll go down to the
image style here the image size is also
customized but we also have here a
border radius of 8 which makes it a bit
rounded on the edges and here too we
have a bit more typography different
types of separators etc now that you
know how to use this widget you could
display prices in a much more creative
and interesting way I hope you enjoyed
this video for more videos and tutorials
subscribe our youtube channel or visit
us at docs.bmc.com
[Music]
