إعدادات عناصر واجهة المستخدم لجدول المقارنة

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

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

تفضل المشاهدة أولا؟ يمر هذا البرنامج التعليمي القصير عبر أداة جدول المقارنة من طرف إلى طرف:

ما تفعله أداة جدول المقارنة #

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

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

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• ماستر أدونز برو تم تثبيته بترخيص نشط، نظرًا لأن Comparison Table عبارة عن أداة Pro. جديد في البرنامج المساعد؟ انظر ال دليل التثبيت.
• المنتجات وقائمة الميزات التي تريد مقارنتها.

كيفية إضافة عنصر واجهة المستخدم لجدول المقارنة #

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

الإعدادات العامة: التخطيط وعدد المنتجات #

افتح ال محتوى علامة التبويب و عام يحتوي القسم على الإعدادين اللذين يشكلان الجدول بأكمله.

• التخطيطات: اختر النمط 1 أو 2 أو 3 أو 4. يقوم كل منها بإعادة ترتيب الرأس والسعر والأعمدة في مظهر مختلف.
• منتجات: قم بتعيين عدد أعمدة المنتج التي يعرضها الجدول، من 2 إلى 6. ارفع الرقم وسيظهر قسم المنتج المطابق أدناه لكل عمود جديد.

قم بتعيين صفوف الميزات #

ال صندوق الميزات يحدد القسم العمود الأيسر، وقائمة الأشياء التي تقارنها. ال عنوان هل الملصق الموجود في الأعلى (مثل “Features” أو “Product”)، و سمات يحمل المكرر عنصرًا واحدًا في كل صف.

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

املأ كل عمود منتج #

كل منتج يحصل على قسم خاص به (المنتج 1, المنتج 2، وهكذا). في الداخل، قمت بتعيين عنوان العمود وسعره وصورته ونص الزر والرابط، ثم قيمة كل صف ميزة.

الجزء المفيد هو لكل صف محتوى يتحكم. لكل ميزة تختار شيكًا أو علامة تقاطع أو رمزًا تختاره أو نصًا عاديًا. تتم قراءة شبكة التحديد والتقاطع على الفور، بينما تناسب حقول النص مواصفات مثل “1 Year” أو “All الأحجام.” An تجاوز النمط يتيح التبديل ظهور عمود واحد، وهو أمر مفيد لتسليط الضوء على اختيارك الموصى به.

اختر نمط التخطيط #

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

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

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

نمط الطاولة #

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

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

النتيجة على الصفحة #

قم بالنشر أو المعاينة ويعرض الجدول ميزاتك ومنتجاتك وأسعارك وأزرارك وصفوف الحمار الوحشي وكل شيء. يوجد أدناه جدول Style 2 يحتوي على ثلاثة منتجات.

حالات الاستخدام الشائعة #

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

نصائح للعمل مع أداة جدول المقارنة #

• استخدم علامات التجزئة والتقاطعات للحصول على ميزات نعم/لا. يقومون بالمسح بشكل أسرع من الكلمتين “Yes” و“No” ويحافظون على الجدول مرتبًا.
• إبقاء تسميات الميزة قصيرة. كلمة أو كلمتان في كل صف تمنع العمود الأول من الاتساع.
• قم بتمييز عمود واحد باستخدام Override Style. لون مختلف يوجه العين إلى الخيار الموصى به.
• ضبط ألوان الحمار الوحشي مع التباين الكافي. ألوان الصفوف المتناوبة هي ما يجعل الطاولة الطويلة قابلة للقراءة.
• قم بمطابقة عدد المنتجات على الشاشة. ثلاثة أعمدة تناسب معظم التخطيطات؛ يمكن أن تصبح أربعة أو أكثر ضيقة على الشاشات الأصغر حجمًا. أسفل تنسيق بدء علامة التبويب من العرض (767 بكسل افتراضيًا)، تتحول بعض التخطيطات إلى علامات تبويب المنتج، لذا تحقق من عرض الهاتف المحمول.

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

إلتحاق بالركب #

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