مربع الميزات هو منطقة مصممة على صفحة الويب لجذب الانتباه إلى محتوى ومنتجات وخدمات معينة. يتم تصميم مربعات الميزات باستخدام عناصر مثل الصور والأيقونات والنص الموجز والأزرار.
Tableberg هو مكون إضافي متعدد الأغراض لبناء الجداول. يمكنه مساعدتك في إنشاء تخطيطات رائعة لمربعات الميزات الخاصة بك. في منشور البرنامج التعليمي هذا، سنعرض لك دليلاً سهلاً حول كيفية إضافة مربعات الميزات في WordPress باستخدام المكون الإضافي.
احصل على البرنامج المساعد بالضغط على الأزرار الموجودة على الشريط أدناه.
إنشاء جداول جميلة
مع محرر الكتل
بمجرد تثبيت المكونات الإضافية على موقعك، اتبع البرنامج التعليمي أدناه.
الخطوة 01: إضافة كتلة Tableberg إلى المحرر
أضف كتلة Tableberg الى المحرر.
قم بتحديد عدد الصفوف والأعمدة لموقع الويب الخاص بك وفقًا لعدد مربعات الميزات التي تريد إنشاءها.
نظرًا لأننا سنقوم بإنشاء ثلاثة صناديق ميزات، فقد حددنا عدد الأعمدة والصفوف 2*2.
تمت إضافة العدد المحدد من الصفوف والأعمدة.
الخطوة 02: إضافة صورة المنتج إلى الصندوق
لا معنى لصندوق الميزات بدون صورة للمنتج المعني. أضف كتلة الصورة إلى خلية مناسبة.
أضف صورة إلى خلية مناسبة. يمكنك تغيير حجم الصورة عن طريق سحب الرمز الدائري.
الخطوة 03: إضافة تصنيف النجوم
يُعد تصنيف النجوم طريقة بديهية للتعبير عن جودة المنتج وشعبيته. كما يساعد أيضًا في جذب العملاء. لذا، أضف كتلة تصنيف النجوم الى الطاولة.
من تحت علامة التبويب "الإعدادات" على الشريط الجانبي الأيمن، قم بتعيين قيم كتلة تصنيف النجوم. يمكنك أيضًا تغيير حجم الكتلة إذا لزم الأمر.
الخطوة 04: إضافة زر CTA
باستخدام زر CTA، يمكنك تحفيز المستخدمين على الشراء أو زيارة صفحة المنتج. لذا، أضف كتلة الأزرار تحت التصنيف.
اذهب الى علامة التبويب "الأنماط"، مع الحفاظ على كتلة الزر محددة.
من هنا يمكنك تغيير الزر لون النص، لون الخلفية، الحجم، الحشو، أدائرة نصف قطرها حسب الحاجة.
الخطوة 05: إضافة قائمة الميزات والوصف
نظرًا لأنك تحتاج إلى مساحة أكبر لإضافة قائمة الميزات والوصف، فمن الأفضل دمج خليتين. تحديد الخلايا باستخدام المؤشر الخاص بك الضغط على مفتاح Shift.
انقر فوق تحرير الجدول على شريط الأدوات. اضغط على خيار الدمج في القائمة.
أضف كتلة الفقرة لكتابة النص في مربع الميزة.
من الأفضل عرض ميزات المنتج في قائمة. لذا، أضف كتلة القائمة المصممة.
نأمل أن تتمكن من سرد ميزات منتجك مثل الصورة أدناه. يمكنك تغيير أيقونة القائمة وزيادة حجمها، و تعديل لونه.