قم بتنزيل قالب منشور مدونة على الشريط الجانبي على الوجهين مجانًا مع Divi

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

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

تنزيل مجاني

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

تحميل

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

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

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

ابدأ بالذهاب إلى Divi Theme Builder الخاص بك. بمجرد الوصول إلى هناك ، أضف قالبًا جديدًا.

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

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

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

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

حسنًا ، إذن ، ابدأ في بناء جسم القالب.

2. ابدأ في بناء جسم نشر المدونة

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

لون الخلفية

بمجرد دخولك إلى Divi Theme Builder ، ستلاحظ قسمًا. افتح هذا القسم وقم بتغيير لون الخلفية.

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

تباعد

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

• الحشوة العلوية: 50 بكسل (سطح المكتب) ، 20 بكسل (جهاز لوحي) ، 10 بكسل (هاتف)
• الحشو السفلي: 50 بكسل (سطح المكتب) ، 20 بكسل (جهاز لوحي) ، 10 بكسل (هاتف)

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

هيكل العمود

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

تحجيم

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

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

تباعد

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

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

العمود 2

لون الخلفية

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

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

مربع الظل

أضف ظل الصندوق إلى العمود أيضًا.

• مربع قوة طمس الظل: 80 بكسل
• قوة انتشار الظل المربع: -21 بكسل
• لون الظل: rgba (0،0،0،0.08)

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

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

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

• الصورة: صورة مميزة

تحجيم

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

• فرض عرض كامل: نعم

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

عناصر

إلى الوحدة الثانية ، وهي وحدة عنوان المنشور. قم بتعطيل الصورة المميزة في إعدادات العناصر.

• إظهار الصورة المميزة:

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

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

• خط العنوان: Oxygen
• حجم نص العنوان: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 6vw (هاتف)
• ارتفاع خط العنوان: 1.2em

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

قم بإجراء بعض التغييرات على إعدادات نص التعريف بعد ذلك.

• Meta Font: Open Sans
• لون نص التعريف: # ffc023
• حجم نص التعريف: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)

تباعد

قم بتعديل قيم التباعد أيضًا.

• الهامش الأعلى: 100 بكسل
• الهامش الأيسر: 4vw
• الهامش الأيمن: 4vw

العنوان CSS

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

margin-bottom: 20px;

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

إعدادات النص

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

• خط النص: Open Sans
• حجم النص: 0.9vw (سطح المكتب) ، 1.8vw (جهاز لوحي) ، 3vw (هاتف)
• ارتفاع خط النص: 2.2em

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

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

• خط العنوان: الأكسجين
• حجم نص H2: 1.5vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 4vw (هاتف)
• H3، H4، H5 & H6 حجم النص: 1.3vw (سطح المكتب) ، 2.5vw (الجهاز اللوحي) ، 3.5vw (الهاتف)

تباعد

نحن نستخدم بعض قيم الهوامش والحشو المخصصة أيضًا.

• الهامش الأيسر: 4vw
• الهامش الأيمن: 4vw
• الحشوة العلوية: 50 بكسل
• الحشو السفلي: 100 بكسل

فئة CSS

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

• تباعد ما بعد المحتوى

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

أدخل كود CSS

كما هو مذكور في الخطوة السابقة من هذا المنشور ، سنستخدم بعض CSS المخصص لإضافة مسافة بين العناوين والفقرات. لهذا ، سنستخدم Code Module في العمود 2. أدخل الأسطر التالية من كود CSS:

<style>

.post-content-spacing h2,
.post-content-spacing h3,
.post-content-spacing h4,
.post-content-spacing h5,
.post-content-spacing h6 {
margin-top: 50px;
margin-bottom: 50px;
}

.post-content-spacing p {
margin-top: 20px;
margin-bottom: 20px;
}

</style>

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

إضافة محتوى

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

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

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

مجالات

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

• إظهار حقل الاسم الأخير: لا

لون الخلفية

قم بتغيير لون الخلفية وفقًا لذلك:

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

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

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

• خط الحقول: Open Sans
• حجم نص الحقول: 0.8vw (سطح المكتب) ، 1.8vw (الجهاز اللوحي) ، 3vw (الهاتف)

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

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

• خط العنوان: Oxygen
• وزن خط العنوان: غامق
• حجم نص العنوان: 1vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 5vw (هاتف)
• ارتفاع خط العنوان: 1.5em

إعدادات الزر

تواصل عن طريق تصميم الزر.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 0.9vw (سطح المكتب) ، 1.8vw (الجهاز اللوحي) ، 3vw (الهاتف)
• لون نص الزر: # ffc023
• لون خلفية الزر: # f4f4f4
• عرض حد الزر: 0 بكسل

• نصف قطر حدود الزر: 0 بكسل
• خط الزر: الأكسجين

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

مربع الظل

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

• مربع قوة طمس الظل: 80 بكسل
• قوة انتشار الظل المربع: -21 بكسل
• لون الظل: rgba (0،0،0،0.08)

أضف وحدة متابعة الوسائط الاجتماعية إلى العمود 3

أضف الشبكات الاجتماعية المفضلة

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

إعادة تعيين أنماط الشبكة الاجتماعية بشكل فردي

تابع عن طريق إعادة تعيين أنماط العناصر لكل شبكة اجتماعية على حدة.

إعدادات الرمز

بعد ذلك ، ارجع إلى إعدادات الوحدة العامة وقم بتغيير لون الرمز.

• لون الأيقونة: # ffc023

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

عناصر

في العمود 1 ، الوحدة الوحيدة التي نضيفها هي وحدة المدونة. تعطيل المؤلف في إعدادات العناصر.

• عرض المؤلف: لا

تخطيط

بعد ذلك ، انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير التخطيط.

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

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

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

• خط العنوان: Oxygen
• وزن خط العنوان: غامق
• حجم نص العنوان: 1vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 5vw (هاتف)
• ارتفاع خط العنوان: 1.5em

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

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

• خط النص الأساسي: Open Sans
• حجم نص الجسم: 0.7vw (سطح المكتب) ، 1.8vw (الجهاز اللوحي) ، 3vw (الهاتف)
• ارتفاع خط الجسم: 2.2em

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

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

• Meta Font: Open Sans
• لون نص التعريف: # ffc023
• حجم نص التعريف: 0.8vw (سطح المكتب) ، 1.8vw (جهاز لوحي) ، 3vw (هاتف)

الحدود

قم بإزالة الحدود الافتراضية للوحدة أيضًا.

• عرض حدود تخطيط الشبكة: 0 بكسل

مربع الظل

واستخدم ظل الصندوق الخفيف.

• مربع قوة طمس الظل: 80 بكسل
• قوة انتشار الظل المربع: -21 بكسل
• لون الظل: rgba (0،0،0،0.08)

الرؤية

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

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

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

تغيير الرؤية

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

3. حفظ جميع تغييرات منشئ السمات ونتائج المعاينة

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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