الوجبات السريعة الرئيسية
- يُظهر التصميم الجيد لجدول التسعير ثلاث أو أربع خطط جنبًا إلى جنب، مع رفع خطة واحدة بصريًا فوق الباقي بحيث يكون لدى القارئ افتراضيًا للاختيار.
- يتحول جدول التسعير بشكل أفضل عندما تتبع كل بطاقة نفس الترتيب: اسم الخطة، ومن هي، والسعر، وفترة الفاتورة، وقائمة ميزات قصيرة وزر واحد.
- يجب أن تتكون صفوف الميزات من ثلاث إلى ست كلمات لكل منها؛ الصف الذي يلتف إلى السطر الثاني يبطئ القراءة ويجعل البطاقات غير متساوية.
- يمنح السعر الأصلي المشطوب بجوار سعر البيع للقارئ مرساة، وتحتوي أداة جدول تسعير الإضافات الرئيسية على مفتاح بيع لذلك بالضبط.
- يحتاج التبديل الشهري والسنوي إلى مجموعتين من البطاقات؛ في الإضافات الرئيسية، تقوم أداة تبديل المحتوى (Pro) بالتبديل بين قالبين للقسم المحفوظ.
- على الهاتف، يتم تجميع بطاقات التسعير في عمود واحد، لذلك يجب أن تكون الخطة المميزة في المرتبة الأولى أو الثانية، وليس الثالثة.
يقرر تصميم جدول التسعير ما إذا كان الزائر الذي يريد منتجك بالفعل يمكنه العثور على الخطة الصحيحة في بضع ثوانٍ. التخطيط بسيط: صف من البطاقات، سعر واحد لكل منها، زر واحد لكل منها. القرارات المهمة أصغر من ذلك: كم عدد الخطط، وأي منها يتم رفعها، وكيف يبدو السعر، ومدة تشغيل كل صف من الميزات، وما يقوله الزر.
يتناول هذا المنشور عشر نصائح لتصميم جدول التسعير، كل منها موضح على طاولة حقيقية تم إنشاؤها باستخدام أداة جدول التسعير من Master Addons for Elementor. تستخدم الأمثلة خططًا جاهزة (مبتدئ، نمو، وكالة) حتى تتمكن من نسخ الهيكل دون نسخ الأسعار. عندما تحتاج النصيحة إلى عنصر واجهة مستخدم ثانٍ، مثل التبديل الشهري والسنوي، فإن المنشور يوضح أي عنصر وما إذا كان موجودًا في الخطة الاحترافية.
جدول المحتويات
1. عرض ثلاث خطط، أربع منها على الأكثر
ثلاث خطط هي تصميم جدول التسعير الذي يمكن لمعظم القراء مقارنته في لمحة واحدة. هناك خطتان تفرضان اتخاذ قرار بنعم أو لا. خمس خطط أو أكثر تحول الجدول إلى جدول بيانات، ويبدأ القارئ في التمرير بشكل جانبي على جهاز كمبيوتر محمول والتخلي عن الهاتف.
ضع الخطة التي تريد أن يشتريها معظم الأشخاص في المنتصف. يقرأ الأشخاص صفًا من اليسار إلى اليمين، لكنهم يستقرون في المنتصف، وهو أيضًا المكان الذي تهبط فيه العين أولاً على الهاتف عندما تتكدس البطاقات. إذا قمت ببيع خطة وكالة أو مؤسسة بأسعار مخصصة، فاحتفظ بها كبطاقة رابعة باستخدام زر “اتصل بنا” بدلاً من جدول منفصل.
في Elementor، كل بطاقة عبارة عن عنصر واجهة مستخدم واحد لجدول التسعير يتم إسقاطه في العمود أو الحاوية الخاصة بها. ثلاث عناصر واجهة مستخدم في حاوية مكونة من ثلاثة أعمدة، كل مجموعة على نفس التخطيط، تعطيك الجدول أعلاه. ال صفحة عناصر واجهة المستخدم لجدول التسعير لديه قائمة التحكم الكاملة وخمسة تخطيطات حية.
2. ارفع خطة واحدة فوق الباقي
تمنح الخطة المميزة القارئ افتراضيًا، وسيأخذها معظم الناس. يقوم التمييز بثلاثة أشياء في وقت واحد: البطاقة أطول قليلاً أو مرفوعة، ويستخدم الزر لون التمييز بدلاً من نمط المخطط التفصيلي، ويذكر الشريط السبب (“Most Popular”، “Best value”، “Recommended”).
قم بتمييز بطاقة واحدة بالضبط. بطاقتان مميزتان تلغيان بعضهما البعض. اختر الخطة بأفضل هامش لك لا يزال يناسب معظم القراء، وليس الأغلى.
في أداة جدول التسعير، قم بالتشغيل تسليط الضوء على الجدول في علامة التبويب المحتوى، افتح شريط قسم لتعيين النص والمحاذاة والموضع والتدوير. امنح البطاقة المميزة لون زر مختلفًا في علامة التبويب "النمط" حتى لا تعتمد على الشريط وحده.
3. اجعل السعر أكبر شيء على البطاقة
يجب أن يكون السعر أكبر نص على البطاقة، أكبر من اسم الخطة. يقوم القراء بمسح جدول التسعير بحثًا عن الأرقام أولاً وقراءة أسماء الخطة ثانيًا، وبالتالي فإن التصميم الذي يجعل الاسم أكبر من السعر يبطئهم.
احتفظ برمز العملة وفترة الفاتورة أصغر من الرقم. “$49” يقرأ بشكل أسرع من “49.00 دولارًا أمريكيًا شهريًا”. إذا قمت بخصم خطة، فأظهر السعر الأصلي مشطوبًا بجوار سعر البيع. الرقم المشطوب هو مرساة: 49 يبدو أرخص عندما يجلس 69 بجواره مما هو عليه بمفرده.
القطعة لديها يبيع التبديل تحت التسعير. قم بتشغيله، املأ السعر الأصلي، ويظهر الشطب تلقائيًا. اختر العملة من القائمة أو اكتب الرمز الخاص بك.
4. قم بتسمية الخطة باسم المشتري، وليس الطبقة
تعمل أسماء الخطط بشكل أفضل عندما تخبر القارئ عن الغرض من الخطة. يقول “Starter، Growth، Agency” أكثر من “Basic، Standard، Premium”، وعنوان فرعي من سطر واحد تحت كل اسم (“For موقع واحد”، “For فرق صغيرة”، و“For cil Work”) يزيل التخمين.
تجنب الأسماء التي تحتاج إلى قائمة الميزات لتكون منطقية. إذا كان على القارئ مقارنة الصفوف لتحديد الخطة التي هي “Standard”، فقد فشل الاسم. تجنب النكات والأسماء الرمزية الداخلية لنفس السبب.
تحتوي أداة جدول التسعير على عنوان و أ الترجمة الحقل الموجود في قسم الرأس، بالإضافة إلى أيقونة وعلامة اختيارية. العنوان الفرعي هو المكان المناسب لـ “For Small Teams”.
5. إبقاء صفوف الميزات قصيرة وبنفس الترتيب
يجب أن يتناسب كل صف مميز مع سطر واحد، من ثلاث إلى ست كلمات. تلتف الصفوف الطويلة، وتصبح البطاقات غير متساوية، ويتوقف القارئ عن المقارنة عبر الخطط لأن الصفوف لم تعد تصطف.
قم بترتيب الصفوف بنفس الطريقة في كل بطاقة، مع الصفوف التي تتغير بين الخطط في الأعلى (موقع“1” vs “5 Sites” vs “Unlimited Sites”). خمسة إلى سبعة صفوف لكل بطاقة يكفي. إذا كان لديك عشرين ميزة، فإن جدول التسعير هو المكان الخطأ بالنسبة لها: ضع الخمسة الأوائل هنا واربطها بجدول المقارنة للباقي.
القطعة سمات يأخذ المكرر نصًا وأيقونة وتلميح أداة اختياريًا لكل صف. استخدم نفس الرمز لكل ميزة مضمنة وأيقونة مختلفة (أو لا شيء) للميزات التي لا تتضمنها الخطة، وبالتالي فإن النمط المرئي يتطابق عبر البطاقات.
6. ضع التفاصيل في تلميح الأداة، وليس في الصف
يتيح لك تلميح الأداة إبقاء الصف قصيرًا مع الاستمرار في الإجابة على السؤال “ماذا يتضمن ذلك؟”. الصف يقول “All widgets”؛ يقول تلميح الأداة “كل عنصر واجهة مستخدم وامتداد”.
استخدم تلميحات الأدوات للصفين أو الثلاثة التي تولد أسئلة الدعم، وليس لكل صف. تبدو البطاقة التي تحتوي كل ميزة فيها على تسطير منقط وكأنها تخفي شيئًا ما. احتفظ بنص تلميح الأداة في جملة واحدة.
في أداة جدول التسعير، يحتوي كل صف في مكرر الميزات على تلميح الأدوات التبديل وحقل النص وخيار الموضع (أعلى، أسفل، يسار، يمين).
7. زر واحد لكل بطاقة وعليه فعل
الزر هو العنصر الوحيد في البطاقة الذي يفعل أي شيء، لذا أعطه مهمة واحدة وقم بتسميته بفعل. “Get barted”، “Start free Trial”، “Choose Growth” كلها تعمل. “Submit” و“Click here” لا تفعل ذلك.
أسفل الزر، يزيل سطر ثقة قصير الاعتراض الأخير: “إلغاء أي وقت”، “14 يومًا لاسترداد الأموال، “لا حاجة إلى بطاقة”. احتفظ بها إلى خمس كلمات ولا تقم بتكديس ثلاث منها.
القطعة تذييل يحتوي القسم على نص الزر والرابط و معلومات إضافية حقل لخط الثقة. إذا كنت تبيع باستخدام التنزيلات الرقمية السهلة، فإن نفس القسم يحتوي على زر شراء EDD الذي يرتبط مباشرة بالمنتج. بالنسبة لمنتج WooCommerce، قم بربط الزر بالمنتج أو صفحة الدفع.
8. أضف تبديلًا شهريًا وسنويًا فقط عندما يكون التوفير يستحق العرض
يكون التبديل الشهري والسنوي منطقيًا عندما توفر الفواتير السنوية للقارئ مبلغًا واضحًا، عادةً شهرين أو أكثر. إذا كان الخصم السنوي صغيرًا، فإن التبديل يضيف خطوة دون تغيير القرار، ويقوم خط نقل سنوي واحد بفواتير “ بنفس المهمة.
أظهر السعر السنوي شهريًا (“$39/شهر، يتم إصدار فاتورة سنويًا بـ”) بدلاً من الإجمالي السنوي الكامل، لذا تتم مقارنة حالتي التبديل مثلًا بالمثل. ضع التوفير بجوار التبديل (“Save 20%”) حتى يعرف القارئ سبب وجود المفتاح قبل النقر عليه.
تحتوي أداة جدول التسعير على سعر واحد لكل بطاقة، وبالتالي يأتي التبديل من أداة ثانية. قم ببناء مجموعة واحدة من البطاقات بأسعار شهرية وواحدة بأسعار سنوية، واحفظ كل منها كقالب قسم، ثم ضع كليهما في تبديل عنصر واجهة المستخدم للمحتوى، الموجود في خطة Master Addons Pro. تحتوي صفحة تبديل المحتوى على خطوات الإعداد ومثال مباشر.
9. اختر تخطيطًا يطابق الصفحة، ثم احتفظ به
يجب أن يتطابق تخطيط جدول التسعير مع القسم المحيط به: بطاقة عادية على صفحة SaaS نظيفة، ورأس مستدير على علامة تجارية أكثر ليونة، وصورة خلفية عندما تستخدم بقية الصفحة التصوير الفوتوغرافي. اختر واحدة واستخدمها لكل بطاقة في الجدول.
يعد خلط التخطيطات داخل جدول واحد خطأً شائعًا. يقرأ القارئ الفرق في الشكل باعتباره اختلافًا في الخطط. احتفظ بالألوان محدودة أيضًا: لون مميز واحد للبطاقة المميزة، ولون محايد للباقي.
تحتوي أداة جدول التسعير على خمسة تخطيطات في تخطيط dropdown (افتراضي، محتوى المحاذاة اليسرى، الجدول المستدير، الجدول الذي يحتوي على صورة BG ونمط انحراف BG)، ويظل المحتوى في مكانه عند التبديل بينهما. ال مكتبة القوالب يحتوي على أقسام تسعير مبنية على هذه التخطيطات إذا كنت تفضل البدء من التصميم النهائي.
10. تحقق من الجدول الموجود على الهاتف قبل النشر
على الهاتف، يتم تكديس البطاقات في عمود واحد، بحيث يرى القارئ خطة واحدة في كل مرة ويتجاوز الخطط الأخرى. وهذا يغير قرارين: أي بطاقة تأتي أولاً، ومدى طول كل بطاقة.
ضع الخطة المميزة أولاً أو ثانيًا على الهاتف المحمول. إذا كان يحتل المركز الثالث على سطح المكتب، فاستخدم ترتيب Elementor سريع الاستجابة على الحاوية لتحريكه لأعلى. احتفظ بقوائم الميزات في خمسة صفوف بحيث تتناسب البطاقة مع شاشة واحدة تقريبًا، واجعل الزر عريضًا بما يكفي للنقر عليه.
افتح وضع الاستجابة لـ Elementor (رمز الهاتف الموجود أسفل اللوحة) وتحقق من الجدول عند نقطة توقف الهاتف المحمول. تحتوي عناصر التحكم في علامة التبويب "النمط" الخاصة بعنصر واجهة المستخدم في جدول التسعير على مفاتيح سريعة الاستجابة، حتى تتمكن من تقليص خط السعر والحشوة على الهواتف دون تغيير إصدار سطح المكتب.
هل تريد جميع النصائح العشرة في عنصر واجهة مستخدم واحد؟ ال القطعة جدول التسعير يحتوي على مفتاح التمييز والشريط وسعر البيع وتلميحات أدوات الميزات وخمسة تخطيطات كعناصر تحكم في اللوحة، لذا فإن كل طرف أعلاه عبارة عن إعداد وليس CSS مخصصًا.
الأسئلة المتداولة
كم عدد الخطط التي يجب أن يتضمنها جدول التسعير؟
ثلاثة هو الرقم الأكثر أمانًا، وأربعة تعمل عندما يكون لخطة واحدة أسعار مخصصة. تفرض خطتان خيار نعم أو لا، وتتوقف خمس خطط أو أكثر عن التركيب جنبًا إلى جنب على شاشة الكمبيوتر المحمول وتتحول إلى لفافة طويلة على الهاتف.
ما هي الخطة التي ينبغي تسليط الضوء عليها في جدول التسعير؟
قم بتمييز الخطة التي تناسب معظم القراء ولا تزال تتمتع بهامش جيد بالنسبة لك، عادةً ما يكون الهامش الأوسط. ارفعه بظل وزر ثابت وشريط مثل “Mostopular”. تسليط الضوء على بطاقة واحدة فقط؛ بطاقتان مميزتان تلغيان بعضهما البعض.
كيف يمكنني إضافة تبديل شهري وسنوي إلى جدول تسعير Elementor؟
قم ببناء مجموعتين من بطاقات التسعير، واحدة بأسعار شهرية والأخرى بأسعار سنوية، واحفظ كل منهما كقالب قسم. تعرض أداة تبديل المحتوى في Master Addons Pro قالبًا واحدًا في كل مرة خلف المفتاح. تحمل أداة جدول التسعير نفسها سعرًا واحدًا لكل بطاقة.
هل يجب أن يوضح جدول التسعير السعر الأصلي الذي تم شطبه؟
نعم عندما يتم خصم الخطة. السعر الأصلي المشطوب بجوار سعر البيع يمنح القارئ مرساة، ويبدو سعر البيع أقل مما هو عليه بمفرده. في أداة جدول تسعير الإضافات الرئيسية، يقوم مفتاح البيع وحقل السعر الأصلي بذلك.
كيف أجعل أعمدة جدول التسعير بنفس الارتفاع في Elementor؟
ضع البطاقات في حاوية واحدة وقم بتعيين محاذاة العناصر الخاصة بها للتمدد، ثم أعط كل خطة نفس عدد صفوف الميزات. الصفوف التي تلتف إلى سطرين هي السبب المعتاد للبطاقات غير المستوية، لذا قم بتقصير النص قبل ضبط الحشو.
الأفكار النهائية
يتلخص تصميم جدول التسعير في قائمة قصيرة: ثلاث خطط، واحدة مرفوعة، السعر كأكبر نص، أسماء الخطط التي توضح الغرض من الخطة، صفوف الميزات التي تناسب سطرًا واحدًا، تلميحات الأدوات للتفاصيل، زر واحد به فعل، قم بالتبديل فقط عندما يكون التوفير السنوي حقيقيًا، وتخطيط واحد لكل جدول، والتحقق من الهاتف. تم إنشاء كل مثال من الأمثلة العشرة أعلاه باستخدام أداة جدول التسعير وبعض إعدادات اللوحة.
إذا كنت تبدأ من الصفر، افتح صفحة عناصر واجهة المستخدم لجدول التسعير لرؤية التخطيطات الخمسة مباشرة، أو اختر قسم التسعير النهائي من مكتبة القوالب وتغيير الخطط. القطعة هي واحدة من الحاجيات والإضافات في الإضافات الرئيسية، وأداة تبديل المحتوى لمفتاح الفوترة موجودة في الخطط الموجودة على صفحة التسعير.
القراءة ذات الصلة
- أداة جدول المقارنة: مصفوفة الميزات الكاملة التي يجب أن يرتبط بها جدول التسعير
- القطعة الجدول الديناميكي: قائمة أسعار بسعر واحد لكل صف للقوائم وقوائم الخدمات
- أزرار الرسوم المتحركة Elementor: أنماط الأزرار لتذييل البطاقة
- أدوات تسويق العنصر: عناصر واجهة المستخدم التحويل الأخرى في الإضافات الرئيسية
- وثائق عناصر واجهة المستخدم لجدول التسعير: شرح كل عنصر تحكم
- منشئ الموضوع: قوالب الرأس والتذييل لبقية صفحة التسعير
