كيفية إنشاء قالب نشر وظيفة ديناميكي مع Divi's Theme Builder & ACF

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل نموذج إعلان فتح الوظيفة مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. أضف فئات النشر

انتقل إلى فئات النشر

يتمثل الجزء الأول من إنشاء قالب الوظيفة المفتوحة في إضافة فئات منشورات جديدة ستستخدمها لشغل الوظائف الشاغرة التي تضيفها. انتقل إلى فئات المنشورات داخل لوحة معلومات WordPress الخاصة بك.

أضف فئات الوظائف المفتوحة

أضف فئة رئيسية وفئة منفصلة لكل قسم.

• فتح فرص العمل
  • مجال الاتصالات
  • تصميم
  • تطوير
  • تسويق
  • ...

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

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

تابع عن طريق تثبيت وتمكين المكون الإضافي المجاني Advanced Custom Fields.

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

قم بإعداد مجموعة حقول جديدة بالانتقال إلى لوحة معلومات WordPress> الحقول المخصصة> إضافة جديد .

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

• نوع المنشور يساوي النشر و
• فئة الوظيفة تساوي فتح الوظيفة

أضف الحقول

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

• المسؤوليات
  • تسمية الحقل: المسؤوليات
  • نوع الحقل: منطقة النص
• الخبرة المطلوبة
  • التسمية الميدانية: الخبرة المطلوبة
  • نوع الحقل: محرر Wysiwyg
• المهارات المطلوبة
  • تسمية الحقل: المهارات المطلوبة
  • نوع الحقل: محرر Wysiwyg
• مؤهلات المكافأة
  • تسمية الحقل: مؤهلات المكافأة
  • نوع الحقل: محرر Wysiwyg
• موقع
  • تسمية الحقل: الموقع
  • نوع الحقل: نص
• نوع الوظيفة
  • تسمية الحقل: نوع الوظيفة
  • نوع الحقل: خانة اختيار
  • الاختيارات: بدوام كامل + دوام جزئي + عمل حر (خط جديد لكل اختيار)
• تطبيق إعادة التوجيه
  • تسمية الحقل: تطبيق إعادة التوجيه
  • نوع الحقل: Url

3. أضف منشور مدونة جديد

أضف عنوان الوظيفة المفتوحة والوصف المختصر والفئات

بمجرد الانتهاء من مجموعة الحقول المخصصة وجميع حقولها ، فقد حان الوقت لإنشاء نموذج وظيفة شاغرة. أدخل العنوان والوصف الوظيفي وحدد الفئات.

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

تواصل من خلال استكمال جميع الحقول المخصصة.

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

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

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

استخدام على

استخدم القالب في المنشورات في فئة فتح الوظيفة.

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

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

القسم 1

خلفية متدرجة

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

• اللون 1: # ff6600
• اللون 2: # fbff30
• اتجاه التدرج: 126 درجة

مقسم سفلي

أضف حاجزًا سفليًا إلى القسم التالي.

• نمط الحاجز: بحث في القائمة
• ارتفاع المقسم: 8vw
• ترتيب الحاجز: أسفل محتوى القسم

تباعد

وقم بتضمين بعض الحشو السفلي أيضًا.

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

أضف الصف رقم 1

هيكل العمود

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

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

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

حان الوقت لبدء إضافة الوحدات! الوحدة الأولى التي نحتاجها في العمود 1 هي Blurb Module. حدد المحتوى الديناميكي للموقع لمربع العنوان واترك مربع المحتوى فارغًا.

• العنوان: الموقع

حدد أيقونة

تابع عن طريق تحديد رمز.

إعدادات الرمز

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

• لون الأيقونة: #ffffff
• وضع الصورة / الرمز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 25 بكسل

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

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

• مستوى عنوان العنوان: H3
• خط العنوان: Lato
• لون نص العنوان: #ffffff
• حجم نص العنوان: 1.4rem

حيوية

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

• صورة / أيقونة متحركة: لا توجد رسوم متحركة

استنساخ وحدة Blurb ووضع نسخة مكررة في العمود 2

بمجرد الانتهاء من Blurb Module في العمود 1 ، يمكنك استنساخه مرة واحدة ووضع النسخة المكررة في العمود الثاني.

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

تأكد من تغيير عنوان المحتوى الديناميكي مع الرمز.

• المسمى الوظيفي: نوع الوظيفة

أضف وحدة الزر إلى العمود 3

أضف نسخة

في العمود الأخير ، أضف وحدة الأزرار. أضف نسخة من اختيارك.

الارتباط الديناميكي

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

• URL رابط الزر: تطبيق إعادة التوجيه
• هدف ارتباط الزر: في علامة التبويب الجديدة

انتقام

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

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

إعدادات الزر

صمم الزر أيضًا.

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

• نصف قطر حدود الزر: 100 بكسل
• زر الخط: مونتسيرات
• نمط خط الزر: أحرف كبيرة

تباعد

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

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

أضف الصف رقم 2

هيكل العمود

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

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

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

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

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

• قبل: <H1>
• بعد: </H1>

إعدادات نص H1

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

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

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

الرؤية

الوحدة التالية التي نحتاجها هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

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

• لون الخط: #ffffff

تحجيم

قم بتعديل إعدادات التحجيم أيضًا.

• وزن الحاجز: 8 بكسل
• العرض: 30٪
• محاذاة الوحدة: يسار

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

تباعد

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

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

أضف الصف رقم 1

هيكل العمود

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

تباعد

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

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

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

لون الخلفية

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

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

إعدادات النص

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

• خط النص: Raleway
• حجم النص: 1.1rem
• ارتفاع خط النص: 2.1em

تباعد

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

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

الحدود

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

• جميع الزوايا: 20 بكسل

مربع الظل

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

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

أضف الصف رقم 2

هيكل العمود

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

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

أضف محتوى H2

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

إعدادات نص H2

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

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

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

الرؤية

الوحدة التالية التي نحتاجها هي وحدة Divider Module. تأكد من تمكين وحدة "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

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

• لون الخط: # ffa500

تحجيم

وأكمل إعدادات الوحدة من خلال التلاعب بإعدادات التحجيم.

• وزن الحاجز: 6 بكسل
• العرض الأقصى: 80 بكسل

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

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

الوحدة التالية والأخيرة التي نحتاجها في هذا العمود هي وحدة نصية أخرى. حدد المحتوى الديناميكي ذي الصلة.

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

تأكد من تمكين الخام HTML.

• تمكين Raw HTML: نعم

إعدادات النص

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

• خط النص: Raleway
• حجم النص: 1.1rem

إعدادات نص القائمة غير المرتبة

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

• ارتفاع سطر القائمة غير المرتبة: 2.3em

تباعد

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

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

الحدود

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

• جميع الزوايا: 20 بكسل

مربع الظل

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

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

أضف الصف رقم 3

هيكل العمود

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

نسخ الوحدات النمطية في العمود 2 مرتين ووضع التكرارات في العمود 1 و 2 من الصف الجديد

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

تغيير وحدة النص # 1 نسخ

تأكد من تغيير نسخة H2 لكل وحدة نص مكررة.

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

جنبا إلى جنب مع المحتوى الديناميكي.

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

• المحتوى الديناميكي: مؤهلات المكافأة

مرة أخرى ، تأكد من تمكين HTML الخام لكل من الوحدات النصية التي تحتوي على محتوى ديناميكي.

• تمكين الخام HTML: نعم

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

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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