كيفية تقسيم شاشة قالب منشور المدونة الخاص بك باستخدام Divi's Theme Builder

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

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

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

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

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

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

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

تباعد

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

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

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

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 100٪
• العرض الأقصى: 100٪
• الحد الأدنى للارتفاع: 100 فولت في الساعة (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)
• أقصى ارتفاع: 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 يمكنك تنزيله مجانًا أيضًا! إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.

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