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

نظرة عامة على النتيجة

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

1. إنشاء صفحة وظائف

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

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

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

أضف القسم الأول

خلفية التدرج

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

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

الفاصل السفلي

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

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

مباعدة

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

• الحشو السفلي: 200px

أضف سطرًا جديدًا

هيكل العمود

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

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

أضف محتوى H1

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

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

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

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

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

رؤية

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

• إظهار الفاصل: نعم

خط

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

• لون الخط: # fffff

التحجيم

واستكمل معلمات الوحدة عن طريق تعديل معلمات الأبعاد

• وزن المقسم: 8px
• العرض: 30٪

إضافة القسم رقم 2

إضافة قسم منتظم آخر إلى الصفحة.

أضف سطرًا جديدًا

هيكل العمود

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

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

أضف محتوى H2

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

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

تعديل معلمات النص H2 من الوحدة النمطية كما يلي:

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

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

رؤية

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

• إظهار الفاصل: نعم

خط

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

• لون الخط: # ffa500

التحجيم

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

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

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

محتويات

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

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

عناصر

في معلمات العناصر ، الخياران الوحيدان اللذان ننشطهما هما:

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

توفير

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

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

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

أيضا تغيير إعدادات النص العنوان.

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

إعدادات نص الجسم

ثم قم بتغيير إعدادات النص الأساسي.

• هيئة الشرطة: رالي
• حجم نص الجسم: 1.1rem
• ارتفاع خط الجسم: 2.1em

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

مع إعدادات النص تعلم المزيد.

• اقرأ المزيد الشرطة: مونتسيرات
• معرفة المزيد نمط الخط: Capital
• معرفة المزيد لون النص: #ffffff
• اقرأ المزيد حجم النص: 1rem

مباعدة

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

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

معرفة المزيد 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 لتسيير محطات العمل المفتوحة الفردية

لإنهاء التصميم ، سنقوم بإضافة وحدة نمطية للكود إلى السطر الأخير من صفحتنا وإدراج الأسطر التالية من كود 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. لا تتردد في ترك تعليق في قسم التعليقات أدناه.