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

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي. لاحظ كيف ترسل روابط الارتساء ("اترك تعليقًا" و "اشتراك") المستخدمين إلى المنطقة المقابلة في المنشور.

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى Divi Theme Builder الخاص بك ، انتقل إلى Divi Theme Builder.

انقر فوق أيقونة قابلية النقل.

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيظهر قالب القسم في Divi Theme Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

الجزء 1: استيراد قوالب Premade

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

هام: من الأفضل استيراد هذه القوالب إلى موقع اختبار حتى لا تفسد موقعًا مباشرًا.

قم باستيراد قالب موقع الويب الافتراضي

أولاً ، ستحتاج إلى تنزيل Sixth FREE Theme Builder Pack لـ Divi. ثم قم بفك ضغط الملف.

من لوحة معلومات WordPress ، انتقل إلى Divi> Theme Builder. ثم انقر فوق رمز قابلية النقل في الجزء العلوي الأيمن. في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد. ثم اختر ملف json لقالب موقع الويب الافتراضي من المجلد الذي تم تنزيله وانقر فوق الزر استيراد. سيؤدي هذا إلى استيراد قالب موقع ويب افتراضي جديد برأس وتذييل عمومي.

قم باستيراد نموذج النشر

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

قم بتعطيل عام في عنوان قالب المشاركة

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

الآن يجب أن يكون العنوان باللون الرمادي مع تسمية "رأس مخصص". بمجرد أن تصبح جاهزًا ، انقر فوق رمز التحرير لتحرير قالب تخطيط الرأس.

بناء شريط معلومات المنشور الديناميكي

إضافة القسم والصف

داخل محرر تخطيط الرأس ، أنشئ قسمًا عاديًا جديدًا ضمن القسم الحالي الذي يحتوي على الرأس.

ثم أضف صف عمود نصف وربع وربع إلى القسم.

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

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

• لون الخلفية: #eceffe
• الحشو: 10 بكسل للأعلى ، 10 بكسل للأسفل

إعدادات الصف

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

• عرض الحضيض: 1
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

ضمن علامة التبويب خيارات متقدمة ، أضف CSS المخصص التالي إلى العنصر الرئيسي:

display:flex !important;
flex-wrap: nowrap;
align-items: center;

سيؤدي هذا إلى التأكد من تكديس الأعمدة لأسفل على الهاتف المحمول.

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

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

أضف وحدة نصية

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

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

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

افتح إعدادات المحتوى الديناميكي لعنوان المنشور / الأرشيف وأضف ما يلي في مربع الإدخال السابق:

You're Reading: 

ثم احفظ التغييرات.

إعدادات التصميم

ضمن علامة تبويب التصميم ، قم بتخصيص نمط العنوان الديناميكي على النحو التالي:

• خط النص: أوبونتو
• وزن خط النص: متوسط
• لون نص النص: # 121212
• حجم نص النص: 14 بكسل (سطح المكتب) ، 12 بكسل (جهاز لوحي) ، 11 بكسل (هاتف)

إضافة معلومات فئات المشاركة الديناميكية

لإنشاء معلومات فئات المنشور ، قم بتكرار وحدة النص التي تحمل عنوان المنشور.

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

افتح إعدادات المحتوى الديناميكي لفئات النشر وقم بتحديث ما يلي:

• قبل: In
• فاصل الفئات: &

تحديث لون الارتباط

ضمن علامة تبويب التصميم ، قم بتحديث لون الارتباط كما يلي:

• لون نص الرابط: # 4160fd

إضافة معلومات عدد التعليقات الديناميكي

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

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

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

افتح إعدادات عدد التعليقات وأضف ما يلي:

• بعد: تعليق (تعليقات)

إضافة عبارة "اترك تعليق" للحث على اتخاذ إجراء

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

لإنشاء CTA ، قم بتكرار وحدة النص في العمود 2 مع الاحتفاظ بعدد التعليقات.

ثم افتح إعدادات النص للنسخة المكررة وأضف الرابط التالي html إلى النص الأساسي:

<a href="#respond">Leave a Comment</a>

إضافة زر الاشتراك

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

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

ضمن علامة تبويب التصميم ، قم بتحديث أنماط الأزرار على النحو التالي:

• حجم نص الزر: 14 بكسل (سطح المكتب) ، 12 بكسل (الجهاز اللوحي) ، 11 بكسل (الهاتف)
• لون نص الزر: #ffffff
• زر خلفية متدرجة اللون الأيسر: # 7e5ce6
• زر خلفية متدرجة اللون الصحيح: # 25b8ee
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 100 بكسل
• تباعد حرف الزر: 2 بكسل
• خط الزر: أوبونتو
• وزن خط الزر: غامق
• نمط خط الزر: TT
• المساحة المتروكة (سطح المكتب): 10 بكسل للأعلى ، 10 بكسل للأسفل ، 20 بكسل لليسار ، 20 بكسل لليمين
• المساحة المتروكة (الجهاز اللوحي): 6 بكسل للأعلى ، 6 بكسل للأسفل ، 14 بكسل لليسار ، 14 بكسل لليمين

لإضافة رابط الارتساء إلى الزر ، انتقل إلى علامة تبويب المحتوى وأضف عنوان URL التالي لارتباط الزر:

• URL رابط الزر: #subscribe

لن يعمل هذا الارتباط حتى نضيف معرّف CSS مطابقًا إلى القسم الذي يحتوي على نموذج الاشتراك في البريد الإلكتروني في جسم قالب المنشور.

قم بتعطيل العمود 1 على الهاتف المحمول

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

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

إعطاء القسم مركزًا ثابتًا ومؤشر Z مرتفعًا

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

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

• المركز: ثابت
• الفهرس Z: 998

لاحظ أن الفهرس z هو 998 لأنني أريد أن يكون الشريط الثابت فوق بقية المحتوى في المنشور.

تحديث عنوان المقطع Z الفهرس

نظرًا لأن قسم شريط معلومات المنشور يحتوي على فهرس z أعلى ، فسيظهر أعلى القسم الذي يحتوي على الرأس. لإصلاح ذلك ، افتح إعدادات القسم للقسم الذي يحتوي على الرأس وأضف ما يلي:

• الفهرس Z: 999 (أكثر من القسم الذي يحتوي على الشريط)

احفظ التغييرات في محرر التخطيط.

أضف معرف CSS إلى صف الاشتراك بالبريد الإلكتروني في قالب النص الأساسي

لا يزال زر الاشتراك CTA الذي نضيفه إلى الشريط بحاجة إلى نقطة ارتساء أو مكان "للانتقال" إليه في قالب المنشور. نظرًا لأن CTA هي "الاشتراك" ، فنحن بحاجة إليها للانتقال إلى نموذج البريد الإلكتروني opi-in.

للقيام بذلك ، افتح منطقة "نص مخصص" في قالب المنشور في منشئ القوالب.

ابحث عن الصف الذي يحتوي على نموذج الاشتراك بالبريد الإلكتروني أسفل التخطيط وأضف معرف CSS التالي:

• معرف CSS: اشتراك

سيسمح هذا للرابط الرابط لزر الاشتراك بالتمرير إلى هذه المنطقة المحددة من القالب.

بمجرد الانتهاء من ذلك ، احفظ التغييرات التي تم إجراؤها على التخطيط وعلى منشئ السمات.

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

لرؤية النتيجة النهائية ، افتح ببساطة واعرض منشورًا مباشرًا على الموقع. لاحظ كيف ترسل روابط الارتساء ("اترك تعليقًا" و "اشتراك") المستخدمين إلى المنطقة المقابلة في المنشور.

افكار اخيرة

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

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

هتافات!