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

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل قوالب نشر مدونة الشريط الجانبي اللاصق مجانًا

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

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

تنزيل مجاني

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

تحميل

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

https://youtu.be/8hTA3ogf3ZQ

اشترك في قناتنا على اليوتيوب

1. انتقل إلى Divi Theme Builder وأضف قالبًا جديدًا

انتقل إلى Divi Theme Builder وأضف قالبًا جديدًا

ابدأ بالانتقال إلى Divi Theme Builder وإضافة قالب جديد.

استخدم القالب في جميع المنشورات

استخدم هذا القالب الجديد في جميع المنشورات.

• الاستخدام في: جميع المنشورات

ابدأ في بناء جسم النموذج

بعد ذلك ، ابدأ في إنشاء نص مخصص لقالب المنشور الخاص بك.

2. ابدأ في بناء نص منشور المدونة (الشريط الجانبي الأيمن)

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

خلفية متدرجة

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

• اللون 1: # 8995ff
• اللون 2: # 6163b5
• اتجاه التدرج: 150 درجة

تباعد

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

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

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

هيكل العمود

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

لون الخلفية

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

• لون الخلفية: # 8995ff

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

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

• الحشوة اليسرى: 3٪
• الحشوة اليمنى: 3٪

الحدود

ثم قم بتضمين بعض الزوايا الدائرية في إعدادات الحدود.

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

مربع الظل

قم بتطبيق ظل الصندوق أيضًا.

• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.08)

تحويل الترجمة

وأكمل إعدادات الصف من خلال تعديل إعدادات ترجمة التحويل وفقًا لذلك:

• اليمين: 50 بكسل

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

محتوى ديناميكي

أضف أول وحدة نصية إلى العمود 1 وحدد المحتوى الديناميكي التالي:

• المحتوى الديناميكي: فئات المشاركة

إعدادات النص

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

• خط النص: العاتا
• لون النص: #ffffff
• حجم النص: 1rem
• تباعد حروف النص: 1 بكسل
• ارتفاع خط النص: 2em

إعدادات نص الارتباط

تغيير لون نص الارتباط أيضا.

• لون نص الرابط: #ffffff

استنساخ وحدة النص مرتين ووضع التكرارات في الأعمدة المتبقية

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

تغيير المحتوى الديناميكي

قم بتغيير المحتوى الديناميكي لكل واحد من التكرارات.

• أول نسخة مكررة: تاريخ نشر المنشور

• التكرار الثاني: عدد التعليقات التي تم نشرها
• بعد: التعليقات
• رابط منطقة التعليقات: نعم

أضف القسم رقم 2

تباعد

أضف قسمًا آخر أسفل القسم السابق مباشرةً. افتح إعدادات القسم وقم بتطبيق قيم المساحة المتروكة العلوية والسفلية التالية:

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

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

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• العرض: 90٪
• العرض الأقصى: 2580 بكسل

تباعد

أضف بعض قيم الهامش المخصصة بعد ذلك.

• الهامش الأعلى: 100 بكسل
• الهامش السفلي:
  • سطح المكتب: 100 بكسل
  • الجهاز اللوحي والهاتف: 50 بكسل

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

تباعد

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

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

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

لون الخلفية

انتقل إلى إعدادات العمود 2 وقم بتطبيق لون خلفية بيضاء.

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

تباعد

قم بتضمين بعض قيم المساحة المتروكة المخصصة أيضًا.

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

الحدود

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

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

مربع الظل

أكمل إعدادات العمود بتطبيق ظل المربع التالي:

• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.08)

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

محتوى H1 الديناميكي

حان الوقت لإضافة الوحدات ، بدءًا من الوحدة النمطية للنص في العمود 1. حدد المحتوى الديناميكي التالي:

• المحتوى الديناميكي: عنوان المشاركة / الأرشيف
• قبل: <H1>
• بعد: </H1>

إعدادات نص H1

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

• خط العنوان: Alata
• حجم نص العنوان:
  • سطح المكتب: 4.8 ريم
  • الجهاز اللوحي: 3.2rem
  • الهاتف: 2.3rem
• تباعد حروف العنوان: -2 بكسل

تباعد

أضف بعض الهامش العلوي والسفلي المخصص أيضًا.

• الهامش الأعلى: 50 بكسل
• الهامش السفلي: 100 بكسل

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

اترك مربع المحتوى فارغًا

أضف وحدة نصية أخرى إلى العمود 1 واترك مربع المحتوى فارغًا.

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

بدلاً من ذلك ، نحن نستخدم Text Module لعرض الصورة الديناميكية المميزة للمنشور كصورة خلفية.

• صورة الخلفية الديناميكية: صورة مميزة
• حجم صورة الخلفية: الغلاف

تباعد

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

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

الحدود

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

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

مربع الظل

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

• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.08)

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

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

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

• خط النص: لاتو
• حجم النص: 1.1rem
• ارتفاع خط النص: 2.3em

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

قم بتغيير خط العنوان أيضًا.

• خط العنوان: Alata

تباعد

وقم بإزالة الهامش السفلي الافتراضي.

• الهامش السفلي: 0 بكسل

فئة CSS

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

• فئة CSS: محتوى ما بعد المدونة

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

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

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

<style>
.blog-post-content p,
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

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

تخطيط

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

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

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

قم بتغيير خط العنوان بعد ذلك.

• خط العنوان: Alata

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

جنبا إلى جنب مع خط الجسم.

• خط الجسم: لاتو

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

إضافة محتوى

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

إنشاء حساب

ربط حساب البريد الإلكتروني الخاص بك بعد ذلك.

إزالة لون الخلفية

ثم قم بإزالة لون الخلفية.

إعدادات الحقول

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

• خط الحقول: Lato

• ظل المربع: الخيار الأول
• لون الظل: rgba (0،0،0،0.06)

إعدادات النص

نحن نغير لون النص في إعدادات النص أيضًا.

• لون النص: غامق

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

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

• مستوى عنوان العنوان: H3
• خط العنوان: Alata
• حجم نص العنوان: 1.5rem

إعدادات الزر

بعد ذلك ، سنقوم بتصميم الزر.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 20 بكسل
• لون نص الزر: #ffffff
• لون التدرج 1: # 8995ff
• لون التدرج 2: # 6163b5
• نوع التدرج: خطي
• اتجاه التدرج: 150 درجة
• عرض حد الزر: 0 بكسل

• نصف قطر حدود الزر: 5 بكسل
• خط الزر: Lato

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشوة اليسرى: 0 بكسل
• الحشوة اليمنى: 0 بكسل

أضف القسم رقم 3

خلفية متدرجة

إلى القسم التالي والأخير. أضف خلفية التدرج التالية:

• اللون 1: # 8995ff
• اللون 2: # 6163b5
• نوع التدرج: خطي
• اتجاه التدرج: 150 درجة

تباعد

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

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

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

هيكل العمود

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

لون الخلفية

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

• لون الخلفية: # 8995ff

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• العرض: 90٪
• العرض الأقصى: 2580 بكسل

تباعد

قم بتعديل قيم المساحة المتروكة وفقًا لذلك:

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

الحدود

ثم أضف بعض الزوايا الدائرية.

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

مربع الظل

سنضيف ظل الصندوق أيضًا.

• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.08)

تحويل الترجمة

وسنكمل إعدادات الصف من خلال تطبيق قيم ترجمة التحويل التالية:

• اليمين: -100 بكسل

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

إعدادات الحقول

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

• لون خلفية الحقول: rgba (255،255،255،0.09)
• لون نص الحقول: #ffffff
• خط الحقول: Lato

• الزوايا الدائرية للحقول: 10 بكسل (جميع الزوايا)
• عرض الحدود السفلى للحقول: 5 بكسل
• لون الحد السفلي للحقول: #ffffff

• ظل مربع الحقول: الخيار الأول
• لون الظل: rgba (0،0،0،0.06)

إعدادات الصورة

قم بتغيير إعدادات الصورة أيضًا.

• زوايا الصورة المستديرة: 100 بكسل (جميع الزوايا)

إعدادات النص

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

• لون النص: فاتح

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

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

• مستوى عنوان عدد التعليقات: H2
• خط عدد التعليقات: Alata
• حجم نص عدد التعليقات: 2rem
• ارتفاع خط عدد التعليقات: 1.4em

إعدادات نص عنوان النموذج

جنبا إلى جنب مع إعدادات نص عنوان النموذج.

• مستوى عنوان عنوان النموذج: H3
• خط عنوان النموذج: Alata

إعدادات نصوص التعريف

ثم ، إعدادات نصوص التعريف.

• خط ميتا: Alata
• حجم نص ميتا: 1.2rem

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

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

• خط التعليق: Lato
• حجم نص التعليق: 1.1rem
• ارتفاع خط التعليق: 2em

إعدادات الزر

وسنقوم بتصميم الزر وفقًا لذلك:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1.1rem
• لون نص الزر: # 8995ff
• لون خلفية الزر: #ffffff
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 5 بكسل

• تباعد حرف الزر: 1 بكسل
• خط الزر: Lato

• زر أعلى الحشوة: 20 بكسل
• زر أسفل الحشوة: 20 بكسل

نص التعليق CSS

أخيرًا وليس آخرًا ، سنكمل إعدادات الوحدة النمطية عن طريق تطبيق السطر التالي من كود CSS على نص التعليق في علامة التبويب المتقدمة:

margin-top: 50px;

3. تطبيق تأثير مثبت على عمود الشريط الجانبي

افتح عمود الشريط الجانبي

الآن وقد اكتمل تصميم قالب منشور المدونة الخاص بنا ، سنقوم بتحويل عمود الشريط الجانبي إلى مثبت باستخدام خيارات Divi اللاصقة. افتح إعدادات العمود 2.

تطبيق تأثير لاصق

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

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

4. ضع الشريط الجانبي على الجانب الأيسر

اسحب عمود الشريط الجانبي أعلى العمود 1

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

تغيير حد عمود الشريط الجانبي

افتح العمود الذي يحتوي على الشريط الجانبي وقم بتعديل إعدادات الحدود وفقًا لذلك:

• عرض الحد الأيمن:
  • سطح المكتب: 5 بكسل
  • الجهاز اللوحي والهاتف: 0 بكسل
• لون الحد الأيمن: # 8995ff
• عرض الحد الأيسر: لا شيء

تطبيق عكس العمود إذا كنت ترغب في ذلك

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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