كيف تعطي صفحات أرشيف Divi الخاصة بك تخطيطًا للبناء

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

قم بتنزيل قالب صفحة الأرشيف مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme المثبت (أو البرنامج المساعد Divi Builder إذا لم تكن تستخدم Divi Theme).
2. نظرًا لأننا سننشئ قالب صفحة أرشيف ، فستحتاج إلى إنشاء بعض منشورات المدونة بالفعل على موقع الويب الخاص بك مع المؤلفين و / أو الفئات و / أو العلامات المعينة لهم إذا كنت تريد رؤية النتائج.

بعد ذلك ، أنت على استعداد للذهاب.

فهم الوحدات والمحتوى الديناميكي المتاح لقوالب صفحة الأرشيف

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

وحدة المدونة

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

هذا هو إخبار Divi بشكل أساسي بعرض المنشورات التي يتم إنشاؤها عادةً عندما يزور المستخدم الصفحة. لذلك مع تعيين الخيار لعرض "منشورات للصفحة الحالية" ، سيتمكن المستخدم من عرض صفحة أرشيف وعرض منشورات تلك الصفحة الحالية بشكل صحيح.

عنوان المشاركة / الأرشيف (محتوى ديناميكي)

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

على سبيل المثال ، يمكنك استخدام وحدة نصية ثم إضافة عنوان صفحة النشر / الأرشيف كمحتوى ديناميكي إلى محتوى النص. ثم يمكنك تصميم العنوان كيفما تشاء.

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

كيفية إنشاء قالب صفحة أرشيف Divi مع تخطيط Masonry

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

إنشاء وتعيين قالب مخصص لجميع صفحات الأرشيف

للبدء ، انتقل إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى Divi> Theme Builder. ثم انقر فوق منطقة المربع الرمادي الفارغة لإضافة قالب جديد.

بعد ذلك ، قم بتعيين القالب لجميع صفحات الأرشيف.

إضافة منطقة نص مخصصة جديدة إلى القالب

لإنشاء جسم مخصص للقالب ، انقر فوق منطقة إضافة نص مخصص ثم حدد "إنشاء جسم مخصص".

ثم اختر خيار "البناء من الصفر".

أضف عنوان أرشيف ديناميكي

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

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

ثم أنشئ صفًا جديدًا مكونًا من عمود واحد داخل القسم العادي.

ثم أضف وحدة نصية إلى الصف.

احذف محتوى النص الافتراضي وانقر على رمز "استخدام المحتوى الديناميكي" وحدد الخيار "عنوان النشر / الأرشيف.

بمجرد وضع عنصر عنوان النشر / الأرشيف في مكانه ، افتح الإعدادات بالنقر فوق رمز الترس.

ثم قم بتحديث مناطق الإدخال قبل وبعد لالتفاف المحتوى في علامة H1 وإضافة جزء إضافي من المحتوى الثابت بعد العنوان الديناميكي على النحو التالي:

قبل:

<h1>

بعد، بعدما:

</h1>

نحتاج إلى تغليف العنوان بعلامة H1 لأغراض تحسين محركات البحث.

أسلوب عنوان الأرشيف الديناميكي

بمجرد وضع المحتوى الديناميكي في مكانه ، يمكننا تصميمه باستخدام ما يلي:

• خط العنوان: موليش
• خط العنوان: الوزن: ثقيل
• محاذاة نص العنوان: الوسط
• لون نص العنوان: # 3a405a
• حجم نص العنوان: 70 بكسل (سطح المكتب) ، 40 بكسل (الجهاز اللوحي والهاتف)

أضف نص عنوان فرعي ديناميكي للأرشيف

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

للقيام بذلك ، قم بإنشاء وحدة نصية جديدة ضمن وحدة النص السابقة بالعنوان.

احذف النص الأساسي الافتراضي وأضف المحتوى الديناميكي لعنوان المنشور / الأرشيف إلى النص الأساسي (تمامًا كما فعلنا سابقًا).

افتح إعدادات عنوان المنشور / الأرشيف وأضف ما يلي قبل المحتوى وبعده.

قبل:

<h3>Here are the articles on 

بعد، بعدما:

 </h3>

الآن سيتم عرض العنوان بما يتماشى مع السطر السابق من النص.

أسلوب عنوان الأرشيف الديناميكي

بمجرد أن يصبح المحتوى الديناميكي في مكانه ، يمكننا التصميم عن طريق تحديث إعدادات H3 التالية:

• خط العنوان 3: Mulish
• محاذاة نص العنوان 3: الوسط

استخدام وحدة المدونة لعرض المنشورات للصفحة الحالية ديناميكيًا

مع وجود عنوان صفحة الأرشيف الديناميكي في مكانه ، نحتاج إلى إضافة وحدة المدونة لعرض المنشورات لصفحة الأرشيف الحالية.

إضافة قسم جديد

قبل أن نضيف وحدة المدونة ، دعنا نضيف قسمًا جديدًا إلى الصفحة.

إضافة صف عمود واحد جديد

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

ثم افتح إعدادات الصف وقم بتحديث ما يلي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 2 ؛
• العرض: 95٪

أضف وحدة مدونة لعرض المنشورات للصفحة الحالية ديناميكيًا

الآن نحن بحاجة إلى إضافة وحدة مدونة إلى الصف.

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

• المشاركات للصفحة الحالية: نعم

وحدة تصميم المدونة

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

• التخطيط: الشبكة

عد الآن إلى علامة تبويب المحتوى وأضف لون الخلفية التالي إلى عناصر الشبكة:

• لون الخلفية: # 3a405a

تحديث أنماط نص العنوان

• خط العنوان: Mulish
• وزن خط العنوان: غامق
• لون نص العنوان: #eee
• حجم نص العنوان: 34 بكسل
• ارتفاع خط العنوان: 1.3em

تحديث أنماط النص الأساسي

• خط الجسم: مونتسيرات
• لون النص الأساسي: #ffffff
• ارتفاع خط الجسم: 2em

تحديث أنماط نصوص التعريف

• خط ميتا: مونتسيرات
• لون نص التعريف: # ffb100

تحديث أنماط ترقيم الصفحات

• وزن خط ترقيم الصفحات: غامق
• لون نص ترقيم الصفحات: # 3a405a

في هذه المرحلة ، لدينا قالب صفحة الأرشيف الخاص بنا قيد التشغيل ، مكتمل بعنوان الصفحة ومشاركات المدونة (في تخطيط البناء) والتي ستعرض المنشورات لصفحة الأرشيف الحالية ديناميكيًا.

النتيجة النهائية

لاختبار النتائج ، قم بزيارة الأنواع المختلفة لصفحات الأرشيف على موقعك.

فيما يلي مثال على قالب صفحة أرشيف فئة يعرض جميع المنشورات الخاصة بفئة "WordPress".

هنا قالب صفحة أرشيف المؤلف يعرض جميع المنشورات لمؤلف معين.

هذه هي صفحة أرشيف الوسم تعرض جميع المنشورات التي تحمل وسم "الأخبار".

وهنا قالب صفحة أرشيف التاريخ يعرض جميع المنشورات لشهر أكتوبر 2019.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!