كيفية إضافة مربعات الميزات في ووردبريس

كيفية إضافة مربعات الميزات إلى موقع WordPress

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

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

احصل على البرنامج المساعد بالضغط على الأزرار الموجودة على الشريط أدناه.

إنشاء جداول جميلة
مع محرر الكتل

بمجرد تثبيت المكونات الإضافية على موقعك، اتبع البرنامج التعليمي أدناه.

الخطوة 01: إضافة كتلة Tableberg إلى المحرر

أضف كتلة Tableberg الى المحرر.

أضف كتلة TableBerg إلى محرر Gutenberg الخاص بك

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

نظرًا لأننا سنقوم بإنشاء ثلاثة صناديق ميزات، فقد حددنا عدد الأعمدة والصفوف 2*2.

تعيين عدد الصفوف والأعمدة

تمت إضافة العدد المحدد من الصفوف والأعمدة.

تمت إضافة الصفوف والأعمدة

الخطوة 02: إضافة صورة المنتج إلى الصندوق

لا معنى لصندوق الميزات بدون صورة للمنتج المعني. أضف كتلة الصورة إلى خلية مناسبة.

أضف صورة المنتج إلى الصندوق

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

تغيير حجم الصورة في مربع الميزة

الخطوة 03: إضافة تصنيف النجوم

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

أضف تصنيف النجوم إلى مربع الميزة

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

تعيين قيمة لكتلة تصنيف النجوم

الخطوة 04: إضافة زر CTA

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

إضافة زر CTA إلى مربع الميزة

اذهب الى علامة التبويب "الأنماط"، مع الحفاظ على كتلة الزر محددة.

من هنا يمكنك تغيير الزر لون النص، لون الخلفية، الحجم، الحشو، أدائرة نصف قطرها حسب الحاجة.

تخصيص الزر الموجود في مربع الميزة

الخطوة 05: إضافة قائمة الميزات والوصف

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

انقر فوق تحرير الجدول على شريط الأدوات. اضغط على خيار الدمج في القائمة.

دمج الخلايا لمربع الميزة

أضف كتلة الفقرة لكتابة النص في مربع الميزة.

أضف كتلة الفقرة إلى مربع الميزة لإضافة نص

من الأفضل عرض ميزات المنتج في قائمة. لذا، أضف كتلة القائمة المصممة.

أضف قائمة الميزات إلى مربع الميزات

نأمل أن تتمكن من سرد ميزات منتجك مثل الصورة أدناه. يمكنك تغيير أيقونة القائمة وزيادة حجمها، و تعديل لونه.

قم بإدراج ميزات منتجك

وأخيرًا، أضف وصفًا قصيرًا لمنتجك باستخدام كتلة الفقرة الموجودة أسفل قائمة الميزات.

أضف وصفًا موجزًا لمنتجك

حسنًا، أصبح محتوى صندوق الميزات جاهزًا. سنعمل الآن على تخصيص الصناديق بشكل أكبر.

الخطوة 06: تخصيص حدود مربع الميزات

يسمح Tableberg بتخصيص كل من خارجي و الحدود الداخلية.

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

تخصيص حدود مربع الميزة

الخطوة 07: إضافة الشريط إلى مربع الميزات

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

إضافة شريط إلى مربع الميزات

الذهاب الى علامة التبويب "الإعدادات", اكتب نسخة الشريط و إصلاح موقعها في مربع الميزة.

تعيين نص الشريط وموقعه في مربع الميزة

وأخيرا، انتقل إلى علامة التبويب "الأنماط".

حدد نص و لون الخلفية للشريط.

اختر لون الشريط

الخطوة 08: معاينة مربع الميزات

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

معاينة مربع الميزة

خاتمة

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

إذا كان لديك سؤال بخصوص البرنامج الإضافي، فيرجى إخبارنا بذلك من خلال مربع التعليقات. وسنرد عليك قريبًا بإجابة مرضية.



فريق Tableberg