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