كيفية إنشاء قالب مشروع محفظة ديناميكية باستخدام Divi & ACF

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل قالب مشروع المحفظة الديناميكية مجانًا

هام: سيتعين عليك إضافة محتوى ديناميكي يدويًا إلى كل وحدة بعد إعداد حقول ACF وتحميل ملف JSON للقالب إلى Theme Builder.

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

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

تنزيل مجاني

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

تحميل

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

1. تثبيت ACF & إعداد حقول المشروع

تثبيت وتنشيط ACF

ابدأ بتثبيت البرنامج المساعد Advanced Custom Fields المجاني على موقع WordPress الخاص بك. بعد تثبيته ، تأكد من تنشيطه أيضًا.

انشاء مجموعة الحقول

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

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

• نوع المنشور - يساوي - مشروع

أضف الحقول

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

• مشكلة
  • تسمية الحقل: مشكلة
  • نوع الحقل: منطقة النص
• حل
  • تسمية المجال: الحل
  • نوع الحقل: منطقة النص
• شهادة
  • تسمية الحقل: شهادة
  • نوع الحقل: نص
• الشخص الذي يمكن الاتصال به
  • تسمية الحقل: مسؤول الاتصال
  • نوع الحقل: نص
• صورة الشخص المسؤول
  • تسمية الحقل: صورة الشخص المسؤول
  • نوع الحقل: صورة
• المسمى الوظيفي لجهة الاتصال
  • تسمية الحقل: المسمى الوظيفي لجهة الاتصال
  • نوع الحقل: نص
• شعار العميل
  • تسمية الحقل: شعار العميل
  • نوع الحقل: صورة
• موقع العميل
  • تسمية الحقل: موقع العميل
  • نوع الحقل: Url
• مدة المشروع
  • تسمية الحقل: مدة المشروع
  • نوع الحقل: المدى
  • ملحق: أسابيع

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

2. إنشاء مشروع جديد

أضف عنوان مشروع المحفظة ووصفه

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

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

ثم قم بتحميل صورة مميزة من اختيارك.

املأ جميع الحقول المخصصة

تابع عن طريق ملء جميع الحقول المخصصة المختلفة التي أضفتها في الجزء الأول من البرنامج التعليمي.

3. إنشاء نموذج جديد

انتقل إلى Divi Theme Builder وقم بإنشاء قالب جديد

حان الوقت لبدء بناء النموذج! انتقل إلى Divi Theme Builder وأضف قالبًا جديدًا.

استخدام على

قم بتطبيق القالب على جميع مشاريعك.

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

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

تابع عن طريق البدء في إنشاء نص مخصص للقالب.

القسم 1

لون الخلفية

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

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

تباعد

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

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

الحدود

أضف بعض نصف قطر الحد السفلي الأيمن والأيسر أيضًا.

• أسفل اليسار: 8vw
• أسفل اليمين: 8vw

أضف الصف رقم 1

هيكل العمود

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

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

إضافة محتوى

بعد ذلك ، أضف وحدة نصية وضع بعض المحتوى في مربع المحتوى.

• الهيئة: مدة المشروع:

إعدادات النص

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

• خط النص: مونتسيرات
• لون النص: # a0a0a0
• حجم النص: 1.2rem

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

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

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

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

إعدادات النص

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

• خط النص: لورا
• لون النص: #ffffff
• حجم النص: 1.5rem

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

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

أضف وحدة نصية أخرى وحدد المحتوى الديناميكي لعنوان النشر / الأرشيف.

• المحتوى الديناميكي: عنوان المشاركة / الأرشيف
• قبل: <H1>
• بعد: </H1>

إعدادات نص H1

صمم إعدادات نص H1 للوحدة.

• خط العنوان: مونتسيرات
• لون نص العنوان: #ffffff
• حجم نص العنوان: 6rem (سطح المكتب) ، 3rem (الجهاز اللوحي والهاتف)

تباعد

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

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

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

إعدادات النص

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

• خط النص: لورا
• لون النص: #ffffff
• حجم النص: 1.5rem (سطح المكتب) ، 0.9rem
• ارتفاع خط النص: 2em

أضف الصف رقم 2

هيكل العمود

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

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

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

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

• المحتوى الديناميكي: شعار العميل

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

إضافة محتوى

بعد ذلك ، أضف Text Module إلى العمود 2 وأدخل نسخة من اختيارك.

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

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

• المحتوى الديناميكي: موقع العميل

إعدادات النص

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

• خط النص: مونتسيرات
• لون النص: #ffffff
• حجم النص: 1.5rem
• ارتفاع خط النص: 1em

تباعد

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

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

الحدود

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

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

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

تباعد

إلى القسم التالي! إزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية.

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

اضف سطر

هيكل العمود

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

تباعد

افتح إعدادات الصف وقم بإزالة جميع المساحة المتروكة الافتراضية العلوية السفلية.

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

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

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

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

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

الحدود

أضف بعض نصف قطر الحد السفلي الأيمن والأيسر أيضًا.

• أسفل اليسار: 8vw
• أسفل اليمين: 8vw

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

تباعد

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

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

أضف الصف رقم 1

هيكل العمود

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

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

أضف محتوى H2

أضف وحدة نصية إلى العمود 1 وأدخل بعض محتوى H2 من اختيارك.

إعدادات نص H2

قم بتغيير إعدادات نص H2 كما يلي:

• خط العنوان 2: مونتسيرات
• وزن خط العنوان 2: غامق
• حجم نص العنوان 2: 2rem

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

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

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

• المحتوى الديناميكي: مشكلة

إعدادات النص

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

• خط النص: لورا
• حجم النص: 1.5rem (سطح المكتب) ، 0.9vw (الجهاز اللوحي والهاتف)
• ارتفاع خط النص: 2em

صف استنساخ

بمجرد الانتهاء من الصف ، امض قدمًا واستنسخه بالكامل.

تغيير نسخة من وحدة النص في العمود 1

قم بتغيير نسخة العمود 1 من الوحدة النمطية النصية للصف المكرر.

تغيير المحتوى الديناميكي لوحدة النص في العمود 2

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

• المحتوى الديناميكي: الحل

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

أضف نسخة

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

إعدادات الزر

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

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

• زر الخط: مونتسيرات

تباعد

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

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

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

لون الخلفية

إلى القسم التالي والأخير! أضف لون خلفية أسود.

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

الحدود

أضف بعض نصف قطر الحدود العلوية اليمنى واليسرى إلى القسم أيضًا.

• أعلى اليسار: 8vw
• أعلى اليمين: 8vw

اضف سطر

هيكل العمود

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

إضافة وحدة شهادة إلى العمود

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

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

• المؤلف: الشخص المسؤول
• المسمى الوظيفي: المسمى الوظيفي لجهة الاتصال
• الجسم: شهادة
• الصورة: صورة جهة الاتصال

عناصر

تعطيل رمز الاقتباس بعد ذلك.

• إظهار رمز الاقتباس:

لون الخلفية

ثم قم بتغيير لون خلفية الوحدة إلى اللون الأسود.

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

إعدادات النص

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

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

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

عدّل إعدادات النص الأساسي بعد ذلك.

• خط الجسم: مونتسيرات
• حجم نص الجسم: 2rem (سطح المكتب) ، 1.5rem (تابلت وهاتف)

إعدادات نص المؤلف

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

• خط المؤلف: لورا
• حجم نص المؤلف: 1.4rem (سطح المكتب) ، 0.9rem (الجهاز اللوحي والهاتف)

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

وأكمل إعدادات الوحدة عن طريق تغيير إعدادات نص الموضع وفقًا لذلك:

• خط الموقف: لورا
• لون نص الموضع: # a8a8a8
• حجم نص الموضع: 1.4rem (سطح المكتب) ، 0.9rem (تابلت وهاتف)

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

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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