Price List Widget

Table of Contents

Share This Post

🎯 Purpose

Create styled pricing menus, product catalogs, restaurant menus, or service lists with clear titles, descriptions, and prices—all in a single, flexible widget.


🎛️ Content Configuration

  • List Items

    • Use a repeater to add, duplicate, reorder, or remove items.

    • Each item includes:

      1. Title, Price, and Description

      2. HTML Tags for title and description (H1–H6, paragraph, span, div) to improve SEO

      3. Optional Image from the media library

      4. Link with support for nofollow and opening in a new tab


🎨 Style Customization

List Style

  • Control spacing between items

  • Adjust vertical alignment relative to images

Title & Price

  • Set separate colors and typography for titles and prices

Description

  • Customize text color and typographic style to match your design

Separator

  • Choose style (solid, dotted, dashed, double, or none), width, color, and spacing around it

Image Styling

  • Choose image size (preset or custom)

  • Set border radius and spacing between image and content


⚙️ Advanced Settings

Use the Advanced tab to:

  • Offset margins and padding

  • Add motion or entrance animations

  • Assign z-index and responsive visibility

  • Apply custom CSS classes or attributes


✅ Best Practices

  • Use HTML tag control to boost SEO hierarchy

  • Keep images consistent in size and style

  • Use separators to add structure and readability

  • Balance item spacing and alignment for clean layout

  • Utilize responsive settings to maintain design across devices


📌 Ideal Use Cases

  • Food or drink menus with images and prices

  • Service price lists (e.g., spa, salon, packages)

  • Simple product catalogs or listing extras

  • Event or course rate tables


The Price List widget puts dynamic, styled lists of offerings at your fingertips—combining content structure, visual design, and SEO-friendly markup.

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Icons vs. Text in UI/UX: Finding the Sweet Spot in Digital Communication

Typography & Design Systems: Building the Invisible Architecture of Clarity and Trust

The Complete Guide to Choosing the Perfect Color Scheme for Your Website

Words in Motion: Why Animated Typography Rules the Digital Age

The Complete Blueprint to Building a Powerful Brand Identity

Wireframing Unlocked: The Secret Architecture Behind Seamless Digital Products

Our Web Experts are ready — we just need a few more details

Let's Start Today - Super low prices - Get your Custom designed and Feature rich website