كيفية الجمع بين تأثيرات التمرير والخيارات اللاصقة بسهولة في تصميم Divi الخاص بك

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

1. إنشاء هيكل التصميم

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

خلفية متدرجة

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

• اللون 1: # 78998c
• اللون 2: rgba (120،153،140،0.13)
• نوع التدرج: خطي
• اتجاه التدرج: 90 درجة
• موقف البداية: 10٪
• موضع النهاية: 10٪

الرؤية

انتقل إلى علامة التبويب "خيارات متقدمة" للقسم وقم بإخفاء كلا الفائضين.

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

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

هيكل العمود

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

تحجيم

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

• العرض: 100٪
• العرض الأقصى: 2580 بكسل

تباعد

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

• الهامش السفلي: 50 بكسل

تباعد العمود 2

بعد ذلك ، افتح إعدادات العمود 2 وقم بتطبيق قيم المساحة المتروكة التالية:

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

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

أضف محتوى H3

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

خلفية متدرجة

قم بتضمين خلفية التدرج التالية بعد ذلك:

• اللون 1: rgba (8،45،18،0.52)
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: خطي
• وضع التدرج فوق صورة الخلفية: نعم

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

بعد ذلك ، قم بتحميل صورة خلفية من اختيارك.

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

إعدادات نص H3

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

• خط العنوان 3: Prata
• نمط خط العنوان 3: أحرف كبيرة
• العنوان 3 محاذاة النص: الوسط
• لون نص العنوان 3: #ffffff
• حجم نص العنوان 3: 42 بكسل
• العنوان 3 ارتفاع الأسطر: 1.2em

تباعد

أكمل إعدادات الوحدة النمطية باستخدام قيم التباعد التالية:

• الهامش العلوي: 20vh
• الهامش السفلي: 20vh
• الحشو العلوي: 48vh
• الحشوة السفلية: 48vh

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

أضف محتوى H4

في العمود 2. هناك ، الوحدة الأولى التي نحتاجها هي وحدة نصية تحتوي على بعض محتوى H4.

إعدادات نص H4

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات نص H4 على النحو التالي:

• خط العنوان 4: براتا
• نمط خط العنوان 4: أحرف كبيرة
• لون نص العنوان 4: # 155100
• حجم نص العنوان 4:
  • سطح المكتب: 45 بكسل
  • الجهاز اللوحي: 40 بكسل
  • الهاتف: 35 بكسل
• عنوان 4 خط ارتفاع: 1.3em

أضف وحدة Divider إلى العمود 2

الرؤية

أضف وحدة Divider أسفل وحدة النص مباشرةً وتأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

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

• لون الخط: # e8ddc9

تحجيم

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

• وزن الحاجز: 5 بكسل
• الارتفاع: 5 بكسل

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

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

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

إعدادات النص

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

• خط النص: لاتو
• لون النص: # 155100
• حجم الخط:
  • سطح المكتب: 20 بكسل
  • الجهاز اللوحي والهاتف: 16 بكسل
• تباعد الحروف النصية: -0.5 بكسل
• ارتفاع خط النص: 1.8em

تحجيم

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

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

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

أضف نسخة

الوحدة التالية والأخيرة التي نحتاجها في العمود 2 هي وحدة الأزرار.

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 20 بكسل
• لون نص الزر: # 155100
• زر التدرج الخلفية
  • اللون 1: rgba (43،135،218،0)
  • اللون 2: rgba (224،198،159،0.48)
  • موقف البداية: 50٪
  • موقف النهاية: 50٪
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل

• خط الزر: براتا
• نمط خط الزر: أحرف كبيرة

2. إضافة تأثيرات مثبتة

افتح إعدادات العمود 2

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

اقلب العمود مثبتًا

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

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

إعدادات العمود اللاصقة

الحدود اللزجة

الآن بعد أن جعلنا العمود ثابتًا ، يمكننا البدء في تطبيق الأنماط اللاصقة على العمود نفسه والوحدات النمطية فيه. سنبدأ بالعمود 2 بالانتقال إلى إعدادات الحدود وتطبيق الحد اللاصق التالي:

• عرض الحد الأيسر اللاصق: 2 بكسل
• لون الحد الأيسر: # 799a8d

تحويل الترجمة

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

• القاع: 10vw

• أسفل مثبت: 0vw

وحدات النص ووحدة الزر عتامة ثابتة

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

• العتامة: 0٪

• عتامة لزجة: 100٪

إعدادات مثبتة لوحدة المقسم

تحجيم

بعد ذلك ، افتح وحدة Divider Module في العمود 2. انتقل إلى علامة تبويب التصميم وقم بتغيير العرض الافتراضي والثابت في إعدادات تغيير الحجم.

• العرض: 0 بكسل

• العرض اللاصق: 21٪

انتقال

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

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

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

افتح وحدة النص في العمود 1

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

أضف حركة أفقية

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

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

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

أكمل تأثيرات التمرير عن طريق تطبيق إعدادات Fading In and Out التالية على نفس الوحدة:

• تمكين التلاشي للداخل والخارج: نعم
  • بدء التعتيم: 0٪
  • عتامة متوسطة: 0٪ (عند 46٪)
  • إنهاء التعتيم: 100٪ (عند 52٪)

4. إعادة استخدام الصف

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

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

تغيير المحتوى المكرر

تأكد من تغيير كل المحتوى المكرر وهذا كل شيء!

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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