كيفية إنشاء قناع خلفية مثبت باستخدام Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل The Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. إنشاء تصميم في Divi

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

الصورة الخلفية

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

• حجم صورة الخلفية: الغلاف

تباعد

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

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

فيضانات

إخفاء تجاوزات القسم في علامة التبويب "خيارات متقدمة" التالية.

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

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة جميع الحشوة الافتراضية العلوية والسفلية أيضًا.

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

المرشحات

نضيف أيضًا وضع المزج إلى هذا الصف. سيساعدنا وضع المزج هذا في إنشاء قناع لاحقًا في البرنامج التعليمي.

• وضع المزج: الشاشة

فهرس Z.

للتأكد من بقاء هذا الصف أسفل الصف الثاني سنضيفه إلى القسم ، نقوم بتعديل الفهرس z في علامة التبويب خيارات متقدمة.

• الفهرس Z: 9

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

بعد ذلك ، سنفتح إعدادات العمود.

لون الخلفية

نحن نستخدم خلفية بيضاء بالكامل. سيظهر أي لون آخر تستخدمه هنا من خلال صورة خلفية القسم ، لذلك من المهم التمسك باللون الأبيض بالكامل.

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

العنصر الرئيسي CSS

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

height: 100vh;

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

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

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

لون الخلفية

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

• لون الخلفية: # 0b3835

تحجيم

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

• عرض:
  • سطح المكتب: 20vw
  • الجهاز اللوحي والهاتف: 70vw
• ارتفاع:
  • سطح المكتب: 30vh
  • الجهاز اللوحي والهاتف: 10vh

تباعد

نضيف بعض الهامش العلوي أيضًا.

• الهامش العلوي: 3vh

الحدود

وسنقوم بتضمين بعض الزوايا الدائرية.

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

أضف الصف رقم 2

هيكل العمود

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

تحجيم

بدون إضافة وحدات بعد ، افتح إعدادات الصف وقم بإجراء التغييرات التالية على إعدادات التحجيم:

• العرض: 100٪
• العرض الأقصى: 100٪

فهرس Z.

قم بزيادة فهرس z للصف أيضًا. سيساعد هذا في ضمان بقاء محتوى الصف أعلى الصف السابق.

• الفهرس Z: 12

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

أضف محتوى H2

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

إعدادات نص H2

صمم إعدادات نص H2 على النحو التالي:

• خط العنوان 2: عرض Playfair
• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: # 0b3835
• حجم نص العنوان 2:
  • سطح المكتب: 150 بكسل
  • الجهاز اللوحي والهاتف: 45 بكسل
• ارتفاع خط العنوان 2: 1.2em

تحجيم

بعد ذلك ، انتقل إلى إعدادات التحجيم وقم بتطبيق الإعدادات التالية:

• العرض الأقصى: 980 بكسل
• محاذاة الوحدة: المركز

تباعد

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

أضف وحدة الزر إلى الصف

أضف نسخة

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

محاذاة الزر

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

• محاذاة الزر: الوسط

إعدادات الزر

بعد ذلك ، انتقل إلى إعدادات الزر وقم بتطبيق الأنماط التالية:

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

• زر الخط: مونتسيرات
• وزن خط الزر: شبه عريض
• نمط خط الزر: أحرف كبيرة

تباعد

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

• الهامش السفلي: 60vh
• الحشوة العلوية: 15 بكسل
• الحشو السفلي: 15 بكسل
• الحشوة اليسرى: 40 بكسل
• الحشوة اليمنى: 40 بكسل

2. تطبيق تأثيرات لاصقة

افتح الصف رقم 1

الآن بعد أن قمنا ببناء أساس تصميمنا ، حان الوقت لتطبيق الأنماط اللاصقة. افتح إعدادات الصف الأول.

تطبيق خيارات مثبتة

انتقل إلى علامة التبويب خيارات متقدمة وقم بتطبيق الإعدادات الثابتة التالية:

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

خيارات مثبتة لوحدة النص

الآن بعد أن أصبح الصف ثابتًا ، يمكننا تطبيق أنماط مثبتة على وحدة النص داخل الصف. افتح إعدادات الوحدة.

تحجيم لزجة

بعد ذلك ، انتقل إلى إعدادات التحجيم وقم بتطبيق قيم التحجيم اللاصقة التالية:

• عرض مثبت: 80vw
• ارتفاع مثبت: 90vh

مدة الانتقال

أخيرًا وليس آخرًا ، انتقل إلى علامة التبويب خيارات متقدمة وقم بزيادة مدة الانتقال. هذا كل شيء!

• مدة الانتقال: 500 مللي ثانية

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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