كيفية تحريك صور الخلفية في Parallax مع تأثيرات Divi Scroll

يمكن أن يؤدي الجمع بين تأثيرات التمرير وصور خلفية المنظر إلى إنشاء تصميم سحري تمامًا للزائرين. نظرًا لأن تأثير المنظر يضع الصورة بالفعل في حالة حركة أثناء قيام المستخدم بالتمرير لأسفل الصفحة ، فإن إضافة تأثيرات تمرير إضافية (مثل الحركة الأفقية والدوران) يمكن أن يميز التصميم ويفتح الأبواب لمزيد من التخطيطات الإبداعية.

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

هيا بنا نبدأ.

نظرة خاطفة

قم بتنزيل مخطط صورة الخلفية المتحركة المنظر مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف JSON إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

إنشاء صور الخلفية المتحركة المنظر مع تأثيرات ديفي التمرير

مضيفا العمود

للبدء ، قم بإنشاء صف من عمود واحد.

إنشاء وحدة النص

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

محتوى النص

أضف الحرف "p" إلى محتوى الجسم.

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

بعد ذلك ، أضف صورة خلفية المنظر إلى وحدة النص على النحو التالي:

• صورة الخلفية: إدراج الصورة
• استخدام تأثير المنظر: نعم
• طريقة المنظر: CSS

تصميم النص

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• خط النص: مونتسيرات
• نمط خط النص: TT
• لون نص النص: #ffffff
• حجم نص النص: 100 بكسل (سطح المكتب) ، 70 بكسل (هاتف)
• تباعد حروف النص: 5 بكسل (هاتف)
• ارتفاع خط النص: 1em
• محاذاة النص: مركز
• الحشو: 250 بكسل للأعلى ، 250 بكسل للأسفل

الحشو هو ما يخلق الارتفاع الضروري اللازم لفضح صورة الخلفية المنظر.

إعدادات الصف

الآن بعد أن تم الانتهاء من الوحدة النصية الخاصة بنا ، افتح إعدادات الصف وقم بتحديث ما يلي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪

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

ثم انقر لفتح إعدادات العمود.

ضمن علامة التبويب خيارات متقدمة ، قم بتحديث تأثيرات التمرير التالية:

ضمن علامة التبويب تأثيرات الحركة الأفقية ...

• تمكين أفقي: نعم
• إزاحة البدء: -2 (عند 0٪ منفذ عرض)
• تعويض متوسط: 0 (عند 40٪ -60٪)
• إزاحة النهاية: -2 (عند 100٪)

ضمن علامة التبويب تأثيرات التدوير ...

• تمكين التدوير: نعم
• بدء الدوران: 20 درجة (عند 0٪ منفذ عرض)
• دوران متوسط: 0 درجة (عند 40٪ -60٪)
• نهاية الدوران: -20 درجة (عند 100٪)

إنشاء العمود 2

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

قم بتكرار العمود الأول بالكامل (مع وحدة النص) لإنشاء العمود الثاني.

تحديث تأثيرات التمرير للعمود 2

ثم قم بتحديث تأثيرات التمرير للعمود 2 على النحو التالي:

ضمن علامة التبويب تأثيرات التدوير ...

• بدء الدوران: -20deg
• نهاية الدوران: 20 درجة

إنشاء العمود 3

لإنشاء العمود 3 ، قم بتكرار العمود 2.

تحديث تأثيرات التمرير للعمود 3

ثم قم بتحديث إعدادات العمود 3 على النحو التالي:

ضمن علامة التبويب تأثيرات الحركة الأفقية ...

• تمكين الحركة الأفقية: لا

ضمن علامة التبويب "تأثير التدوير" ...

• دوران ابتداء: 20deg
• نهاية الدوران: 10 درجة

إنشاء العمود 4

لإنشاء العمود 4 ، قم بتكرار العمود 2 ثم اسحبه إلى الأسفل.

تحديث تأثيرات التمرير للعمود 4

ثم افتح إعدادات العمود 4 وقم بتحديث ما يلي:

ضمن علامة التبويب تأثيرات الحركة الأفقية ...

• بداية الإزاحة: 2
• إزاحة النهاية: 2

ضمن علامة التبويب "تأثيرات التدوير" ...

• بدء الدوران: -15 درجة
• نهاية الدوران: 20 درجة

إنشاء العمود 5

أخيرًا ، لإنشاء العمود 5 ، قم بتكرار العمود 4.

تحديث تأثيرات التمرير للعمود 5

ثم قم بتحديث إعدادات العمود 5 على النحو التالي:

ضمن علامة التبويب "تأثيرات التدوير" ...

• بدء الدوران: 15 درجة
• نهاية الدوران: -15 درجة

تحديث رسائل وحدة النص

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

تحديث تصميم وحدة النص الأوسط

افتح إعدادات وحدة النص في العمود 3 وقم بتحديث ما يلي:

• خط النص: مونتسيرات سوبرايادا
• لون نص النص: # e0e722
• حجم نص النص: 150 بكسل (سطح المكتب)
• ارتفاع خط النص: 100 بكسل

تحديث محتوى الوحدة النمطية للنص الأول للجوال

لعرض وحدة نصية واحدة على الهاتف المحمول ، نحتاج إلى تحديث وحدة النص في العمود 1 بالمحتوى التالي على شاشة الكمبيوتر اللوحي والهاتف:

محتوى الجسم على الجهاز اللوحي والهاتف:

<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p>

تحديث إعدادات العمود 1

بعد ذلك ، افتح إعدادات العمود 1 وقم بتحديث ما يلي:

• الزوايا الدائرية (سطح المكتب): 100٪ أعلى اليسار
• الزوايا الدائرية (الجهاز اللوحي والهاتف): 40٪ أعلى اليسار ، 40٪ أسفل اليمين

ضمن علامة التبويب خيارات متقدمة ، أضف CSS المخصص التالي إلى شاشة الكمبيوتر اللوحي للعنصر الرئيسي:

width: 100% !important;

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

إخفاء بقية الأعمدة على الجهاز اللوحي وشاشة الهاتف

الآن هذا العمود 1 سيمتد بالعرض الكامل للصف على الجهاز اللوحي والهاتف ، يمكننا إخفاء / تعطيل بقية الأعمدة على الجهاز اللوحي والهاتف. للقيام بذلك ، افتح إعدادات الأعمدة 2-5 وقم بتعطيل رؤية كل عمود من الأعمدة على الهاتف والجهاز اللوحي.

تحديث إعدادات العمود 5

ثم افتح إعدادات العمود 5 وأضف زاوية مدورة تكميلية كما يلي:

• الزوايا الدائرية (سطح المكتب): 100٪ أسفل اليمين

إضافة تصميم الخلفية إلى القسم

لإنهاء التصميم ، قم بتحديث إعدادات القسم بتصميم الخلفية على النحو التالي:

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

• نمط الحاجز العلوي: انظر لقطة الشاشة
• لون الفاصل العلوي: # 222222
• ارتفاع الحاجز العلوي: 650 بكسل (سطح المكتب) ، 500 بكسل (الجهاز اللوحي والهاتف)

• نمط الحاجز السفلي: انظر لقطة الشاشة
• لون الحاجز السفلي: # 222222
• ارتفاع الحاجز السفلي: 500 بكسل (سطح المكتب) ، 400 بكسل (الجهاز اللوحي والهاتف)

النتيجة النهائية

Hre هو التصميم النهائي على سطح المكتب.

وهنا التصميم الاحتياطي على شاشة الكمبيوتر اللوحي والهاتف.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!