كيفية تصميم مربع مؤلف ديناميكي لقالب منشور المدونة الخاص بك باستخدام Divi

يعد ذكر كاتب المنشور في منشورات مدونتك أمرًا ضروريًا. الآن ، مع Divi's Theme Builder ، يمكنك إضافة مربع مؤلف ديناميكي على مستوى الموقع إلى مشاركاتك. يمكنك أيضًا تصميم مربع المؤلف باستخدام خيارات Divi المدمجة ، وهذا يمكن أن يؤدي إلى تصميم ويب جميل. في هذا البرنامج التعليمي ، سنوضح لك بالضبط كيفية تصميم مربع مؤلف ديناميكي جميل داخل قالب المنشور الخاص بك. ستتمكن من تنزيل ملف 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. بناء جسم قالب منشور المدونة

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

لون الخلفية

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

• لون الخلفية: # 270fff

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

قم بتحميل صورة الخلفية التي يمكنك العثور عليها في المجلد المضغوط الذي تمكنت من تنزيله في بداية هذا المنشور.

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

هيكل العمود

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

تحجيم

افتح إعدادات الصف وقم بتغيير الحد الأقصى للعرض في إعدادات التحجيم.

• العرض الأقصى: 1380 بكسل

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

عناصر

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

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

إعدادات النص

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

• لون النص: فاتح

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

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

• خط العنوان: Work Sans
• حجم نص العنوان: 7rem (سطح المكتب) ، 4rem (جهاز لوحي) ، 2rem (هاتف)
• تباعد حرف العنوان: -2 بكسل

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

جنبا إلى جنب مع إعدادات نصوص التعريف.

• Meta Font: Work Sans
• حجم نص التعريف: 1rem

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

تباعد

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

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

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

هيكل العمود

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

تحجيم

افتح إعدادات الصف وقم بتغيير إعدادات التحجيم كما يلي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض الأقصى: 1380 بكسل

تباعد

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

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

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

تباعد

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

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

مربع الظل

أضف ظل مربع إلى العمود الأول أيضًا.

• مربع قوة طمس الظل: 60 بكسل
• لون الظل: rgba (0،0،0،0.09)

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

إعدادات النص

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

• خط النص: Work Sans
• حجم النص: 1rem (سطح المكتب) ، 0.9rem (تابلت وهاتف)
• ارتفاع خط النص: 2.3em

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

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

• خط العنوان: Work Sans
• حجم نص العنوان 2: 1.6rem (H2) ، 1.5rem (H3) ، 1.4rem (H4) ، 1.3rem (H5) ، 1.2rem (H6)
• ارتفاع خط العنوان: 1.3em

معرف CSS

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

• معرف CSS: blog-post-content

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

أدخل رمز CSS الخاص بالعنوان

لإضافة بعض المسافة بين عناصر محتوى المنشور المختلفة ، سنقوم بإضافة Code Module إلى العمود 1 وإدراج الأسطر التالية من كود CSS:

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

#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

أضف وحدة الشخص إلى العمود 2

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

في العمود الثاني ، الوحدة الوحيدة التي نحتاجها هي وحدة الشخص. سنحدد المحتوى الديناميكي التالي:

• الاسم: كاتب المشاركة
• المنصب: المؤلف
• الجسم: المؤلف السيرة الذاتية

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

أضف صورة الملف الشخصي الديناميكية للمؤلف إلى الوحدة أيضًا.

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

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

بعد ذلك ، أضف لون خلفية بيضاء عند التمرير.

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

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

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

• مستوى عنوان العنوان: H3
• خط العنوان: Work Sans
• حجم نص العنوان: 1.1rem

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

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

• خط الجسم: Work Sans
• حجم نص الجسم: 0.9rem
• ارتفاع خط الجسم: 2em

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

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

• خط الموضع: Work Sans
• حجم نص الموضع: 0.9rem

التحجيم الافتراضي

قم بتعديل الارتفاع في إعدادات التحجيم.

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

تحوم التحجيم

وأعد الارتفاع إلى الوضع التلقائي عند التحويم.

• الارتفاع: تلقائي

تباعد

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

• الحشوة العلوية: 50 بكسل
• الحشو السفلي: 50 بكسل
• الحشو الأيسر: 50 بكسل
• الحشوة اليمنى: 50 بكسل

الحد الافتراضي

وسنستخدم الحدود أيضًا.

• عرض الحد الأيسر: 0 بكسل (سطح المكتب) ، 4 بكسل (الكمبيوتر اللوحي والهاتف)
• لون الحد الأيسر # 270fff

تحوم الحدود

قم بتعديل عرض الحد عند التمرير.

• عرض الحد الأيسر: 4 بكسل

ظل المربع الافتراضي

ثم أضف ظل الصندوق.

• مربع قوة طمس الظل: 60 بكسل
• لون الظل: rgba (0،0،0،0) (سطح المكتب) ، rgba (0،0،0،0.11) (الجهاز اللوحي والهاتف)

تحوم مربع الظل

تغيير لون الظل عند المرور فوق.

• لون الظل: rgba (0،0،0،0.11)

المرشحات الافتراضية

المضي قدما ، سنقوم بتغيير العتامة.

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

مرشحات تحوم

أعد التعتيم إلى 100٪ عند التمرير.

• العتامة: 100٪

العنصر الرئيسي CSS

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

position: sticky;
position: -webkit-sticky;
top: 50px !important;

صورة العضو CSS

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

text-align: left;

الرؤية الافتراضية

لإخفاء محتوى الوحدة النمطية على سطح المكتب ، سنقوم بتغيير الفائض في علامة التبويب المتقدمة.

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

تحوم الرؤية

سنجعل المحتوى يظهر عند التمرير عن طريق تغيير الفائض إلى مرئي.

• التدفق الأفقي: مرئي
• التدفق العمودي: مرئي

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

أضف قسمًا آخر إلى تصميمك.

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

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض الأقصى: 1380 بكسل

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

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

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

• لون خلفية الحقول: #ffffff
• مساحة الحقول العلوية: 20 بكسل
• مساحة الحشو السفلية للحقول: 20 بكسل
• خط الحقول: Work Sans
• حجم نص الحقول: 1rem

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

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

• مستوى عنوان عدد التعليقات: H2
• خط عدد التعليقات: Work Sans
• حجم نص عدد التعليقات: 1.5rem

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

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

• مستوى عنوان عنوان النموذج: H3
• خط عنوان النموذج: Work Sans
• حجم نص عنوان النموذج: 1.2rem

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

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

• Meta Font: Work Sans
• حجم نص التعريف: 1rem

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

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

• خط التعليق: Work Sans
• حجم نص التعليق: 1rem
• ارتفاع خط التعليق: 2.3em

إعدادات الزر

أكمل إعدادات الوحدة عن طريق تصميم الزر.

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

• خط الزر: العمل بلا

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

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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