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

Designing for Global Audiences: Internationalization & Localization

Guiding Principles of IA: Structuring Websites for Clarity & Growth

Next-Gen Information Architecture: Psychology, Ethics & Omnichannel

Persona-Driven UX: Turning Research Into User-Centered Design

The Psychology of Trust: Unlocking Credibility in Web Design

List of Categories

Contact Us

Big-agency quality without the big-agency cost — welcome to Flagship Websites

Start Your Website Design Journey with Free AI Wireframes & Mockups!

Your information is 100% confidential. After you submit, our design team will contact you within 24 hours.