10 مقتطفات CSS مجانية لإنشاء جداول تسعير متجاوبة

تعتبر صفحة التسعير عنصرًا أساسيًا في أي متجر عبر الإنترنت. يتم استخدامه لمنتجات SaaS وشركات الخدمات ومحلات التجارة الإلكترونية في جميع أنحاء الويب.

ولن تكتمل أي صفحة تسعير بدون جدول أسعار يقارن بين الخيارات والميزات والأسعار (بشكل طبيعي). ولكن قد يكون تصميمك بنفسك من البداية أمرًا شاقًا.

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

1. جدول أيقونات بواسطة ترافيس ويليامسون

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

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

رؤية القلم
جدول الأسعار من ترافيس ويليامسون (travisw)

2. مخطط حمار وحشي مع ألوان أجوستين أورتيز

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

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

انظر جدول تسعير القلم | طبلة دي بريسيوس لأجوستين أورتيز

3. طاولة أرجوانية داكنة بواسطة مايك توروسيان

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

انظر جدول تسعير القلم بواسطة مايك توروسيان

4. التسعير الاحترافي من LittleSnippets

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

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

انظر القلم # 1214 - جدول التسعير بواسطة LittleSnippets

5. جدول مع تأثيرات تحوم بواسطة Nidheesh Balachandran

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

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

راجع جدول تسعير القلم بواسطة Nidheesh Balachandran

6. جداول تسعير Bootstrap ، إعداد سحر علي رضا

أنا معجب كبير بـ Bootstrap نظرًا لوجود الكثير مما يمكنك فعله باستخدام إطار العمل والموضوعات المتعلقة به. أحد الأمثلة على ذلك هو مثال جدول الأسعار هذا.

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

انظر إلى جدول تسعير Pen Bootstrap بواسطة سحر علي رضا

7. جدول تسعير تصميم المواد بواسطة مورتن سرينسن

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

رؤية القلم
جداول تسعير تصميم المواد (flexbox) بواسطة Morten Srensen.

8. جدول تسعير نظيف وبسيط بقلم دانيال هيرن

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

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

انظر جدول تسعير القلم -1 بقلم دانيال هيرن

9. جداول ويب بقلم ديلان ماكليود

بالنسبة للعمل الجاري ، يجب أن أقول إن مجموعة جدول الأسعار الملونة هذه تبدو رائعة. يتبع العديد من الأساليب التقليدية مثل إبراز رؤوس الجدول وإبقاء عمود واحد أكبر من الأعمدة الأخرى.

لكنني معجب كثيرًا باختيارات الألوان المتنوعة التي تمتزج جيدًا معًا. يبدو الأمر كما لو أن هذه الجداول لها بضعة رؤوس مختلفة ، وكلها تلفت انتباهك لأسباب مختلفة.

انظر جداول تسعير القلم بقلم ديلان ماكليود

10. حكاية تسعير Flexbox من CSSGirl

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

على الرغم من أن الميزة الأكبر هنا هي استخدام flexbox لتنسيق أعمدة الجدول. يثبت هذا المثال أن flexbox هو مستقبل مواقع الويب المتجاوبة.

اطلع على خطة تسعير Pen Flexbox من Lindsey