كيفية إنشاء قالب صفحة المؤلف باستخدام Divi's Theme Builder

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

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل صفحة المؤلف الترحيبية مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. تحديث المستخدم

تحسين صور المؤلف

إضافة WP User Avatar Plugin

عند إضافة مؤلف إلى WordPress الخاص بك ، يقوم النظام تلقائيًا بسحب صورة Gravatar. بعض المؤلفين ليس لديهم حساب Gravatar أو أن الصورة لا تتطابق مع موقعك. يمنحك استخدام ملحق WP User Avatar مزيدًا من التحكم.

معلومات المؤلف الكاملة

تأكد من تضمين جميع معلومات المؤلف التالية:

• الأسم و الكنية
• اسم العرض
• المؤلف السيرة الذاتية
• صورة المؤلف

2. إعادة إنشاء التخطيط في منشئ القوالب

افتح Theme Builder

الخطوة الأولى لإعادة إنشاء قالب صفحة المؤلف هي فتح Theme Builder وإضافة قالب جديد. حدد "جميع صفحات المؤلف" ضمن قسم صفحات الأرشيف وانقر على الزر الأزرق "إنشاء نموذج".

إنشاء نص مخصص

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

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

تباعد

حان الوقت لبناء التصميم! داخل محرر القالب ، ستلاحظ قسمًا. افتح القسم وقم بتغيير قيم التباعد كما يلي:

• الحشو العلوي
  • سطح المكتب: 300 بكسل
  • الجهاز اللوحي والهاتف: 50 بكسل
• حشوة سفلية
  • سطح المكتب: 0 بكسل

الحدود

أضف حدًا سفليًا إلى القسم أيضًا.

• أنماط الحدود: الحد السفلي
• العرض: 2 بكسل
• اللون: أسود # 000000

أضف صف 1

هيكل العمود

الآن ، أضف صفًا بهيكل العمود التالي:

تحجيم

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

• عرض
  • سطح المكتب: 1580 بكسل
  • الجهاز اللوحي والهاتف: تلقائي
• العرض الأقصى
  • سطح المكتب: 90٪
  • الجهاز اللوحي والهاتف: 80٪

تباعد

عدّل إعدادات التباعد بعد ذلك.

• الهامش الأيسر: تلقائي
• الهامش الأيمن: 79 بكسل
• الحشوة اليمنى: 0 بكسل

لغة تنسيق ويب حسب الطلب

أخيرًا وليس آخرًا ، قم بمحاذاة محتوى العمود بالكامل باستخدام سطرين من كود CSS في العنصر الرئيسي للصف.

• العنصر الرئيسي
  • سطح المكتب: العرض: فليكس ؛ محاذاة العناصر: مركز ؛

display: flex;
align-items: center;

• • الجهاز اللوحي والهاتف: العرض: حظر ؛

display: block;

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

نص المحتوى

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

• النص الأساسي: المحتوى الديناميكي - مؤلف المشاركة
• قبل: <h1>
• بعد: <h1>
• تنسيق الاسم: الاسم الأول والأخير

نص العنوان

بعد ذلك ، حدد نمط نص العنوان كما يلي:

• مستوى العنوان: H1
• الخط: كرونا وان
• الوزن: جريء
• النمط: TT
• اللون: أسود # 000000
• مقاس
  • سطح المكتب: 90 بكسل
  • الجهاز اللوحي: 60 بكسل
  • الهاتف: 50 بكسل

تباعد

أضف بعض قيم التباعد سريعة الاستجابة أيضًا.

• الهامش السفلي
  • سطح المكتب: -43 بكسل
  • الجهاز اللوحي: -33 بكسل
  • الهاتف: -27 بكسل
• الحشوة العلوية: 19 بكسل
• الحشو السفلي: 0 بكسل

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

نص المحتوى

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

• الجسم: المحتوى الديناميكي - المؤلف السيرة الذاتية

نص

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

• الخط: Open Sans
• الوزن: خفيف
• اللون: أسود # 000000
• مقاس
  • سطح المكتب: 16 بكسل
  • الجهاز اللوحي: 15 بكسل
  • الهاتف: 14 بكسل
• تباعد الأحرف: 1 بكسل

تباعد

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

• الهامش الأعلى: 100 بكسل

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

محتوى الصورة

انتقل إلى العمود 2 وأضف وحدة صورة. امسح العنصر النائب الافتراضي وقم بتوصيل المحتوى الديناميكي لصورة ملف تعريف المؤلف.

• الصورة: المحتوى الديناميكي - صورة الملف الشخصي للمؤلف

تحجيم

بعد ذلك ، اضبط إعدادات تحجيم الصورة.

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

تباعد

أضف بعض الهامش السفلي سريع الاستجابة أيضًا.

• الهامش السفلي
  • سطح المكتب والجهاز اللوحي: -20٪
  • الهاتف: -30٪

الحدود

أكمل إعدادات الوحدة بإضافة بعض الزوايا الدائرية إلى إعدادات الحدود. سيساعد هذا في تحويل الوحدة إلى دائرة.

• الزاوية المستديرة: 50vw من جميع الزوايا الأربع
• الأنماط: جميع الجوانب الأربعة
• العرض: 2 بكسل
• اللون: أسود # 000000

أضف القسم 2

تباعد

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

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

أضف صف 2

هيكل العمود

أضف صفًا مع عمود واحد بعده.

تحجيم

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

• العرض: 1580 بكسل
• العرض الأقصى
  • سطح المكتب والجهاز اللوحي: 90٪
  • الهاتف: 95٪
• محاذاة الصف: الوسط

أضف وحدة المدونة

المحتوى

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

• المشاركات للصفحة الحالية: نعم

عناصر

في قسم العناصر ، نقوم بتمكين العناصر التالية لتظهر في تصميمنا:

• صورة مميزة
• مؤلف
• فئات
• مقتطفات
• ترقيم الصفحات

تخطيط

انتقل إلى علامة تبويب التصميم التالية وقم بتغيير التخطيط.

• التخطيط: الشبكة

نص العنوان

بعد ذلك ، حدد نمط نص العنوان وفقًا لذلك:

• مستوى العنوان: H2
• الخط: كرونا وان
• النمط: TT
• اللون: أسود # 000000
• مقاس
  • سطح المكتب: 26 بكسل
  • الجهاز اللوحي: 16 بكسل
  • الهاتف: 18 بكسل
• تباعد الأحرف: 3 بكسل
• ارتفاع الخط: 1.3 متر

نص أساسي

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

• الخط: Open Sans
• الوزن: خفيف
• اللون: أسود # 000000
• مقاس
  • سطح المكتب: 16 بكسل
  • الجهاز اللوحي: 15 بكسل
  • الهاتف: 14 بكسل
• تباعد الأحرف: 1 بكسل

نص ميتا

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

• الخط: Open Sans
• النمط: TT
• اللون: أسود # 000000
• تباعد الأحرف: 2 بكسل

تحجيم

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

• عرض
  • سطح المكتب: تلقائي
  • الجهاز اللوحي: 90٪
  • الهاتف: 80٪

تباعد

ثم أضف بعض المساحة المتروكة العلوية.

• الحشو العلوي
  • سطح المكتب: 60 بكسل
  • الجهاز اللوحي والهاتف: 70 بكسل

الحدود

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

• أنماط حدود تخطيط الشبكة: الجانب الأيسر
• العرض: 1 بكسل
• اللون: أسود #oooooo

لغة تنسيق ويب حسب الطلب

وسنكمل التصميم من خلال سطرين من كود CSS إلى عنوان الوحدة وجسمها!

• العنوان: padding-bottom: 50 بكسل ؛

padding-bottom: 50px;

• الجسم: الحشو السفلي: 50 بكسل ؛

padding-bottom: 50px;

معاينة

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

سطح المكتب

متحرك

هذا هو التفاف!

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