Elements

Want to display the menu of your restaurant or just a catalog of the products you have, all this can easily be done now using the Price List element in JD Builder Pro.

Like other elements this element has all its content options under the General tab and the styling options under Design Tab.

Firstly we have the main General tab where you can set all the content like item list & categories and the layout of the price list.

In the Categories tab we have the following options, after we enable the category filter where we are only limited to set up 8 different categories:-

• Category Title- Enter the category name.
• Icon- Add an icon related to the category name.

Next we have Items tab where we can set the items of the price list, and each of it has the following options:-

• Title- Enter the name of the item.
• Description- Describe the item in a few words here.
• Price- Enter the price of the item
• Offering Discount- Enable it if the item offers any discount and enter the discounted price if the next field.
• Image- Add an image related to the item.
• Link- Add a link about the item of where you wish to redirect it.
• Category- Select the category to which the item belongs. (only works if category filter is enabled)
• Badge- Add a badge to the item in order to highlight it from the rest.

And then we have the Layout tab where we can set the layout of the price list, that has these options:-

• Number of Columns- Set the number of columns for the layout.
• Image Position- Adjust the position of the image either Left, Right or Top.
• Vertical Alignment- If the image is positioned left or right then adjust the vertical alignment of the content with respect to the image.
• Price Position- Adjust the position of the price with respect to the title.
• Title Price Connector- If the price position is right of the heading then choose the type of connector between the title & price.
• Connector Styling Options- Here you can add width and color to the connector.

• Overall Alignment- Adjust the overall alignment of the item.
• Minimum Height- If the image is positioned Right or Left then you can also set the minimum height of each item box.

Now we have the element’s styling options under the main Design tab.

Again firstly we have the Basic tab where you can style each item box that has the following options:-

• Space between price items- This will adjust the space between each item in a row.
• Space between Image & Content- Adjust the space between image and the rest of the content.
• Background Color- Change/Add the background color of all the items.
• Border Styling options- Add border styling & box shadow on each item.
• Padding- Add extra spacing on each item.

Next we have the all the content styling options under Content tab, where you change style the content of each item:-

• Title Text Color- Change the title’s text color.
• Title Typography & Margin- Adjust the title’s styling from font size to space between the remaining content.
• Description Text colors- Change the description’s text color.
• Description Typography & Margin- Adjust the description’s styling from font size to space between the rest of the content.

• Pricing text color- Change the price & discounted price text colors.
• Pricing Typography & Margin- Adjust the pricing’s styling from font size to space between the remaining content.

Next the options are for image styling under Image tab:-

• Image Size- Choose the size of the image as original or custom. If custom then adjust the width.
• Radius- Add the image’s border radius and margin spacing with others.

Next are the options for styling the filters under Filter tab:-

• Orientation- Choose the filters position in the element, top, left or right. If either Left or Right then adjust the Width in the next step.
• Icon Position- Set the position of the icon(if, any) either top, left or right.
• Icon Size- Set the size of the icons.
• Icon Spacing- Adjust the spacing between icon & filter text.

• Filter Alignment- Adjust the alignment of the filters either Top, bottom or middle with respect to its position.
• Filter Color options- Set the colors on the filters in Normal, Active & Hover states.

• Space between filters- Adjust the spacing between the filters.
• Gap- Adjust the space between filters & item detail text box.
• Filter Border styling options- Style the filters with borders & box shadows.

Next we have the badge styling options under Badge tab, that are:-

• Text & Background Colors- Choose the badge’s text and background colors via the color picker.
• Styling & Spacing options- Style the badge’s text in different font size, style and others. Also add some padding within the box.