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

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

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

في البداية شاهد هذا الفيديو الذي يشرح كيفية تقسيم شاشة قالب منشور المدونة الخاص بك باستخدام Divi’s Theme Builder خطوة بخطوة

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

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

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

معاينة

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

سطح المكتب

التليفون المحمول

1. انتقل إلى Divi’s Theme Builder وأضف قالب منشور جديد

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

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

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

استخدم القالب الجديد في جميع مشاركاتك.

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

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

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

2. إنشاء جسم قالب منشور مدونة

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

تباعد

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

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

أضف صف جديد

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 100٪
• العرض الأقصى: 100٪
• الحد الأدنى للارتفاع: 100vh (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)
• أقصى ارتفاع: 100vh (سطح المكتب) ، لا شيء (الجهاز اللوحي والهاتف)

تباعد

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

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

الفائض

وقم بتعيين فائض الصف على مخفي.

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

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

خلفية متدرجة

ثم افتح إعدادات العمود 1 وأضف خلفية متدرجة.

• اللون 1: rgba (255،255،255،0)
• اللون 2: # 000000
• نوع التدرج: خطي
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

نحن نستخدم الصورة المميزة الديناميكية كصورة خلفية للعمود التالي.

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

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

تباعد

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

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

فيضانات

للسماح للأشخاص بالتمرير خلال العمود الثاني ، حيث سيظهر محتوى المنشور ومربع التعليق ، سنقوم بتغيير الفائض الرأسي في إعدادات الرؤية.

• التدفق العمودي: التمرير (سطح المكتب) ، المرئي (الكمبيوتر اللوحي والهاتف)

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

عناصر

حان الوقت لإضافة وحدات نمطية ، بدءًا من وحدة عنوان المنشور في العمود 1. قم بتعطيل خيار الصورة المميزة في إعدادات العناصر.

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

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

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

• مستوى عنوان العنوان: H1
• خط العنوان: Work Sans
• وزن خط العنوان: غامق
• لون نص العنوان: #ffffff
• حجم نص العنوان: 60 بكسل (سطح المكتب) ، 45 بكسل (جهاز لوحي) ، 35 بكسل (هاتف)
• تباعد حرف العنوان: -1 بكسل
• ارتفاع خط العنوان: 1.2em

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

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

• Meta Font: Work Sans
• نمط خط التعريف: أحرف كبيرة
• لون نص التعريف: #eaeaea
• تباعد حروف التعريف: 2 بكسل

تحجيم

بعد ذلك ، قم بتغيير العرض عبر أحجام الشاشات المختلفة.

• العرض: 81٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)

تباعد

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

• الحشو العلوي: 8٪ (الجهاز اللوحي والهاتف فقط)
• الحشو السفلي: 8٪ (الجهاز اللوحي والهاتف فقط)
• الحشو الأيسر: 7٪ (تابلت)، 8٪ (هاتف)
• الحشو الأيمن: 7٪ (تابلت) ، 8٪ (هاتف)

موضع

وأكمل إعدادات الوحدة بتغيير إعدادات الموضع كما يلي:

• الموضع: مطلق (سطح المكتب) ، افتراضي (الجهاز اللوحي والهاتف)
• الموقع: مركز القاع
• تعويض عمودي: 10٪

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

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

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

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

• خط العنوان: Work Sans
• وزن خط العنوان: شبه عريض
• حجم نص العنوان:
  • H2: 40 بكسل
  • H3: 30 بكسل
  • H4: 25 بكسل
  • H5: 16 بكسل
  • H6: 14 بكسل
• تباعد أحرف العنوان: -1 بكسل (H2 و H3 و H4)

فئة CSS

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

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

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

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

أضف وحدة رمز مباشرةً أسفل وحدة محتوى النشر وأضف الأسطر التالية من كود CSS لإنشاء مسافة بين العناوين والفقرات:

<style> .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

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

الوحدة التالية والأخيرة التي نحتاجها في العمود 2 لإكمال هذا البرنامج التعليمي هي وحدة التعليقات. قم بتغيير إعدادات حقول الوحدة وفقًا لذلك:

• لون خلفية الحقول: #ffffff
• لون نص الحقول: # 000000
• تعبئة أعلى الحقول: 30 بكسل
• حشوة أسفل الحقول: 30 بكسل
• مساحة الحقول اليسرى: 30 بكسل
• الحشوة اليمنى للحقول: 30 بكسل
• خط الحقول: Work Sans

• نمط خط الحقول: أحرف كبيرة
• حجم نص الحقول: 15 بكسل
• تباعد الحقول بين الحروف: 3 بكسل
• الزوايا الدائرية للحقول: 10 بكسل (جميع الزوايا)

• قوة الظل الضبابية الحقول: 30 بكسل
• لون ظل مربع الحقول: rgba (0،0،0،0.06)

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

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

• خط عدد التعليقات: Work Sans
• وزن خط عدد التعليقات: غامق

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

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

• مستوى عنوان عنوان النموذج: H3
• خط عنوان النموذج: Work Sans
• وزن خط عنوان النموذج: شبه عريض

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

بعد ذلك ، سنجري بعض التغييرات على إعدادات نص التعريف.

• Meta Font: Work Sans
• وزن الخط الميتا: شبه عريض
• لون نص التعريف: # 000000

إعدادات الزر

بعد ذلك ، سنصمم الزر وفقًا لذلك:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 16 بكسل
• لون نص الزر: #ffffff
• لون خلفية الزر: # 000000
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 100 بكسل

• تباعد حرف الزر: 2 بكسل
• خط الزر: العمل بلا
• نمط خط الزر: أحرف كبيرة

• المساحة المتروكة للزر العلوي: 2٪
• مساحة الزر السفلي: 2٪
• حشوة المؤخرة اليسرى: 5٪
• الحشوة اليمنى للزر: 5٪

تباعد

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

• الهامش الأعلى: 15٪

نص التعليق CSS

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

margin-top: 50px

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

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

معاينة

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

سطح المكتب

التليفون المحمول

افكار اخيرة

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

ملاحظة المحرر: ظهرت نسخة من هذه المقالة في الأصل على elegantthemes.com .