كيفية مزج النسخ عند التمرير باستخدام إعدادات موضع Divi وتأثيرات التمرير

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

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

أضف 2x أقسام نائب

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

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

تحجيم

افتح إعدادات القسم وقم بتغيير الارتفاع في إعدادات التحجيم.

• الارتفاع: 50vh

قسم الاستنساخ

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

أضف مقطعًا جديدًا بين أقسام العناصر النائبة

بمجرد وضع أقسام العنصر النائب في مكانها ، أضف قسمًا جديدًا بين أقسام العنصر النائب.

لون الخلفية

افتح إعدادات القسم واستخدم لون الخلفية الأبيض.

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

تباعد

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

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

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

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

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

أضف نسخة

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

إعدادات النص

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

• خط النص: مونتسيرات
• وزن خط النص: غامق للغاية
• نمط خط النص: أحرف كبيرة
• لون النص: # fff2ea
• حجم النص: 11vw
• ارتفاع خط النص: 1em
• محاذاة النص: الوسط

أضف الصف رقم 2

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• العرض: 90٪
• محاذاة الصف: الوسط

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

تحميل الصور

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

انتقام

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

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

تحجيم

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

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

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

أضف نسخة

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

محاذاة الزر

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

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

إعدادات الزر

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

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

تباعد

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

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

أضف الموضع المطلق إلى الصف رقم 1

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

• الموقف: مطلق
• الموقع: المركز

استنساخ الصف رقم 1 ووضع نسخة مكررة أسفل الصف رقم 2

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

تطبيق التأثيرات على الصف رقم 3

زيادة مؤشر Z.

افتح الصف المكرر وقم بتغيير الفهرس z في علامة التبويب خيارات متقدمة.

• الفهرس Z: 12

تغيير لون النص

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

• لون النص: # 1e1e1e

قم بتطبيق وضع المزج على الصف

بعد ذلك ، افتح إعدادات الصف وقم بتغيير وضع المزج في إعدادات المرشحات.

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

استخدم تأثير التمرير على وحدة النص في الصف رقم 3

إضافة تأثير التلاشي للداخل والخارج

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

• تمكين التلاشي للداخل والخارج: نعم
  • بدء التعتيم: 0٪
  • عتامة متوسطة: 0٪ (عند 26٪)
  • إنهاء التعتيم: 100٪ (عند 28٪)
• مشغل تأثير الحركة: منتصف العنصر

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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