يتكون مربع الأيقونات عادةً من رسم بياني صغير مقترن بقطعة نصية قصيرة. باستخدام مربعات الأيقونات، يمكنك إبراز أشياء مثل الميزات الرئيسية والخدمات والفوائد والعروض بطرق جذابة وذات مغزى بصريًا.
يمكنك أيضًا استخدام مربعات الأيقونات لعرض الشهادات والدعوة إلى العمل وخطوات العملية والمزيد. Tableberg هو مكون إضافي متعدد الاستخدامات لإنشاء الجداول. يمكنك إنشاء صناديق أيقونات جميلة وجذابة بسهولة باستخدام المكون الإضافي.
في الأجزاء التالية من هذه المقالة، سنشرح لك كيفية إضافة صناديق الأيقونات في WordPress باستخدام المكون الإضافي. احصل على المكون الإضافي بالنقر فوق الروابط أدناه.
إنشاء جداول جميلة
مع محرر الكتل
الخطوة 01: إضافة كتلة Tableberg إلى المحرر
أضف كتلة Tableberg إلى محرر النصوص الخاص بك كما تفعل مع أي كتلة جوتنبرج.
ضبط عدد الصفوف والاعمدة وفقا لعدد صناديق الأيقونات التي تريد إنشاءها.
على سبيل المثال، في هذا البرنامج التعليمي، سنقوم بإنشاء ثلاثة صناديق أيقونات. لذا، سنقوم بتعيين 3 أعمدة وصف واحد.
يمكنك رؤية عدد المربعات التي تم إنشاؤها. بعد ذلك، سنضيف محتوى لإنشاء مربعات الأيقونات.
الخطوة 02: إضافة رمز إلى مربع/خلية
يتيح لك Tableber إضافة عناصر مختلفة إلى خلاياه، مما يجعل خلايا الجدول جذابة للغاية. وسنشرح ذلك في هذا القسم.
إضافة لون الخلفية إلى الخلايا
حدد الجدول بأكمله عن طريق النقر ال أيقونة Tableberg على شريط الأدوات. ثم انتقل إلى علامة التبويب "الأنماط". تحت علامة التبويب، سترى خيارات الألوان. باستخدام الخيار المناسب، قم بتعيين خلفية لخلايا الجدول.
ملحوظة: يجب عليك تعيين لون الخلفية في البداية لأنه سيتم تصميم جميع عناصر مربع الجدول بناءً عليه.
إضافة أيقونة إلى مربع/خلية
بإمكانك إضافة كتل داخل خلايا الجدول مثل محرر كتل جوتنبرج. انقر على أيقونة الإضافة (+) على خلية. ابحث عن وأضف كتلة الأيقونات الى الخلية.
تغيير واختيار أيقونة
اذهب الى علامة التبويب "الإعدادات" على الشريط الجانبي الأيمن مع إبقاء كتلة الأيقونات محددة. ضمن علامة التبويب هذه، ستحصل على خيارات زيادة حجم الرمز, ضبط الدوران، و تغيير الرمز.
يمكنك تحديد أيقونة من مكتبة الأيقونات الموجودة أو استيراد أيقونة من محرك الأقراص المحلي لديك.
تلوين الأيقونة
اذهب الى علامة التبويب "الأنماط". اضبط لون الأيقونة و ال لون الخلفية.
في الواقع، لا يبدو تصميم لون الخلفية جيدًا، أليس كذلك؟ لقد قمنا بحل هذه المشكلة.
قم بالتمرير لأسفل قليلًا أسفل علامة التبويب "الأنماط". سترى الحشو، الهامش، و نصف القطر خيارات.
يمكنك إنشاء تخطيط للون الخلفية عن طريق وضع القيم المناسبة، كما في الصورة أدناه.
الخطوة 03: إضافة نص إلى الخلية/المربع
لا يكون لصندوق الأيقونات أي معنى بدون محتوى نصي. أضف كتلة الفقرة أسفل الرمز الموجود على الخلية.
أضف عنوانًا حول مربع الأيقونات. بعد ذلك، محاذاته مركزيا، حدد اللون، و حدد الحجم للنص.
وبالمثل، أضف وصفًا لمربع الرمز باستخدام كتلة الفقرة.
الخطوة 04: إضافة زر إلى الخلية/المربع
يمكنك توجيه المستخدمين إلى صفحة أخرى أو وثائق أو موارد أخرى عن طريق إضافة زر. أضف كتلة الأزرار الى الخلية.
بعد إضافة الزر، أضف نسخة CTA، تغييره النص ولون الخلفية، و زيادة حجم النسخة.