كيفية إضافة عناصر واجهة مستخدم قائمة فئة المنشور إلى تذييل Divi العالمي الخاص بك

عندما تقوم بإنشاء تذييل مخصص داخل Divi's Theme Builder ، فهناك عدة طرق للتعامل مع إضافة عناصر التذييل. يمكنك الذهاب إلى تذييل قائم على الوحدة النمطية ، حيث تضيف عناصر تذييل الصفحة داخل وحدات نصية مع روابط مناسبة ، ولكن يمكنك أيضًا أن تقرر إضافة أدوات تذييل مختلفة إلى التصميم الخاص بك ، باستخدام وحدة Divi's Sidebar Module ، وتصميمها باستخدام Divi المدمج في والخيارات. في البرنامج التعليمي اليوم ، سنوضح لك كيفية الانتقال إلى الخيار الثاني. وبشكل أكثر تحديدًا ، سنوضح لك كيفية إضافة عناصر واجهة مستخدم قائمة فئة المنشور إلى تذييل الصفحة. يتطابق أسلوب التصميم الذي نستخدمه مع حزمة تخطيط وصفات الطعام بشكل مثالي. سنبدأ بإضافة فئات المنشورات المختلفة إلى موقعنا. سنقوم بعد ذلك ببناء قوائم التذييل داخل WordPress. بعد ذلك ، سننشئ أدواتنا وأخيرًا وليس آخرًا ، سنضيف عناصر واجهة مستخدم إلى تذييل Divi المصمم خصيصًا داخل Divi Theme Builder. ستتمكن من تنزيل ملف JSON مجانًا أيضًا!

دعنا نذهب اليها.

معاينة

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

سطح المكتب

متحرك

قم بتنزيل قالب التذييل العالمي مجانًا

لوضع يديك على قالب التذييل العالمي المجاني ، ستحتاج أولاً إلى تنزيله باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.

قم بتنزيل الملفات

تنزيل مجاني

انضم إلى رسالة Divi الإخبارية وسنرسل لك نسخة من حزمة Divi Landing Page Layout النهائية ، بالإضافة إلى الكثير من موارد ونصائح وحيل Divi المذهلة والمجانية الأخرى. تابع معنا وستكون سيد Divi في أي وقت من الأوقات. إذا كنت مشتركًا بالفعل ، فاكتب ببساطة عنوان بريدك الإلكتروني أدناه وانقر فوق تنزيل للوصول إلى حزمة التخطيط.

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

1. قم بإعداد فئات النشر لموقعك على الويب

انتقل إلى فئات منشوراتك

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

قم بإعداد هيكل فئة المشاركة من اختيارك

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

2. إنشاء العديد من قوائم ووردبريس للفئات

اذهب إلى القوائم

بعد ذلك ، سننشئ قائمة منفصلة لكل مجموعة من فئات المنشورات. انتقل إلى القوائم الموجودة داخل إعدادات المظهر لموقع WordPress الخاص بك.

إنشاء قائمة التذييل الأول

أضف قائمة تذييل أولية ومنحها اسمًا معروفًا.

• اسم القائمة: قائمة التذييل رقم 1

أضف فئات النشر

أضف مجموعتك الأولى من فئات المنشورات إلى هذه القائمة الجديدة.

إنشاء قائمة التذييل الثاني والثالث لفئات المنشورات الأخرى

افعل نفس الشيء لمجموعتين أخريين من فئات المشاركات.

• اسم القائمة: قائمة التذييل # 2

• اسم القائمة: قائمة التذييل رقم 3

3. إنشاء الحاجيات التذييل

انتقل إلى الحاجيات

الآن بعد أن أصبح لدينا فئات المنشورات وقوائم فئات النشر في مكانها الصحيح ، يمكننا وضعها داخل أدوات منطقة التذييل الخاصة بنا. للقيام بذلك ، انتقل إلى الأدوات في الواجهة الخلفية لـ WordPress.

إضافة قائمة التذييل رقم 1 إلى منطقة التذييل رقم 1

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

إضافة قائمة التذييل رقم 2 إلى منطقة التذييل رقم 2

ضع قائمة فئة المشاركة الثانية في منطقة التذييل الثاني.

إضافة قائمة التذييل رقم 3 إلى منطقة التذييل رقم 3

وقائمة التذييل الثالث في منطقة التذييل الثالث.

إضافة المشاركات الأخيرة إلى منطقة التذييل رقم 4

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

3. بناء تذييل عالمي داخل Divi Theme Builder

انتقل إلى Divi Theme Builder وابدأ في إنشاء قالب تذييل

الآن بعد أن أصبحت فئات المنشورات وقوائم فئات المنشورات وعناصر واجهة المستخدم في مكانها الصحيح ، فقد حان الوقت للانتقال إلى Divi! انتقل إلى Divi Theme Builder وابدأ في إنشاء تذييل عالمي أو مخصص.

إعدادات القسم

لون الخلفية

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

• لون الخلفية: # ff7864

الصورة الخلفية

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

• حجم صورة الخلفية: صالح

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف الصف رقم 1

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

خلفية متدرجة

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

• اللون 1: rgba (10،10،10،0.05)
• اللون 2: rgba (10،10،10،0.18)

تحجيم

انتقل إلى علامة تبويب تصميم الصف وقم بتعديل إعدادات التحجيم كما يلي:

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 1
• معادلة ارتفاعات العمود: نعم
• العرض الأقصى: 1680 بكسل

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

إعدادات العمود 1

تباعد

بعد ذلك ، افتح إعدادات العمود 1 وأضف بعض قيم المساحة المتروكة المخصصة في علامة تبويب التصميم.

• حشوة علوية: 5٪
• حشوة سفلية: 5٪
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

الحدود

نحن نستخدم الحدود الصحيحة على سطح المكتب أيضًا.

• عرض الحد الأيمن:
  • سطح المكتب: 2 بكسل
  • الجهاز اللوحي والهاتف: 0 بكسل
• لون الحد الأيمن: # ff7864

إعدادات العمود 2

تباعد

بعد ذلك ، افتح إعدادات العمود 2 وقم بتطبيق قيم الحشو التالية عليه:

• حشوة علوية: 5٪
• حشوة سفلية: 5٪
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

أضف وحدة الصورة النمطية إلى العمود 1

تحميل الشعار

حان الوقت لإضافة وحدات ، بدءًا من Image Module في العمود 1. قم بتحميل شعار من اختيارك وصممه بالشكل الذي تريده.

أضف وحدة نصية إلى العمود 2

أضف محتوى H2

في العمود الثاني ، نضيف وحدة نصية مع بعض محتوى H2 الوصفي.

إعدادات نص H2

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات نص H2 وفقًا لذلك:

• خط العنوان 2: الغاق Garamond
• وزن خط العنوان 2: متوسط
• لون نص العنوان 2: #ffffff
• حجم نص العنوان 2:
  • سطح المكتب والكمبيوتر اللوحي: 40 بكسل
  • الهاتف: 35 بكسل
• ارتفاع خط العنوان 2: 1.3em

أضف الصف رقم 2

هيكل العمود

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

لون الخلفية

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

• لون الخلفية: rgba (10،10،10،0.05)

تحجيم

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات التحجيم كما يلي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض الأقصى: 1680 بكسل

تباعد

قم بإزالة جميع الحشوة الافتراضية العلوية والسفلية أيضًا.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

كل تباعد الأعمدة

بعد ذلك ، افتح الأعمدة بشكل فردي وقم بتطبيق قيم المساحة المتروكة التالية على كل منها:

• حشوة علوية: 5٪
• حشوة سفلية: 5٪
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

العمود 1 الحدود

بعد ذلك ، سنضيف حدًا إلى العمود 1.

• عرض الحد الأيمن:
  • سطح المكتب والكمبيوتر اللوحي: 2 بكسل
  • الهاتف: 0 بكسل
• لون الحد الأيمن: # ff7864

العمود 2 الحدود

نحن نستخدم نفس الحد ، مع بعض القيم المتجاوبة المختلفة ، للعمود الثاني.

• عرض الحد الأيمن:
  • سطح المكتب: 2 بكسل
  • الهاتف والكمبيوتر اللوحي: 0 بكسل
• لون الحد الأيمن: # ff7864

العمود 3 الحدود

وأخيرًا وليس آخرًا ، سنضيف حدًا أيمنًا للعمود الثالث أيضًا.

• عرض الحد الأيمن:
  • سطح المكتب والكمبيوتر اللوحي: 2 بكسل
  • الهاتف: 0 بكسل
• لون الحد الأيمن: # ff7864

أضف وحدة الشريط الجانبي إلى العمود 1

حان الوقت لإضافة الحاجيات قائمة فئة المنشور لدينا! للقيام بذلك ، سنستخدم وحدة الشريط الجانبي المضمنة في Divi. أضف واحدًا إلى العمود الأول للصف.

حدد منطقة التذييل # 1

حدد منطقة التذييل الأولى. هذا مرتبط بقائمة فئة المنشور الأولى التي أنشأناها.

• منطقة القطعة: منطقة التذييل # 1

تخطيط

انتقل إلى علامة تبويب تصميم الوحدة وقم بتعطيل فاصل الحدود.

• إظهار فاصل الحدود: لا

إعدادات النص الأساسي

قم بتعديل إعدادات النص الأساسي أيضًا.

• خط الجسم: مونتسيرات
• وزن خط الجسم: متوسط
• لون النص الأساسي: #ffffff
• حجم النص الأساسي: 13 بكسل

تباعد

وأكمل إعدادات الوحدة بإضافة بعض المساحة المتروكة العلوية والسفلية إلى إعدادات التباعد.

• حشوة علوية: 5٪
• حشوة سفلية: 5٪

استنساخ وحدة الشريط الجانبي مرتين ووضع التكرارات في العمود 2 و 3

بمجرد الانتهاء من وحدة الشريط الجانبي الأولى ، يمكنك استنساخها مرتين ووضع التكرارات في العمود 2 و 3.

تغيير مناطق التذييل

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

• منطقة القطعة: منطقة التذييل # 2

• منطقة القطعة: منطقة التذييل # 3

أضف وحدة الشريط الجانبي إلى العمود 4

الآن ، في العمود الأخير ، نضيف وحدة جديدة للشريط الجانبي.

حدد منطقة التذييل # 4

في هذه الوحدة ، نختار منطقة التذييل الرابعة التي أنشأناها والتي تحتوي على منشوراتنا الأخيرة.

• منطقة القطعة: منطقة التذييل # 4

إعدادات نص العنوان

انتقل إلى علامة تبويب تصميم الوحدة النمطية وقم بتعديل إعدادات نص العنوان على النحو التالي:

• خط العنوان: الغاق Garamond
• لون نص العنوان: #ffffff
• حجم نص العنوان: 30 بكسل

إعدادات النص الأساسي

قم بإجراء بعض التغييرات على إعدادات النص الأساسي أيضًا.

• خط الجسم: مونتسيرات
• وزن خط الجسم: متوسط
• لون النص الأساسي: #dddddd
• حجم النص الأساسي: 13 بكسل

تباعد

وأكمل إعدادات الوحدة ، وهذا البرنامج التعليمي ، عن طريق إضافة بعض الحشو العلوي والسفلي المخصص إلى إعدادات تباعد الوحدة. هذا كل شيء! تأكد من حفظ جميع تغييرات Divi Theme Builder قبل عرض النتيجة على موقع الويب الخاص بك.

• حشوة علوية: 5٪
• حشوة سفلية: 5٪

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

في هذا البرنامج التعليمي ، أوضحنا لك كيفية دمج Divi Theme Builder مع أدوات تذييل WordPress ووحدة Divi Sidebar Module. وبشكل أكثر تحديدًا ، أوضحنا لك كيفية إضافة عناصر واجهة مستخدم قائمة فئة المنشور إلى تذييلك العالمي لتسهيل رحلة تنقل الزائرين. سيساعدك هذا النهج على تصميم عناصر التذييل باستخدام خيارات Divi المضمنة مع الاحتفاظ بقوائم التذييل والأدوات داخل الواجهة الخلفية لـ WordPress. لقد تمكنت من تنزيل ملف JSON مجانًا أيضًا! إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.

إذا كنت حريصًا على معرفة المزيد عن Divi والحصول على المزيد من هدايا Divi المجانية ، فتأكد من الاشتراك في النشرة الإخبارية للبريد الإلكتروني وقناة YouTube حتى تكون دائمًا من أوائل الأشخاص الذين يعرفون هذا المحتوى المجاني ويحصلون عليه.