كيفية عرض خطوات العملية في ووردبريس

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

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

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

يضيف البرنامج الإضافي Tableberg كتلة تسمى Tableberg إلى مكتبة الكتل. أضفها إلى المحرر بالنقر فوق أيقونة زائد (+).

حدد عدد الصفوف والأعمدة التي تحتاجها لعرض العملية. في هذا البرنامج التعليمي، قمنا بتعيين 3*9 للأعمدة والصفوف.

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

الخطوة 02: تعيين لون الخلفية للصفوف الفردية

يتيح لك Tableberg تعيين لون الصف بشكل فردي. للقيام بذلك، حدد صفا و اذهب الى علامة التبويب الأنماط. ثم انقر فوق [PRO] لون خلفية الصفآمل أن تتمكن من القيام بالباقي.

يمكنك أن ترى أننا قمنا بتعيين ألوان مختلفة للصفوف بشكل فردي. ونظرًا لأن تلوين وتصميم جميع العناصر الأخرى يعتمدان على الخلفية، فقد قمنا بتعيين ألوان الصفوف مسبقًا.

الخطوة 03: قم بإدراج أرقام الخطوات في العملية

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

الخطوة 04: اكتب عناوين الخطوات وأوصافها

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

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

الخطوة 05: إضافة الصور إلى الخلايا المعنية

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

لذا، أضف كتلة الصورة من خلال النقر على أيقونة زائد (+) إلى الخلية المعنية. يمكنك تحميل الصور، سواء من محرك الأقراص المحلي أو من مكتبة الوسائط الخاصة بك.

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

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

الخطوة 06: أضف معلومات الاتصال الخاصة بك

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

الآن، أضف كتلة القائمة المصممة إلى الصف الأخير من الجدول.

حدد أيقونة تمثل موقع الويب الخاص بك. بجوار الأيقونة، اكتب عنوان موقع الويب الخاص بك.

الخطوة 07: تخصيص حدود الجدول

يتيح لك Tableberg إزالة وتلوين وتعديل عرض الحدود الداخلية والخارجية للجدول. من خلال تكوين هذه الخيارات بشكل مناسب، يمكنك تجميل الجدول بشكل أكبر.

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

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

انتقل إلى صفحة المعاينة. وتأكد من ظهور تصميمك بشكل مثالي. لقد عرضنا أكبر قدر ممكن من الصورة كما يمكن رؤيته على الشاشة أدناه.

خاتمة

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

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