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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل قالب منشور مدونة مستوحى من الآلة الكاتبة مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

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

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

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

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

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

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

لون الخلفية

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

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

تباعد

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

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

الحدود

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

• عرض الحدود: 100 بكسل (سطح المكتب) ، 20 بكسل (الجهاز اللوحي والهاتف)
• لون الحدود: #ffffff

أضف الصف رقم 1

هيكل العمود

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

تباعد

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

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

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

تحميل الصور

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

تباعد

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

• الهامش الأعلى: -150 بكسل
• الهامش الأيسر: -12vw (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)

أضف الصف رقم 2

هيكل العمود

إلى الصف التالي. استخدم هيكل العمود التالي:

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

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

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

• النص الأساسي: تاريخ النشر بعد

• تنسيق التاريخ: 08/06/1999 m / d / y

إعدادات النص

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

• خط النص: Special Elite
• وزن خط النص: غامق
• لون النص: # 000000
• حجم النص: 1.4rem

استنساخ وحدة النص ثلاث مرات

بمجرد الانتهاء من إعدادات وحدة النص ، يمكنك استنساخ الوحدة بأكملها ثلاث مرات.

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

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

• تكرار # 1: فئات النشر
• تكرار # 2: كاتب المشاركة
• تكرار # 3: عدد التعليقات التي تم نشرها
  • بعد: التعليقات
  • رابط منطقة التعليقات: نعم

ضع وحدتي نص في العمود 2

تابع بوضع آخر وحدتين نصيتين في العمود الثاني للصف ،

تغيير لون نص الارتباط للفئة وعدد التعليقات

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

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

تغيير اتجاه النص للوحدات النمطية في العمود 2

وأكمل وحدات النص في العمود 2 عن طريق تعديل محاذاة النص عبر أحجام الشاشات المختلفة.

• محاذاة النص: يمين (سطح المكتب) ، يسار (كمبيوتر لوحي وهاتف)

أضف الصف رقم 3

هيكل العمود

إلى الصف التالي! استخدم هيكل العمود التالي:

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

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

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

• النص الأساسي: عنوان المشاركة / الأرشيف

• قبل:

• بعد، بعدما:

إعدادات نص H1

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

• خط العنوان: Special Elite
• لون نص العنوان: # 000000
• حجم نص العنوان: 3.5rem (سطح المكتب) ، 2.5rem (الجهاز اللوحي) ، 2rem (الهاتف)
• ارتفاع خط العنوان: 1.5em

تباعد

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

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

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

إعدادات النص

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

• خط النص: Special Elite
• حجم النص: 1.2rem
• ارتفاع خط النص: 2.5em

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

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

• خط العنوان: Special Elite
• لون نص العنوان: # 000000
• حجم نص العنوان 2: 2rem (H2)، 1.9rem (H3)، 1.8rem (H4)، 1.7rem (H5)، 1.6rem (H6)

معرف CSS

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

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

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

أضف عنوان CSS Code

الآن ، لإضافة بعض الهامش المخصص إلى العناوين المختلفة ، سنضيف CSS المخصص التالي إلى وحدة التعليمات البرمجية:

<style>
#post-content-module h2, h3, h4, h5, h6 {
margin-top: 70px;
margin-bottom: 70px;
}
</style>

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

لون الخلفية

أضف قسمًا آخر إلى قالب المنشور ، وافتح إعدادات القسم وقم بتغيير لون خلفية القسم.

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

الحدود

أضف حدًا أيضًا.

• عرض الحدود: 100 بكسل (سطح المكتب) ، 20 بكسل (الجهاز اللوحي والهاتف)
• عرض الحد العلوي: 0 بكسل
• لون الحدود: #ffffff

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

هيكل العمود

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

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

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

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

• لون خلفية الحقول: rgba (0،0،0،0)
• لون نص الحقول: # 000000
• مساحة الحشو السفلية للحقول: 50 بكسل
• خط الحقول: Special Elite
• حجم نص الحقول: 1.2rem

• عرض الحدود السفلى للحقول: 1 بكسل
• لون الحد السفلي للحقول: # 000000

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

جنبًا إلى جنب مع إعدادات نص عدد التعليقات.

• مستوى عنوان عدد التعليقات: H2
• خط عدد التعليقات: Special Elite
• لون نص عدد التعليقات: # 000000
• حجم نص عدد التعليقات: 2rem

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

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

• مستوى عنوان عنوان النموذج: H3
• خط عنوان النموذج: Special Elite
• لون نص عنوان النموذج: # 000000
• حجم نص عنوان النموذج: 1.5rem

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

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

• Meta Font: Special Elite
• لون نص التعريف: # 000000
• حجم نص ميتا: 1.5rem

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

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

• خط التعليق: Special Elite
• حجم نص التعليق: 1.2rem
• ارتفاع خط التعليق: 2.5em

إعدادات الزر

تابع عن طريق تصميم الزر على النحو التالي:

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

• خط الزر: Special Elite

نص التعليق CSS

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

margin-top: 100px;

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

بمجرد إنشاء نص منشور المدونة المخصص للقالب الخاص بك ، يمكنك حفظ جميع التغييرات وعرض النتيجة في منشورات المدونة الخاصة بك!

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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