كيفية إنشاء تأثير التمرير للخلفية مزدوج الطبقات باستخدام Divi

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

1. تحضير ملفي صور في Adobe Photoshop
2. إنشاء التصميم داخل Divi
3. تطبيق تأثيرات التمرير لتحريك الخلفية

ستتمكن من تنزيل ملفات JSON وملفات الصور مجانًا أيضًا!

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

1. إنشاء ملفات الصور في برنامج فوتوشوب

اختر صورة المنتج بخلفية نظيفة وافتحها في Photoshop

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

1. تركيز واضح على كائن داخل الصورة
2. خلفية نظيفة

الصورة أدناه هي مثال ممتاز. يمكنك العثور على ملف الصورة هذا في المجلد المضغوط المشترك في منطقة التنزيل لهذا المنشور.

طبقة مكررة

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

إخفاء الطبقة الأصلية

للتأكد من أننا نرى النتيجة أثناء انتقالنا إلى أسفل البرنامج التعليمي ، قم بإخفاء الطبقة الأصلية.

إنشاء PNG من تحديد الكائن في الصورة

استخدم أداة التحديد السريع على اللوحة

في المجموع ، سنحتاج إلى ملفي صور للدورة التعليمية:

1. a PNG للكائن ، في هذه الحالة ، اللوحة
2. صورة بتنسيق JPEG للخلفية بدون الكائن

نحن نفصل الكائن عن خلفيته ، حتى نتمكن من معالجتهما بشكل فردي مرة واحدة داخل بيئة Divi.

لبدء تحديد الكائن ، اختر "أداة التحديد السريع" في شريط الأدوات وحاول تغطية أكبر قدر ممكن من الكائن.

حدد + اختيار القناع

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

قم بإنشاء قناع طبقة من التحديد

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

Finetune Selection Inside Mask مع فرش

بمجرد إنشاء قناع الطبقة ، يمكنك البدء في استخدام فرشاة لتعديل قناع الطبقة. تأكد من تحديد قناع الطبقة.

• سيؤدي استخدام فرشاة سوداء (# 000) إلى إزالة أجزاء من قناع الطبقة
• سيؤدي استخدام فرشاة بيضاء (#fff) إلى إضافة الأجزاء الخلفية لقناع الطبقة

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

تحقق مزدوج من القناع بطبقة ملونة

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

احفظ تحديد PNG كملف صورة منفصل

إنشاء ملف جديد

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

حجم الكائن لدينا أصغر بكثير من حجم الملف الأولي ، لذلك سننشئ ملفًا جديدًا للكائن الخاص بنا ونقوم بإحضاره.

تناسب التحديد في ملف جديد

انسخ والصق الطبقة بقناع الطبقة الخاص بها داخل الملف الجديد الذي قمت بإنشائه.

تصدير للويب

وتصديره للويب بصيغة PNG.

ضغط ملف الصورة

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

إزالة الكائن في الصورة الأصلية

حدد قناع الطبقة

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

عكس القناع

ثم انتقل إلى خصائص هذه الطبقة وانقر على "عكس".

تطبيق قناع الطبقة

ستلاحظ الآن أن الكائن شفاف داخل الطبقة الأولية. سنقوم بتطبيق قناع الطبقة على طبقتنا عن طريق النقر بزر الماوس الأيمن وتحديد "تطبيق قناع الطبقة".

املأ مساحة فارغة باستخدام أداة النسخ

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

حفظ الصورة بدون كائن

تصدير للويب

بمجرد الانتهاء من صورة الخلفية بدون الكائن ، يمكنك حفظها كملف JPEG بجودة 70٪.

ضغط ملف الصورة

تأكد من ضغط هذه الصورة أيضًا.

2. بناء تأثير خلفية مزدوجة الطبقات في Divi

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

تحميل صورة الخلفية

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

تباعد

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

• الهامش السفلي: 100vh
• الحشوة العلوية:
  • سطح المكتب: 100 بكسل
  • الجهاز اللوحي والهاتف: 50 بكسل
• الحشوة السفلية:
  • سطح المكتب: 100 بكسل
  • الجهاز اللوحي: 600 بكسل
  • الهاتف: 500 بكسل

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

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

تباعد

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

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

موقع

ثم قم بتغيير موضع الصف بأكمله.

• الموقف: مطلق
• موقع:
  • سطح المكتب: المركز
  • الجهاز اللوحي والهاتف: مركز القاع
• الإزاحة العمودية:
  • سطح المكتب: /
  • الجهاز اللوحي والهاتف: 30vh

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

تحميل صورة PNG

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

انتقام

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

• محاذاة الصورة: المركز

تحجيم

قم بتغيير إعدادات التحجيم بعد ذلك.

• عرض:
  • سطح المكتب: 36٪
  • الجهاز اللوحي والهاتف: 60٪

أضف الصف رقم 2

هيكل العمود

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

لون الخلفية

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

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

تحجيم

قم بتعديل إعدادات التحجيم بعد ذلك.

• العرض: 90٪
• العرض الأقصى: 550 بكسل
• محاذاة الصف:
  • سطح المكتب: يسار
  • الجهاز اللوحي والهاتف: المركز

تباعد

بعد ذلك ، قم بتطبيق بعض قيم المساحة المتروكة المخصصة.

• حشوة علوية: 11٪
• حشوة سفلية: 11٪
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

تعويض الأفقي

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

• تعويض الأفقي:
  • سطح المكتب: 5٪
  • الجهاز اللوحي والهاتف: 0٪

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

أضف محتوى H2

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

إعدادات نص H2

صمم نص H2 كما يلي:

• خط العنوان 2: Kumbh Sans
• حجم نص العنوان 2:
  • سطح المكتب: 90 بكسل
  • الجهاز اللوحي: 60 بكسل
  • الهاتف: 45 بكسل

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

إضافة وصف المحتوى

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

إعدادات النص

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

• خط النص: كومبه سانس
• ارتفاع خط النص: 2em

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

أضف نسخة

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

إعدادات الزر

صمم الزر وفقًا لذلك:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 20 بكسل
• لون نص الزر: # 6b6443
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل

• خط الزر: Kumbh Sans
• وزن خط الزر: غامق
• إظهار رمز الزر: نعم
• وضع رمز الزر: يسار
• فقط إظهار الرمز عند التمرير للزر: لا

مربع الظل

قم بتضمين ظل الصندوق أيضًا.

• مربع الظل الوضع الأفقي: 0 بكسل
• مربع الظل الوضع الرأسي: 2 بكسل
• لون الظل: # 6b6443

3. إضافة تأثيرات التمرير

الحركة العمودية للصورة

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

• تمكين الحركة العمودية: نعم
• بداية الإزاحة:
  • سطح المكتب: 0
  • الجهاز اللوحي والهاتف: 4 (بنسبة 0٪)
• تعويض متوسط:
  • سطح المكتب: 0
  • الجهاز اللوحي والهاتف: 0 (بنسبة 97٪)
• إزاحة النهاية:
  • سطح المكتب: 0
  • الجهاز اللوحي والهاتف: -2 (بنسبة 100٪)

الحركة الأفقية للصورة

نحن نكمل تصميمنا باستخدام إعدادات الحركة الأفقية التالية:

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة:
  • سطح المكتب: 0 (بنسبة 0٪)
  • الجهاز اللوحي والهاتف: 0
• تعويض متوسط:
  • سطح المكتب: 0 (بنسبة 65٪)
  • الجهاز اللوحي والهاتف: 0 (بنسبة 97٪)
• إزاحة النهاية:
  • سطح المكتب: -10 (بنسبة 100٪)
  • الجهاز اللوحي والهاتف: 0

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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