كيفية إنشاء قسم قائمة وظائف وظائف ديناميكية باستخدام وحدة مدونة Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط قائمة الوظائف الديناميكي للوظائف مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. أضف صفحة الوظائف

إضافة صفحة جديدة والتبديل إلى Visual Builder

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

2. ابدأ في بناء صفحة الوظائف على الواجهة الأمامية

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

خلفية متدرجة

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

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

مقسم سفلي

استخدم مقسم القسم السفلي أيضًا.

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

تباعد

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

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

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

هيكل العمود

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

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

أضف محتوى H1

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

إعدادات نص H1

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

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

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

الرؤية

أسفل وحدة النص مباشرةً ، أضف وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

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

خط

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

• لون الخط: #ffffff

تحجيم

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

• وزن الحاجز: 8 بكسل
• العرض: 30٪

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

أضف قسمًا عاديًا آخر إلى الصفحة.

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

هيكل العمود

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

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

أضف محتوى H2

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

إعدادات نص H2

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

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

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

الرؤية

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

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

خط

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

• لون الخط: # ffa500

تحجيم

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

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

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

المحتوى

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

• نوع المشاركة: المشاركات
• تضمين الفئات: التسويق
• طول المقتطف: 150

عناصر

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

• إظهار زر قراءة المزيد: نعم
• عرض مقتطف: نعم

تخطيط

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

• التخطيط: عرض كامل

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

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

• مستوى عنوان العنوان: H3
• خط العنوان: مونتسيرات
• حجم نص العنوان: 1.5rem

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

بعد ذلك ، قم بتعديل إعدادات النص الأساسي.

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

قراءة المزيد إعدادات النص

جنبا إلى جنب مع قراءة المزيد من إعدادات النص.

• قراءة المزيد الخط: مونتسيرات
• قراءة المزيد Font Style: Uppercase
• قراءة المزيد لون النص: #ffffff
• قراءة المزيد حجم النص: 1rem

تباعد

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

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

المزيد Button CSS

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

max-width: 200px;
text-align: center;
padding: 20px;
margin-top: 40px;
border-radius: 100px;
background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;

صف استنساخ عدة مرات حسب الحاجة

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

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

تأكد من تغيير محتوى H2 لكل صف مكرر.

تغيير فئات وحدة المدونة

جنبًا إلى جنب مع فئات وحدة المدونة.

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

أدخل كود CSS لتصميم وظائف شاغرة بشكل فردي

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

<style>
.et_pb_posts .et_pb_post {
box-shadow: 0px 2px 50px 0px rgba(0,0,0,0.09);
padding: 50px;
border-radius: 20px;
background-color: #fff;
}
</style>

3. حفظ تصميم الصفحة وعرض النتيجة

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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