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

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

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

لنبدأ الآن!

نظرة خاطفة

فيما يلي نظرة سريعة على قالب منشور المدونة الذي سننشئه في هذا البرنامج التعليمي.

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

يتمتع!

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

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القالب إلى موقع الويب الخاص بك ، ستحتاج إلى الانتقال إلى Divi Theme Builder واستخدام خيار قابلية النقل لاستيراد ملف .json إلى أداة إنشاء السمات.

ما هو قالب منشور مدونة ولماذا تحتاج واحدًا؟

قالب منشور المدونة هو قالب على مستوى الموقع يُستخدم لجميع (أو بعض) منشورات المدونة الفردية الخاصة بك على موقع الويب الخاص بك. إنه قالب مصمم مسبقًا تم إنشاؤه بمحتوى ديناميكي بحيث ترث أي مشاركة جديدة أو موجودة تلقائيًا تخطيط وتصميم القالب المعين.

هناك عدة أسباب مقنعة لاستخدام قالب منشور مدونة. السبب الرئيسي لاستخدام قالب منشور مدونة هو تبسيط عملية التدوين. يمكن أن يؤدي وجود قالب جاهز مصمم بالفعل لمشاركاتك إلى تسريع عملية الإنشاء بشكل كبير من خلال التخلص من الحاجة إلى تصميم عناصر المنشور أثناء التنقل وترك المدونين مع مزيد من الوقت للقيام بما يفعلونه بشكل أفضل - كتابة المحتوى. لكن هذا ليس كل شيء! يمكن أن يتضمن قالب منشور المدونة عناصر إضافية (مثل التعليقات وأزرار المشاركة واشتراكات البريد الإلكتروني) في المنشور من أجل زيادة تفاعل المستخدم وزيادة التحويلات.

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

قبل أن ننتقل إلى بناء قالب منشور مدونة معًا ، دعنا أولاً ننتقل إلى بعض الأدوات المتاحة لإنشاء قالب.

اللبنات الأساسية لقالب منشور مدونة

يمكن أن تختلف قوالب منشور المدونة وفقًا لاحتياجات المدونة. لكن عادةً ما يتكون قالب منشور المدونة من البنية التالية:

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

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

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

• وحدات Divi المصممة لقوالب النشر
  • وحدة التنقل اللاحقة - مفيدة في توفير روابط التنقل إلى المشاركات السابقة والتالية.
  • Post Slider Module - مفيد في توفير معرض للمشاركات مرتبة حسب الأحدث أو حسب الفئة.
  • وحدة عنوان المنشور - تساعد في عرض عنوان المنشور مع صورة مميزة في وحدة نمطية واحدة ملائمة.
  • وحدة محتوى النشر - وحدة ضرورية لقالب المنشور لعرض محتوى المنشور. تتضمن وحدة محتوى النشر أيضًا خيارات التصميم التي يمكن استخدامها كتصميم افتراضي لمحتوى المنشور على مستوى الموقع.

• تتوفر عناصر المحتوى الديناميكي لقالب النشر في جميع وحدات Divi
  • عنوان المشاركة / الأرشيف
  • مقتطفات بعد
  • التاريخ الحالي
  • سطر الوصف للموقع
  • المؤلف السيرة الذاتية
  • كاتب المشاركة
  • رابط آخر
  • فئات المشاركة
  • عدد التعليقات بعد
  • تاريخ النشر بعد
  • الحقول المخصصة

الآن بعد أن أصبحت لديك فكرة جيدة عن الأدوات المتاحة ، دعنا ننتقل إلى كيفية إنشاء قالب منشور مدونة في Divi من البداية.

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme (أو Divi Builder Plugin إذا لم تكن تستخدم Divi Theme).
2. تأكد من أن لديك على الأقل عددًا قليلاً من منشورات المدونة التي تم إنشاؤها لعرض نتائج قالب منشور المدونة الذي سنقوم ببنائه. تأكد من تضمين أكبر قدر ممكن من المحتوى في كل منشور (على سبيل المثال ، الصور المميزة ، والفئات ، وما إلى ذلك) حتى يكون لديك مثال جيد على منشور حقيقي.

بعد ذلك ، تكون جاهزًا لبدء إنشاء قالب جديد لمنشورات مدونتك في Divi.

كيفية إنشاء قالب منشور مدونة في Divi Theme Builder

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

مثل جميع القوالب ، يتم إنشاء قالب منشور مدونة في Divi Theme Builder والذي سيسمح لك ببناء القالب بالكامل من البداية بقوة Divi Builder.

إنشاء قالب جديد

من لوحة معلومات WordPress ، انتقل إلى Divi> Theme Builder. ثم انقر فوق المربع الفارغ "إضافة نموذج جديد".

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

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

إنشاء مخطط منطقة الجسم المخصص

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

حدد خيار "البناء من الصفر" لبدء عملية البناء.

بناء مخطط الجسم المخصص لقالب المنشور

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

للبدء ، أضف صف عمود واحد إلى القسم العادي الافتراضي.

بعد ذلك ، قبل إضافة وحدة نمطية ، قم بتحديث إعدادات القسم بتصميم الخلفية وبعض الحشو كما يلي:

• خلفية متدرجة اللون الأيسر: # 8624e1
• تدرج الخلفية اللون الصحيح: # 3607a6
• اتجاه التدرج: 130 درجة
• موقف البداية: 25٪
• صورة الخلفية: إدراج الصورة
• استخدام تأثير المنظر: نعم
• الحشو: 7vw أعلى ، 7vw أسفل

إنشاء عنوان عنوان المشاركة كمحتوى ديناميكي مع وحدة النص

داخل صف العمود الواحد ، أضف وحدة نصية.

ثم انقر فوق رمز المحتوى الديناميكي عند التمرير فوق منطقة محتوى الجسم.

حدد عنصر عنوان النشر / الأرشيف من القائمة.

ثم ، انقر فوق رمز الترس في عنصر عنوان النشر / الأرشيف وقم بتحديث مناطق الإدخال قبل وبعد الإدخال بعلامات h1 على النحو التالي:

قبل:

<h1>

بعد، بعدما:

</h1>

الآن صمم العنوان بإعدادات التصميم التالية:

• خط النص: Roboto
• حجم نص النص: 16 بكسل
• ارتفاع خط النص: 1.8em
• محاذاة النص: مركز
• خط العنوان: Roboto
• وزن خط العنوان: غامق
• حجم نص العنوان: 60 بكسل (سطح المكتب) ، 40 بكسل (الجهاز اللوحي) ، 32 بكسل (الهاتف)
• ارتفاع خط العنوان: 1.2em

إضافة الصورة المميزة باستخدام وحدة صورة كمحتوى ديناميكي

بعد وضع قسم العنوان في مكانه ، دعنا نضيف الصورة المميزة لقالب المنشور. للقيام بذلك ، أضف قسمًا عاديًا آخر بتخطيط عمود ثلثي وثلث.

ثم أضف وحدة صورة إلى العمود الأيسر.

ثم أضف عنصر المحتوى الديناميكي للصورة المميز للصورة.

تصميم وحدة الصورة

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

• محاذاة الصورة: المركز
• الهامش: -9vw (سطح المكتب) ، 0vw (جهاز لوحي)
• الزوايا الدائرية: 8 بكسل
• Box Shadow: انظر لقطة الشاشة
• مربع الظل الرأسي: 16 بكسل
• مربع قوة طمس الظل: 96 بكسل
• قوة انتشار الظل المربع: -24 بكسل

أضف السيرة الذاتية لمؤلف ومؤلف المنشور إلى وحدة Blurb النمطية كمحتوى ديناميكي

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

في إعدادات الدعاية ، مرر مؤشر الماوس فوق مربع إدخال العنوان وانقر فوق رمز المحتوى الديناميكي. ثم أضف عنصر المحتوى الديناميكي لـ Post Author لمحتوى العنوان.

بعد ذلك ، افتح إعدادات Post Author وقم بتحديث الإدخال السابق على النحو التالي:

• قبل: بقلم

بالنسبة لمحتوى النص الخاص بالوحدة النمطية للدعاية والإعلان ، انقر فوق رمز المحتوى الديناميكي وحدد عنصر المحتوى الديناميكي "المؤلف الحيوي" من القائمة.

بالنسبة لصورة الوحدة النمطية للدعاية والإعلان ، أضف "صورة ملف تعريف المؤلف المنشور" كمحتوى ديناميكي.

مؤلف منشور التصميم والوحدة النمطية للدعاية الحيوية

الآن قم بتحسين تصميم الصورة على النحو التالي:

• وضع الصورة / الرمز: اليسار
• الزوايا الدائرية للصورة: 50٪
• خط العنوان: Roboto
• وزن خط العنوان: غامق
• ارتفاع خط العنوان: 1.3em
• خط الجسم: لاتو
• ارتفاع خط الجسم: 1.4em
• عرض الصورة: 50 بكسل

أضف فئات النشر إلى الوحدة النمطية Blurb كمحتوى ديناميكي

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

ثم قم بتحديث دعاية مغالى فيها بأيقونة على النحو التالي:

• استخدام الأيقونة: نعم
• الرمز: انظر لقطة الشاشة

وحدة الدعاية لفئة التصميم

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

• لون الأيقونة: #dddddd
• وضع الصورة / الرمز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 20 بكسل
• خط العنوان: Roboto
• وزن خط العنوان: متوسط
• لون نص العنوان: # f92c8b
• حجم نص العنوان: 16 بكسل
• ارتفاع خط العنوان: 20 بكسل
• المساحة المتروكة: 16 بكسل يسار

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

لإضافة عدد تعليقات المنشور لقالب منشور المدونة ، قم بتكرار الوحدة النمطية التي تم إنشاؤها للتو.

ثم قم بتحديث محتوى العنوان بعنصر المحتوى الديناميكي لـ Post Comment Count.

نظرًا لأن عدد التعليقات لا يعرض سوى رقمًا ، فنحن بحاجة إلى استكمال الرقم ببعض نص الإضافة بعد الرقم. للقيام بذلك ، افتح إعدادات Post Comment Count وقم بتحديث ما يلي:

بعد: التعليق (التعليقات)

ثم قم بتحديث الأيقونة على النحو التالي:

• استخدام الأيقونة: نعم
• الرمز: انظر لقطة الشاشة

أضف تاريخ نشر المنشور إلى الوحدة النمطية Blurb كمحتوى ديناميكي

للحصول على آخر جزء من البيانات الوصفية ، قم بتكرار الوحدة النمطية مع عدد التعليقات. ثم قم بتحديث محتوى العنوان بعنصر المحتوى الديناميكي "تاريخ النشر".

نصيحة: يمكنك دائمًا فتح إعدادات العنصر الديناميكي لتاريخ النشر لتغيير تنسيق عرض التاريخ.

ثم قم بتحديث الأيقونة على النحو التالي:

• استخدام الأيقونة: نعم
• الرمز: انظر لقطة الشاشة

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

مع وجود عنوان المنشور والصورة المميزة ومؤلف المنشور والبيانات الوصفية ، نحن جاهزون لمحتوى المنشور الرئيسي.

أضف صفًا جديدًا بتخطيط من عمود واحد.

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

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

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

• زوايا الصورة المستديرة: 8 بكسل
• ظل مربع الصورة: انظر الصورة
• مربع الظل الرأسي: 16 بكسل
• مربع قوة طمس الظل: 96 بكسل
• قوة انتشار الظل المربع: -24 بكسل

بعد ذلك ، نحتاج إلى تعيين التصميم لجميع عناصر محتوى النص الممكنة عندما يقوم المستخدم بإنشاء منشور مدونة باستخدام المحرر الافتراضي. افتح مفتاح تبديل مجموعة خيارات النص للكشف عن 5 علامات تبويب مختلفة لأنواع تصميمات النص - الفقرة والرابط والقائمة غير المرتبة والقائمة المرتبة والاقتباس المحظور.

ثم قم بتحديث الخيارات التالية تحت كل علامة تبويب.

استمر في تحديث إعدادات نص العنوان لكل مستوى من مستويات العناوين - h1 ، h2 ، h3 ، h4 ، h5 ، h6.

• خط العنوان: Roboto
• وزن خط العنوان: غامق
• حجم نص العنوان (h1): 56 بكسل (سطح المكتب) ، 42 بكسل (الجهاز اللوحي) ، 28 بكسل (الهاتف)
• حجم نص العنوان (h2): 45 بكسل (سطح المكتب) ، 35 بكسل (الجهاز اللوحي) ، 24 بكسل (الهاتف)
• حجم نص العنوان (h3): 40 بكسل (سطح المكتب) ، 30 بكسل (الجهاز اللوحي) ، 20 بكسل (الهاتف)
• حجم نص العنوان (h4): 32 بكسل (سطح المكتب) ، 24 بكسل (الجهاز اللوحي) ، 18 بكسل (الهاتف)
• حجم نص العنوان (h5): 28 بكسل (سطح المكتب) ، 20 بكسل (كمبيوتر لوحي) ، 16 بكسل (هاتف)
• حجم نص العنوان (h6): 24 بكسل (سطح المكتب) ، 18 بكسل (الكمبيوتر اللوحي) ، 14 بكسل (الهاتف)

أضف وحدة ملاحة المشاركة

ضمن وحدة محتوى النشر ، أضف صفًا جديدًا مكونًا من عمود واحد مع وحدة تنقل المشاركة.

قم بتحديث نص الارتباط السابق والتالي كما يلي:

• الارتباط السابق: السابق:٪ title
• الارتباط التالي: التالي:٪ title

ثم قم بتحديث تصميم التنقل بعد ذلك على النحو التالي:

• خط الروابط: Roboto
• وزن خط الروابط: غامق
• لون نص الروابط: # f92c8b

إضافة قسم الوظائف ذات الصلة

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

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

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

قم بتحديث محتوى النص بعنوان H2 التالي:

<h2>You May Also Like...</h2>

ثم قم بتحديث تصميم نص العنوان كما يلي:

• خط العنوان 2: Roboto
• حجم نص العنوان 2: 48 بكسل (سطح المكتب) ، 38 بكسل (الجهاز اللوحي) ، 28 بكسل (الهاتف)

الآن بعد أن أصبح عنواننا في مكانه ، نحن مستعدون لإضافة منشوراتنا ذات الصلة.

إضافة المنشورات ذات الصلة باستخدام وحدة المدونة مع مشاركات من الفئة الحالية

ضمن وحدة النص التي تحتوي على العنوان ، أضف وحدة مدونة جديدة.

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

• عدد الوظائف: 3
• الفئات المشمولة: الفئة الحالية
• طول المقتطف: 120
• إظهار المؤلف: NO
• عرض الفئات: NO
• إظهار ترقيم الصفحات: NO

أهم جانب في هذه الإعدادات هو اختيار "الفئة الحالية". سيسمح هذا لقالب المنشور بسحب أحدث المشاركات التي تشترك في نفس فئة المنشور الحالي.

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

• التخطيط: الشبكة
• خط العنوان: Roboto
• حجم نص العنوان: 14 بكسل
• ارتفاع خط العنوان: 1.3em
• خط الجسم: لاتو
• خط التعريف: Lato
• لون نص التعريف: # f92c8b
• حجم نص التعريف: 13 بكسل
• الزوايا الدائرية لتخطيط الشبكة: 20 بكسل

استمر في تحديث التصميم بظل الصندوق كما يلي:

• عرض حدود تخطيط الشبكة: 0 بكسل
• Box Shadow: انظر لقطة الشاشة
• مربع الظل الرأسي: 16 بكسل
• مربع قوة طمس الظل: 96 بكسل
• قوة انتشار الظل المربع: -24 بكسل

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

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

وحدة تعليقات التصميم

كل ما تبقى للقيام به الآن هو تخصيص تصميم وحدة التعليقات لتتناسب مع القالب الخاص بنا. قم بتحديث إعدادات التصميم التالية:

• لون الخلفية: # f2f5f9
• لون خلفية الحقول: #ffffff
• تركيز الحقول لون الخلفية: #ffffff
• لون نص تركيز الحقول: # 222222
• هامش الحقول: 3 بكسل للأسفل
• مساحة الحقول: 18 بكسل للأعلى ، 18 بكسل للأسفل
• خط الحقول: Lato
• حجم نص الحقول: 16 بكسل
• ارتفاع خط الحقول: 1.4em

تابع تحديث الإعدادات على النحو التالي:

• الزوايا الدائرية للصورة: 60 بكسل
• خط العنوان: Roboto
• حجم نص العنوان: 26 بكسل (سطح المكتب) ، 20 بكسل (جهاز لوحي) ، 15 بكسل (هاتف)
• ارتفاع خط العنوان: 1.3em
• خط التعريف: Lato
• خط التعليق: Lato
• لون نص التعليق: # 222222
• الحشو: 5٪ لأعلى ، 5٪ أسفل ، 5٪ يسار ، 5٪ يمين

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

• حجم نص الزر: 14 بكسل
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 4 بكسل
• تباعد أحرف الأزرار: 5 بكسل (سطح المكتب) ، 5.5 بكسل (تحوم)
• خط الزر: Roboto
• وزن خط الزر: غامق
• نمط خط الزر: الأحرف الكبيرة (TT)
• مساحة الزر: أعلى 16 بكسل ، وأسفل 16 بكسل

أضف مقسم القسم إلى الرأس

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

• نمط الحاجز السفلي: انظر الصورة
• لون المقسم: #ffffff
• ارتفاع الحاجز: 10vw
• فاصل الوجه: أفقي

لا تنس حفظ الإعدادات الخاصة بك للتخطيط وأيضًا لـ Theme Builder حتى يتم حفظ تغييراتك.

هذا كل شيء! دعنا نتحقق من النتيجة النهائية.

النتيجة النهائية

لعرض النتيجة النهائية ، يمكننا فتح أي منشور مدونة داخل موقع Divi الخاص بنا (حيث تم تخصيص القالب لجميع منشورات المدونة).

فيما يلي مثال على منشور عند مشاهدته من محرر المنشورات في الخلفية.

وهنا المنشور في الواجهة الأمامية مع قالب منشور المدونة الخاص بنا في مكانه.

وهي هنا على شاشة الكمبيوتر اللوحي والهاتف:

استخدام Divi Builder لإنشاء منشور مدونة مع وجود قالب منشور مدونة في مكانه

إذا اخترت ، يمكنك بسهولة نشر Divi Builder لتصميم منشور مدونة باستخدام قالب منشور مدونة مثل هذا. سيتم عرض أي محتوى تم إنشاؤه وتصميمه باستخدام Divi Builder داخل منطقة Post Content Module بالقالب.

افكار اخيرة

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

هل قمت بإنشاء قالب منشور مدونة باستخدام Divi Theme Builder؟ اسمحوا لنا أن نعرف ما هو رأيك.

أتطلع إلى الاستماع منك في التعليقات.

هتافات!