قوالب وأمثلة جدول تسعير العنصر (12 تصميمًا)

الوجبات السريعة الرئيسية

• تقوم أداة جدول تسعير الإضافات الرئيسية بشحن خمسة قوالب جدول تسعير Elementor كإسقاط للتخطيط: الافتراضي، ومحتوى المحاذاة اليسرى، والجدول المستدير، والجدول الذي يحتوي على صورة BG ونمط Skew BG.
• يؤدي تبديل القائمة المنسدلة للتخطيط إلى الحفاظ على اسم الخطة وسعرها وميزاتها وزرها في مكانها، بحيث يمكن معاينة مجموعة واحدة من المحتوى في جميع التصميمات الخمسة في أقل من دقيقة.
• تحتوي مكتبة قوالب الإضافات الرئيسية على أقسام تسعير جاهزة، بما في ذلك التصميمات المظلمة ذات المخططين والأربعة مخططات ومفاتيح الفوترة، والتي يتم استيرادها إلى أي صفحة Elementor من المحرر.
• يتبع كل مثال لجدول التسعير في هذه الصفحة نفس الترتيب: اسم الخطة، ومن هو، والسعر والفترة، وثلاثة إلى سبعة صفوف من الميزات، وزر واحد وخط ثقة اختياري.
• يُقرأ جدول التسعير الداكن بشكل أفضل مع لمسة مشرقة واحدة على الخطة المميزة فقط؛ تستخدم الأمثلة أدناه اللون الأخضر أو السماوي أو الوردي لتلك البطاقة الفردية.
• يحتاج التبديل الشهري والسنوي في قسم التسعير إلى مجموعتين من البطاقات وأداة تبديل المحتوى من Master Addons Pro.

يوفر لك قالب جدول تسعير Elementor الجزء من المهمة الذي يستغرق وقتًا أطول: قرارات التصميم. تمنحك تخطيطات عناصر واجهة المستخدم أدناه شكل بطاقة بنقرة واحدة، وتمنحك الأقسام الجاهزة كتلة تسعير كاملة مع العنوان والمفتاح والبطاقات التي تم ترتيبها بالفعل. وفي كلتا الحالتين، يمكنك استبدال أسماء الخطط والأسعار والميزات والحفاظ على التصميم.

تجمع هذه الصفحة اثني عشر مثالاً لجدول التسعير تم إنشاؤها باستخدام الإضافات الرئيسية للعنصر. الخمسة الأولى هي تخطيطات الأداة الخاصة مع الإعدادات الدقيقة المستخدمة، حتى تتمكن من إعادة إنتاج كل واحدة منها. السبعة التالية هي أقسام من مكتبة النماذج، تم اختيارها لتغطية أشكال صفحات التسعير الشائعة: ثلاث خطط، وخطتان، وأربع خطط، ومظلم، وخفيف، ومفتاح الفوترة.

كيفية استخدام هذه القوالب

هناك نوعان من القوالب في هذه الصفحة. الأمثلة من 1 إلى 5 هي تخطيطات عناصر واجهة المستخدم: قم بإسقاط القطعة جدول التسعير في الحاوية، اختر التخطيط من القائمة المنسدلة، وانسخ الإعدادات المدرجة تحت كل مثال. الأمثلة من 6 إلى 12 هي أقسام كاملة: افتح مكتبة القوالب، قم باستيراد القسم، وقم بتحرير النص في مكانه.

الإعدادات المدرجة لكل تخطيط هي التي تغير المظهر. كل شيء آخر في وضعه الافتراضي. يتم إعطاء الألوان كقيم سداسية بحيث يمكنك لصقها في علامة التبويب "النمط"، وتستخدم جميع بطاقات التخطيط الخمس نفس المحتوى: خطة بقيمة 29 دولارًا مع ثلاث ميزات وزر “Get barted”.

تخطيطات عناصر واجهة المستخدم الخمسة لجدول التسعير

1. الافتراضي

التخطيط الافتراضي هو الذي يبدأ به. يتم توسيط الرأس، ويقع السعر تحت الاسم، وتتبع الميزات والزر في النص. إنه يعمل مع أي عدد من الخطط وهو الخيار الأكثر أمانًا لصف مكون من ثلاثة أعمدة.

• تخطيط: الافتراضي
• نظام ألوان الرأس: مخصص، متدرج من #6938EF إلى #B497FF عند 135 درجة
• لون العنوان والسعر: #FFFFFF؛ العنوان الفرعي والفترة: #E4DBFF
• رمز الميزة: تحقق، #6938EF؛ نص الميزة: #1A1033
• الزر: الخلفية #F1EEFF، النص #6938EF، نصف القطر 6 بكسل
• معلومات إضافية: “إلغاء أي وقت”،#6B7280

2. محاذاة المحتوى إلى اليسار

يقوم محتوى المحاذاة اليسرى بنقل الاسم والسعر والميزات إلى الحافة اليسرى. تتم قراءته بشكل أسرع عندما تكون أسماء الخطط طويلة أو عندما تكون البطاقة بجوار فقرة نصية، ويتطابق مع صفحات التسعير ذات النمط التحريري حيث يتم ترك كل شيء آخر محاذيًا.

• تخطيط: محاذاة المحتوى إلى اليسار
• جميع الألوان كما في الافتراضي
• محاذاة الزر: إلى اليسار، مع حشوة يسرى 24 بكسل على التذييل

3. طاولة مستديرة

يضع الجدول المستدير السعر داخل دائرة كبيرة في الرأس، مما يجعل الرقم أول ما يراه أي شخص. إنها تحتاج إلى رأس أطول، لذا أعطها نفس عدد الميزات على كل بطاقة وإلا سيبدو الصف غير متساوٍ. يعد التسطير الأصفر في صفوف الميزات جزءًا من التخطيط.

• تخطيط: طاولة مستديرة
• تدرج الرأس كما في الافتراضي؛ تدرج الدائرة من #F50A7F إلى #FF6FB1 عند 135 درجة، أو اتركه على اللون الافتراضي
• نص الميزات: #1A1033، تسطير اللون #FFD600 (التخطيط الافتراضي)

4. جدول مع صورة BG

يملأ الجدول الذي يحتوي على صورة BG البطاقة بأكملها بصورة أو تدرج أو فيديو أو عرض شرائح، مع عائمة الرأس والميزات في الأعلى. إنها تناسب خطة مميزة واحدة أو صفحة تسعير لمنتج مرئي. تحتاج لوحة الميزات إلى خلفية داكنة شبه شفافة بحيث يظل النص قابلاً للقراءة في أي صورة.

• تخطيط: الجدول مع صورة BG
• الخلفية: الصورة، مركز الموضع، غطاء الحجم
• ميزات الخلفية: rgba (20، 10، 45، 0.6)؛ نص الميزات: #FFFFFF
• تدرج الرأس كما هو الحال في الوضع الافتراضي، مع عتامة بنسبة 70 بالمائة بحيث تظهر الصورة من خلاله

5. انحراف نمط BG

يقوم نمط Skew BG بقطع الرأس بزاوية وإضافة خطين أبيضين، مما يمنح البطاقة حركة بدون صورة. استخدم لونًا مميزًا واحدًا؛ يتقاتل التدرج مع الخطوط. إنه التخطيط الذي يتم اختياره غالبًا لبطاقة واحدة على الصفحة المقصودة.

• تخطيط: انحراف نمط BG
• نظام ألوان الرأس: مخصص، صلب #6938EF
• نصف قطر البطاقة: 20 بكسل؛ خلفية البطاقة #FFFFFF
• ميزة التسطير على الزر كما في الوضع الافتراضي

6. ثلاث خطط ببطاقة وسطى مميزة

صف تسعير SaaS القياسي: ثلاث عناصر واجهة مستخدم لجدول التسعير في حاوية مكونة من ثلاثة أعمدة، والوسطى مرفوعة. تستخدم البطاقة المرتفعة Highlight Table، وشريط يقرأ “Mostopular”، وزر وردي خالص بدلاً من المخطط التفصيلي، ومفتاح البيع بسعر 69 دولارًا كسعر أصلي و49 دولارًا كسعر حالي. تستخدم البطاقات الخارجية لون الجسم الفاتح بحيث يقف اللون الأوسط للأمام.

• الحاوية: ثلاث حاويات فرعية بعرض 31.5 بالمائة، فجوة 28 بكسل، محاذاة العناصر: التمدد
• البطاقة الوسطى: قم بتمييز الجدول؛ الشريط “Most Popular”، عمودي 18، أفقي -10؛ خلفية الزر #F50A7F، النص #FFFFFF
• البطاقات الخارجية: خلفية الجسم #F6F5FA؛ البطاقة الوسطى: #FFFFFF مع ظل 0 24px 60px rgba (105، 56، 239، 0.28)

7. جدول تسعير داكن ذو أربع خطط

أربع خطط على خلفية سوداء، مع لمسة ليمونية واحدة على حدود وعلامة الخطة المميزة. الميزات متطابقة عبر البطاقات، وهو اختيار متعمد: الفرق بين الخطط هو السعر فقط ومن المفترض أن يختار القارئ حسب الميزانية. تستخدم الأزرار عنصر واجهة المستخدم Creative Button، لذا تأتي تأثيرات التمرير من عنصر واجهة المستخدم هذا بدلاً من CSS المخصص.

استخدم هذا القالب عندما تختلف الخطط بحدود بدلاً من الميزات. يعد نص الميزة الغامق الموجود على البطاقة الأولى والنص العادي الموجود على البطاقات الأخرى هو التسلسل الهرمي المرئي الوحيد، لذا احتفظ به بهذه الطريقة.

8. تسعير SaaS الداكن مع خطة مخصصة

من مجموعة قوالب Finix، يوضح هذا القسم كيفية التعامل مع الخطة بدون سعر ثابت. تقوم البطاقة الثالثة بطباعة “Custom” حيث سيكون الرقم وتبديل نص الزر بـ “Talk to us”. يشرح وصف من سطر واحد تحت كل سعر الغرض من الخطة، وتغطي الحاشية السفلية أسفل الصف الفواتير والخصم السنوي في جملة واحدة.

الدوائر الخافتة متحدة المركز الموجودة خلف البطاقات هي صورة خلفية مقطعية، وليست جزءًا من الأداة. استبدل الصورة أو قم بإزالتها وتبقى البطاقات كما هي.

9. جدول تسعير خفيف ذو خطتين

هناك خطتان تعتبران قرارًا بنعم أو لا، لذا فإن هذا التخطيط يجعل من المستحيل تفويت البطاقة المدفوعة: البطاقة بأكملها مليئة بلون التركيز وينقلب الزر إلى اللون الداكن. قم بفحص الرموز الرمادية الموجودة على ميزات علامة البطاقة الأساسية غير المضمنة، مما يتيح لكلا البطاقتين الاحتفاظ بنفس الصفوف الأربعة.

استخدم هذا عندما يكون هناك طبقة مجانية وطبقة واحدة مدفوعة. مع ثلاث خطط أو أكثر، تصبح البطاقة ذات الألوان الكاملة عالية جدًا.

10. بطاقات التسعير مع مفتاح الفوترة

يحتوي هذا القسم على أداة التبديل الشهرية والسنوية التي تم إنشاؤها بالفعل. المحول هو أداة تبديل المحتوى من Master Addons Pro، وتقوم كل حالة بتحميل صف تسعير محفوظ. تقوم البطاقات بطباعة “billed monthly” أو “billed سنويًا” تحت السعر حتى يعرف القارئ الحالة التي تظهرها. قم باستيراده، وافتح القوالب > القوالب المحفوظة، وقم بتحرير صفي التسعير هناك. لبناء نفس الشيء من الصفر، بما في ذلك أداة التقاط القالب من نوع القسم، اتبع دليل التبديل الشهري والسنوي.

11. مقارنة أربع خطط مع علامات الميزة

عندما تختلف الخطط حسب الميزات بدلاً من الحدود، فإن علامات التجزئة والتقاطعات تسمح للقارئ بمسح عمود ضوئيًا. بعد حوالي سبعة صفوف، أ جدول المقارنة هل هذه المهمة أفضل من البطاقات. تحمل جميع البطاقات الأربع نفس الصفوف السبعة بنفس الترتيب، ويتغير الرمز لكل خطة. تمتلئ الخطة المميزة بلون التركيز، مع زر أبيض، وتحتل المركز الثالث بدلاً من الثاني لأن الصفحة تتوقع من معظم القراء اختيار المستوى الأعلى.

12. التسعير الداكن مع التبديل الشهري والسنوي

القسم المظلم الذي يحتوي على بطاقات فاتحة هو عكس المثال 7، ويجعل البطاقات ألمع شيء في الصفحة. يقع التبديل بين العنوان والبطاقات، وتحدد الملاحظة لكل مستخدم تحت كل اسم خطة التوقعات، و“لا يلزم وجود بطاقة ائتمان، حيث يزيل التجاوز تحت كل زر الاعتراض الأخير. الأشكال الزخرفية في الزوايا هي عناصر خلفية القسم.

كيفية استيراد قسم التسعير

1. افتح الصفحة في Elementor وانقر فوق أيقونة قالب Master Addons في المحرر، أو افتح القوالب > قوالب Master Addons.
2. ابحث في “pricing”، وقم بمعاينة القسم وانقر فوق استيراد. تحتاج الأقسام التي تم إنشاؤها باستخدام عناصر واجهة المستخدم Pro إلى Master Addons Pro active.
3. يهبط القسم حيث كان المؤشر الخاص بك. تحرير نص كل بطاقة في اللوحة؛ يبقى التصميم.
4. بالنسبة للأقسام التي تحتوي على تبديل، قم بتحرير صفي التسعير ضمن القوالب > القوالب المحفوظة.

ال دليل استيراد القالب يغطي زر المحرر وشاشة استيراد الصفحات وما يحدث للنسخة المستوردة.

هل تريد جميع التخطيطات الخمسة دون استيراد أي شيء؟ ال القطعة جدول التسعير هل لديهم في قطرة واحدة، و مكتبة القوالب يحتوي على الأقسام الكاملة الموضحة أعلاه.

الأسئلة المتداولة

الأفكار النهائية

تأتي القوالب الاثني عشر عبر طريقين. تغطي تخطيطات عناصر واجهة المستخدم الخمسة شكل البطاقة وتتخذ تغييرًا واحدًا لكل منها. تغطي أقسام المكتبة السبعة أشكال الصفحات: ثلاث خطط ذات مخطط متوسط مميز، وأربعة مخططات داكنة، وSaaS مع طبقة مخصصة، وضوء ذو مخططين، ومفتاح الفوترة، وعلامات وتقاطعات ذات أربع مخططات، ومظلمة ببطاقات فاتحة. يحتفظ كل واحد بالترتيب الذي يعمل: الاسم، ومن هو، والسعر، وقائمة الميزات القصيرة، وزر واحد.

ابدأ بالتخطيط أو القسم الأقرب إلى خططك على صفحة عناصر واجهة المستخدم لجدول التسعيرقم بتغيير النص وتحقق منه على الهاتف قبل أن يتم بثه مباشرة.

القراءة ذات الصلة

• تصميم جدول التسعير: 10 نصائح مع أمثلة
• مكتبة قوالب الإضافات الرئيسية
• مجموعات قالب العنصر
• قوالب قسم العنصر
• وثائق عناصر واجهة المستخدم لجدول التسعير
• كيفية إضافة تبديل شهري وسنوي إلى جدول تسعير العنصر
• جدول تسعير العنصر مقابل جدول المقارنة: أيهما يجب استخدامه
• كيفية إنشاء قائمة أسعار أو قائمة في Elementor