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

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

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

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

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

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

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

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

خلفية التدرج

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

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

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

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

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

مباعدة

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

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

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

هيكل العمود

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

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

أضف محتوى H1

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

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

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

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

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

رؤية

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

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

خط

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

• لون الخط: # 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. لا تترددوا في ترك تعليق في قسم التعليقات أدناه.