استخدام حدود وحدة مؤشر Z المنخفضة كخلفيات مع Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط حدود وحدة الفهرس المنخفض مجانًا

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

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

تنزيل مجاني

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

تحميل

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

اشترك في قناتنا على اليوتيوب

لنبدأ في إعادة التكوين!

إضافة قسم جديد

تباعد

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

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

فيضانات

انتقل إلى علامة التبويب خيارات متقدمة وقم بتغيير الفائض.

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

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

هيكل العمود

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

لون الخلفية

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

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

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

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

إعدادات العمود 1

بمجرد الانتهاء من إعدادات الصف ، يمكنك فتح إعدادات العمود الأول وإجراء بعض التغييرات.

خلفية متدرجة

أضف خلفية متدرجة باستخدام الإعدادات التالية:

• اللون 1: rgba (0،0،0،0)
• اللون 2: # 2e2d3c
• اتجاه التدرج: 90 درجة
• موقف البداية: 54٪
• موضع النهاية: 54٪

مربع الظل

إضافة ظل مربع أيضا.

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

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

اترك مربع المحتوى فارغًا

حان الوقت لبدء إضافة الوحدات! أدخل وحدة نصية في العمود الأول واترك مربع المحتوى فارغًا. سنستخدم هذه الوحدة لإعداداتها المضمنة فقط. نظرًا لموقعها (الوحدة النمطية الأولى في العمود الأول) ، تحتوي الوحدة على مؤشر z منخفض وستظهر أسفل كل شيء آخر يليه.

تحجيم

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

• العرض: 24vw (Desktop) ، 50vw (Tablet & Phone)

تباعد

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

• الهامش العلوي: 15vw
• الهامش الأيسر: 12vw (سطح المكتب) ، 30vw (كمبيوتر لوحي وهاتف)
• الحشوة العلوية: 32vw (سطح المكتب) ، 67vw (كمبيوتر لوحي) ، 60vw (هاتف)

الحدود

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

• عرض الحدود: 2vw (سطح المكتب) ، 4vw (كمبيوتر لوحي) ، 5vw (هاتف)
• لون الحدود: # 00ffb2

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

إضافة محتوى

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

لون الخلفية

طابق لون الخلفية مع لون التدرج الثاني للعمود.

• لون الخلفية: # 2e2d3c

إعدادات النص

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

• خط النص: مونتسيرات
• وزن خط النص: غامق
• نمط خط النص: أحرف كبيرة
• محاذاة النص: الوسط
• لون النص: # f3f3e6
• حجم النص: 4vw
• تباعد الحروف النصية: -0.2vw

تحجيم

تغيير العرض أيضا.

• العرض: 27vw

تباعد

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

• الهامش العلوي: -23.2vw (سطح المكتب) ، -46vw (الجهاز اللوحي والهاتف)
• الهامش الأيسر: 21.5vw (سطح المكتب) ، 64.5vw (كمبيوتر لوحي) ، 64vw (هاتف)
• الحشوة العلوية: 4vw
• الحشو السفلي: 4vw
• الحشوة اليسرى: 2vw
• الحشوة اليمنى: 2vw

استدارة التحويل

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

• اليسار: 270 درجة

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

تحميل الصور

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

تحجيم

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

• فرض عرض كامل: نعم

تباعد

افتح إعدادات التباعد بعد ذلك وقم بتغيير القيم كما يلي:

• إظهار المساحة أسفل الصورة:
• الهامش العلوي: -6vw
• الهامش الأيسر: 3vw
• الحشو الأيمن: 22vw (سطح المكتب) ، 47vw (Tablet & Phone)

المرشحات

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

• التشبع: 43٪

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

إضافة محتوى

إلى العمود التالي! أدخل بعض المحتوى من اختيارك.

إعدادات النص

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

• خط النص: مونتسيرات
• محاذاة النص: ضبط
• لون النص: # 2e2d3c
• حجم النص: 0.9vw (سطح المكتب) ، 2.2vw (كمبيوتر لوحي) ، 2.5vw (هاتف)
• ارتفاع خط النص: 2.5em

تباعد

أضف بعض قيم التباعد المخصصة بعد ذلك.

• الهامش العلوي: 10vw (سطح المكتب) ، 15vw (الجهاز اللوحي والهاتف)
• الحشو الأيسر: 8vw
• الحشوة اليمنى: 8vw

وحدة استنساخ النص

بمجرد الانتهاء من وحدة النص ، قم بنسخها مرة واحدة.

قم بإزالة الهامش العلوي

قم بإزالة الهامش العلوي للنسخة المكررة.

ضع وحدة نصية جديدة بين كلتا الوحدتين النصيتين في العمود 2

إضافة محتوى

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

إعدادات النص

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

• خط النص: مونتسيرات
• وزن خط النص: شبه عريض
• لون النص: # 2e2d3c
• حجم النص: 2vw (سطح المكتب) ، 5vw (الجهاز اللوحي والهاتف)
• ارتفاع خط النص: 1.4em

تباعد

قم بتغيير قيم المساحة المتروكة أيضًا.

• الحشوة العلوية: 4vw (سطح المكتب) ، 8vw (جهاز لوحي) ، 10vw (هاتف)
• الحشوة السفلية: 4vw (سطح المكتب) ، 8vw (الكمبيوتر اللوحي) ، 10vw (الهاتف)
• الحشوة اليسرى: 4vw
• الحشوة اليمنى: 4vw

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

أضف نسخة

إلى وحدة الزر التالية والأخيرة. أدخل نسخة من اختيارك.

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 0.9vw (سطح المكتب) ، 2.5vw (الجهاز اللوحي) ، 3vw (الهاتف)
• لون نص الزر: # f3f3e6
• لون خلفية الزر: # 2e2d3c
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• زر الخط: مونتسيرات

تباعد

أكمل تصميم وحدة الأزرار عن طريق إضافة بعض قيم التباعد المخصصة وقد انتهيت!

• الهامش العلوي: 2vw (سطح المكتب) ، 8vw (الجهاز اللوحي والهاتف)
• الهامش السفلي: 10vw (سطح المكتب) ، 15vw (الجهاز اللوحي والهاتف)
• الهامش الأيسر: 8vw
• الحشوة العلوية: 1.5vw (سطح المكتب) ، 2.5vw (Tablet) ، 3vw (Phone)
• الحشوة السفلية: 1.5vw (سطح المكتب) ، 2.5vw (Tablet) ، 3vw (الهاتف)
• الحشو الأيسر: 4vw (سطح المكتب) ، 8vw (كمبيوتر لوحي) ، 10vw (هاتف)
• الحشو الأيمن: 4vw (سطح المكتب) ، 8vw (Tablet) ، 10vw (الهاتف)

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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