كيفية تضمين شريط جانبي ثابت كامل الارتفاع في قالب منشور المدونة الخاص بك

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

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

هيا بنا نبدأ!

معاينة

قبل أن نبدأ ، دعنا نلقي نظرة على الشريط الجانبي الثابت ذو الارتفاع الكامل.

سطح المكتب

متحرك

قم بتنزيل قالب الشريط الجانبي الثابت ذو الارتفاع الكامل مجانًا

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

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

تنزيل مجاني

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

تحميل

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

إنشاء أداة الشريط الجانبي

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

افتح منشئ القطعة

انقر فوق "المظهر" وحدد "الأدوات".

إضافة عناصر إلى عنصر واجهة الشريط الجانبي

اسحب عنصري "المشاركات الأخيرة" و "الفئات" إلى أداة الشريط الجانبي.

ضبط إعدادات العنصر في القطعة

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

• المشاركات الأخيرة العنوان: قراءة المزيد:
• عنوان الفئات: تصفح

2. ابدأ مع منشئ القوالب

افتح منشئ القوالب / أضف قالبًا جديدًا

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

اضبط إعدادات القالب

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

إضافة نص مخصص

ثم ، انقر فوق "إضافة نص مخصص".

حدد إنشاء جسم مخصص

سنقوم بإعادة إنشاء هذا النموذج من البداية ، لذا انطلق واختر "إنشاء جسم مخصص".

بناء من الصفر

بمجرد الدخول إلى المنشئ المرئي ، حدد خيار الإنشاء من الصفر مرة أخرى.

أعد إنشاء النموذج باستخدام شريط جانبي ثابت بارتفاع كامل

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

خلفية

افتح القسم الموجود داخل محرر القالب وأضف خلفية متدرجة.

• تدرج الخلفية
  • اللون 1: أبيض #ffffff
  • اللون 2: رمادي فاتح #eaeaea

تباعد

أضف بعض الحشو أيضًا.

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

أضف صفًا جديدًا

هيكل العمود

أضف الآن صفًا بهيكل عمود 3/4 - 1/4.

تحجيم

اضبط حجم الصف على النحو التالي.

• عرض مزراب مخصص: 2
• عرض:
  • سطح المكتب والجهاز اللوحي: 90٪
  • الهاتف: 100٪
• عرض ماكس:
  • سطح المكتب: 1920 بكسل
• ارتفاع الحد الأدنى: 100vh

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

تباعد

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

• الحشو الأيسر والأيمن
  • الجهاز اللوحي: 2٪
  • الهاتف: 8٪

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

خلفية

ثم أضف لون الخلفية إلى العمود 2.

• لون الخلفية: أبيض #ffffff

تباعد

قم بتضمين بعض المسافات أيضًا.

• الحشو الأيسر والأيمن
  • سطح المكتب: 3٪
  • الجهاز اللوحي والهاتف: 14٪

الحدود

امنح العمود الزوايا الدائرية بعد ذلك.

• زوايا مدورة
  • الجهاز اللوحي وسطح المكتب: 15 بكسل

لغة تنسيق ويب حسب الطلب

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

• العنصر الرئيسي
  • أقل ارتفاع: 100٪

min-height: 100%;

موقع

أخيرًا وليس آخرًا ، لإنشاء تأثير الشريط الجانبي الثابت ، أضف موضعًا ثابتًا إلى العمود.

• موقع
  • سطح المكتب: ثابت
  • الجهاز اللوحي والهاتف: افتراضي
• الموقع: أعلى اليمين

أضف وحدة عنوان المشاركة # 1

عناصر

حان الوقت لإضافة وحدات! ابدأ بوحدة عنوان المشاركة الأولى في العمود 1 وقم بتمكين العنوان فقط.

• عنوان العرض: نعم

صورة خلفية ديناميكية

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

نص العنوان

نمط إعدادات نص العنوان.

• خط العنوان: باي جمجوري
• نمط خط العنوان: أحرف كبيرة
• لون نص العنوان: # e98074
• حجم نص العنوان:
  • سطح المكتب: 45 بكسل
  • الجهاز اللوحي: 35 بكسل
  • الهاتف: 25 بكسل
• تباعد حروف العنوان: 3 بكسل
• ارتفاع خط العنوان: 1.3em

تباعد

ثم أضف بعض المساحة المتروكة العلوية والسفلية المخصصة.

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

الحدود

قم بتضمين بعض الزوايا الدائرية أيضًا.

• جميع الزوايا: 15 بكسل

العنوان CSS

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

background-color: rgba(255,255,255,0.56);
padding-top: 2%;
padding-bottom: 2%;

أضف وحدة عنوان المشاركة رقم 2

عناصر

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

• ميتا
• مؤلف
• فئات المشاركة

نص ميتا

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

• الخط: باي جمجوري
• الوزن: متوسط
• اللون: رمادي # 8e8d8a
• مقاس
  • سطح المكتب: 20 بكسل
  • الجهاز اللوحي والهاتف: 15 بكسل
• تباعد الأحرف: 2 بكسل

تحجيم

اضبط الحجم أيضًا.

• العرض: 90٪
• محاذاة الوحدة: المركز

تباعد

أكمل إعدادات هذه الوحدة ببعض المسافات.

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

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

خلفية

أضف وحدة محتوى منشور بخلفية بيضاء بعد ذلك.

• لون الخلفية: أبيض #ffffff

نص

الآن ، نمط النص الأساسي.

• الخط: Lato
• اللون: رمادي # 8e8d8a
• الحجم: 16 بكسل

نص العنوان

تابع عن طريق تصميم جميع أنماط نص العنوان.

• H1
  • الخط: باي جمجوري
  • الوزن: متوسط
  • اللون: كورال # e98074
  • مقاس
    • سطح المكتب: 45 بكسل
    • الجهاز اللوحي: 33 بكسل
    • الهاتف: 30 بكسل
  • تباعد الأحرف: 1 بكسل
• H2
  • الخط: باي جمجوري
  • الوزن: متوسط
  • اللون: كورال # e98074
  • مقاس
    • سطح المكتب: 35 بكسل
    • الجهاز اللوحي والهاتف: 25 بكسل
  • تباعد الأحرف: 1 بكسل
• H3
  • الخط: باي جمجوري
  • الوزن: عادي
  • اللون: رمادي غامق # 606060
  • مقاس
    • سطح المكتب: 25 بكسل
    • الجهاز اللوحي والهاتف: 22 بكسل
  • تباعد الأحرف: 1 بكسل
• H4
  • الخط: باي جمجوري
  • الوزن: عادي
  • اللون: رمادي غامق # 606060
  • مقاس
    • سطح المكتب: 22 بكسل
    • الجهاز اللوحي: 20 بكسل
    • الهاتف: 18 بكسل
  • تباعد الأحرف: 1 بكسل
• H5
  • الخط: باي جمجوري
  • الوزن: متوسط
  • اللون: رمادي غامق # 606060
  • الحجم: 16 بكسل
  • تباعد الأحرف: 1 بكسل
• H6
  • الخط: باي جمجوري
  • الوزن: عادي
  • اللون: رمادي غامق # 606060
  • الحجم: 16 بكسل
  • تباعد الأحرف: 1 بكسل

تباعد

أضف بعض إعدادات التباعد أيضًا.

• الهامش العلوي: 40 بكسل
• حشوة علوية: 10٪
• حشوة سفلية: 10٪
• الحشوة اليسرى: 10٪
• الحشوة اليمنى: 10٪

الحدود

أخيرًا وليس آخرًا ، أضف بعض الزوايا الدائرية.

• حدود مستديرة: 15 بكسل

إضافة وحدة التعليقات

عناصر

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

• زر الرد
• تعليق العد

مجالات

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

• لون الخلفية: رمادي فاتح # f7f7f7
• لون النص: رمادي # 8e8d8a
• الخط: باي جمجوري
• حجم النص: 17 بكسل
• الزوايا الدائرية: 15 بكسل

نص عدد التعليقات

نمط نص عدد التعليقات أيضا.

• مستوى العنوان: H3
• الخط: باي جمجوري
• اللون: كورال # e98074
• الحجم: 22 بكسل
• تباعد الأحرف: 1 بكسل

نص عنوان النموذج

ثم عنوان النموذج.

• مستوى العنوان: H3
• الخط: باي جمجوري
• اللون: كورال # e98074
• الحجم: 18 بكسل
• تباعد الأحرف: 1 بكسل

نص ميتا

صمم نصوص التعريف أيضًا.

• الخط: باي جمجوري
• اللون: # 606060
• الحجم: 14 بكسل
• تباعد الأحرف: 1 بكسل

نص التعليق

لا تنس نص التعليق.

• الخط: باي جمجوري
• الحجم: 1 بكسل

زر

الآن نمط الأزرار.

• الأنماط المخصصة
• حجم النص: 18 بكسل
• لون النص: أبيض #ffffff
• لون الخلفية: مرجاني # e98074
• نصف قطر حدود الزر: 15 بكسل
• خط الزر: باي جمجوري

تحجيم

اضبط حجم الصف أيضًا.

• العرض: 90٪

تباعد

وكذلك إعدادات التباعد.

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

إضافة وحدة الشخص

نص

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

• الاسم: مؤلف المنشور الديناميكي
• قبل: بقلم:

نص العنوان

في علامة تبويب التصميم ، حدد نمط نص العنوان كما يلي:

• مستوى العنوان: H4
• الخط: باي جمجوري
• اللون: كورال # e98074
• الحجم: 2vh
• تباعد الأحرف: 2 بكسل

تحجيم

اضبط الحجم بعد ذلك.

• ارتفاع الحد الأدنى:
  • سطح المكتب: 3vh
  • الجهاز اللوحي والهاتف: تلقائي
• اقصى ارتفاع:
  • سطح المكتب: 3vh
  • الجهاز اللوحي والهاتف: تلقائي

تباعد

أضف بعض التباعد المخصص أيضًا.

• الهامش العلوي
  • سطح المكتب: 6vh
  • الجهاز اللوحي والهاتف: 10vh

إضافة وحدة صورة

صورة

الآن ، أضف وحدة صورة. حدد المحتوى الديناميكي لصورة المؤلف.

• الصورة: صورة الملف الشخصي الديناميكية للمؤلف

انتقام

انتقل إلى علامة تبويب التصميم واختر المحاذاة التالية:

• محاذاة الصورة: يسار

تحجيم

اضبط حجم الوحدة التالية.

• عرض ماكس: 15vh
• محاذاة الوحدة: يسار
• اقصى ارتفاع
  • سطح المكتب: 15vh

الحدود

أخيرًا ، أضف بعض الزوايا الدائرية إلى إعدادات الحدود.

• الزوايا المستديرة: 15 بكسل

إضافة وحدة الشريط الجانبي

المحتوى

حان الوقت الآن لإضافة أدوات الشريط الجانبي باستخدام وحدة الشريط الجانبي.

• منطقة القطعة: الشريط الجانبي

تخطيط

اضبط التخطيط أولاً.

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

نص العنوان

قم بتعديل إعدادات نص العنوان بعد ذلك.

• الخط: باي جمجوري
• الوزن: متوسط
• اللون: كورال # e98074
• الحجم: 2vh
• تباعد الأحرف: 2 بكسل

نص أساسي

تواصل مع النص الأساسي.

• الخط: باي جمجوري
• الوزن: خفيف
• اللون: رمادي غامق # 7f7f7f
• لون التحويم: كورال # e98074
• الحجم: 1.5vh
• تباعد الأحرف: 1 بكسل
• ارتفاع الخط: 1.8em

تحجيم

اضبط حجم الوحدة أيضًا.

• ارتفاع الحد الأدنى
  • سطح المكتب: 12vh
  • الجهاز اللوحي والهاتف: تلقائي
• اقصى ارتفاع
  • سطح المكتب: 12vh
  • الجهاز اللوحي والهاتف: تلقائي

تباعد

لا تنس أن تضيف بعض المسافات.

• الحشو العلوي
  • سطح المكتب: 1vh
  • الجهاز اللوحي والهاتف: 3vh

لغة تنسيق ويب حسب الطلب

أخيرًا وليس آخرًا ، قم بتضمين بعض أسطر تعليمات CSS البرمجية في علامة التبويب "خيارات متقدمة".

• القطعة: الحشو السفلي: 0vh ؛

padding-bottom: 0vh;

• العنوان: padding-bottom: 2vh ؛

padding-bottom: 2vh;

أضف البريد الإلكتروني Optin

نص

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

• العنوان: التحديثات
• الزر: اشتراك

حساب البريد الإلكتروني

قم بتوصيل بريدك الإلكتروني بالنموذج التالي.

• مزود الخدمة: مزود البريد الإلكتروني الخاص بك
• القائمة: القائمة التي اخترتها

مجالات

نحن نستخدم فقط حقل الاسم الأول في إعدادات الحقول.

• إظهار حقل الاسم الأول

خلفية

ثم قم بإيقاف تشغيل الخلفية الافتراضية.

• استخدام لون الخلفية: لا

تخطيط

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

• التخطيط: الجسم في الأعلى ، النموذج في الأسفل
• الاسم الأول Fullwidth: لا
• عرض البريد الإلكتروني بالكامل: لا

مجالات

بعد ذلك ، قم بتصميم الحقول على النحو التالي:

• لون الخلفية: Light Grey # f7f7f7
• لون النص: # 606060
• الحشوة العلوية والسفلية: 1vh
• الحشوة اليسرى: 1vh
• الخط: باي جمجوري
• حجم النص: 1.5vh
• تباعد الأحرف: 1 بكسل
• الزوايا الدائرية: 15 بكسل

نص العنوان

صمم نص العنوان أيضًا.

• مستوى العنوان: H4
• الخط: باي جمجوري
• اللون: كورال # e98074
• الحجم: 2vh
• تباعد الأحرف: 2 بكسل
• ارتفاع الخط: 1em

زر

ثم الزر.

• الأنماط المخصصة
• حجم النص: 1.5vh
• لون النص: أبيض #ffffff
• لون الخلفية: مرجاني # e98074
• نصف قطر الحدود: 15 بكسل
• تباعد الأحرف: 2 بكسل
• الخط: باي جمجوري
• الحشوة العلوية والسفلية: 1vh

تباعد

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

• الحشو العلوي
  • سطح المكتب والكمبيوتر اللوحي: 0vh
• حشوة سفلية
  • سطح المكتب: 2vh
  • الجهاز اللوحي والهاتف: 6vh
• الحشو الأيسر والأيمن
  • سطح المكتب والكمبيوتر اللوحي: 0vh

معاينة

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

سطح المكتب

متحرك

هذا هو التفاف!

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

هل أنت شريط جانبي أو ليس لديك نوع من الشريط الجانبي؟ أخبرنا في التعليقات إذا كان لديك أي أفكار أو أسئلة!