كيفية إنشاء انتقالات نسخ Parallax مع خيارات Divi اللاصقة

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

https://youtu.be/uZCD0__Apjk

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

1. قم بإنشاء بنية العنصر

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

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

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

هيكل العمود

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

تحجيم

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

• معادلة ارتفاعات العمود: نعم
• العرض: 95٪
• العرض الأقصى: 100٪

تباعد

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

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

العمود صورة الخلفية

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

قم بتحميل صورة خلفية وقم بتمكين تأثير اختلاف المنظر عليها.

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

تباعد العمود

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

• الحشوة السفلية: 50vh

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

أضف محتوى H2

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

إعدادات نص H2

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

• خط العنوان 2: مونتسيرات
• وزن خط العنوان 2: غامق
• نمط خط العنوان 2: أحرف كبيرة
• لون نص العنوان 2: #ffffff
• حجم نص العنوان 2:
  • سطح المكتب: 9vw
  • الجهاز اللوحي: 14vw
  • هاتف: 15vw

المرشحات

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

• وضع المزج: تراكب

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

أضف نسخة

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

إضافة رابط

بعد ذلك ، أدخل ارتباطًا.

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر:
  • سطح المكتب: 2vw
  • الجهاز اللوحي والهاتف: 7vw
• لون نص الزر: #ffffff
• عرض حد الزر: 0 بكسل
• تباعد حرف الزر: 0.06vw

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

تباعد

أضف بعض المساحة المتروكة العلوية والسفلية المخصصة أيضًا.

• حشوة علوية: 8٪
• حشوة سفلية: 8٪

موقع

وأكمل إعدادات الوحدة عن طريق إعادة وضع الوحدة في الزاوية اليمنى السفلية للعمود.

• الموقف: مطلق
• الموقع: أسفل اليمين

2. الخطوات اللازمة للتأثير

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

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

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

تعديل تباعد وحدة النص

تقصير

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

• الهامش العلوي:
  • سطح المكتب: -10vw
  • الجهاز اللوحي: -14vw
  • الهاتف: -15vw

لزج

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

• الهامش العلوي الثابت: 0vh

تباعد الأقسام

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

• الحشو العلوي: 10vh
• الحشوة السفلية: 10vh

استنساخ القسم بأكمله عدة مرات كما هو مطلوب

بمجرد الانتهاء من تصميم القسم ، يمكنك استنساخه عدة مرات كما تريد.

تغيير المحتوى والروابط

تأكد من تغيير المحتوى والروابط لكل وحدة داخل الأقسام المكررة وانتهيت!

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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