كيفية تحديد قسم Divi جديد بأشكال الحركة الدقيقة

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

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

معاينة

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

مثال 1

سطح المكتب

متحرك

المثال رقم 2

سطح المكتب

متحرك

المثال رقم 3

سطح المكتب

متحرك

قم بتنزيل تخطيطات الأشكال المتحركة الدقيقة مجانًا

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

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

تنزيل مجاني

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

تحميل

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

خطوات عامة

تحميل معرض الفنون تخطيط الصفحة المقصودة

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

أضف صفًا جديدًا إلى أسفل القسم رقم 1

هيكل العمود

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

تحجيم

افتح إعدادات الصف وقم بتغيير إعدادات التحجيم كما يلي:

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

تباعد

قم بتعديل قيم الهامش والحشو أيضًا.

• الهامش العلوي: 10vw
• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

إزالة القسم رقم 1 الحشو السفلي

للتأكد من ظهور الصف وأشكال الحركة في الجزء السفلي من القسم ، سنحتاج إلى إزالة المساحة المتروكة السفلية للقسم.

• الحشو السفلي: 0vw

أعد إنشاء المثال رقم 1

أضف وحدة Divider Module # 1

الرؤية

بمجرد الانتهاء من الخطوات العامة ، حان الوقت لبدء إعادة إنشاء الأمثلة المختلفة ، بدءًا من المثال الأول. أضف وحدة Divider أولية وتأكد من تمكين خيار "Show Divider".

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

خط

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

• لون الخط: # ffa100

تحجيم

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

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

تباعد

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

• الهامش الأيسر: -200 بكسل (الجهاز اللوحي والهاتف فقط)
• الهامش الأيمن: -200 بكسل (الجهاز اللوحي والهاتف فقط)
• الحشو الأيسر: 15vw
• الحشوة اليمنى: 15vw

تحويل الانحراف

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

• القاع: 60 درجة

تأثير التمرير الأفقي للحركة

حان الوقت لإضافة تأثيرات التمرير المختلفة إلى وحدتنا! أولاً ، سنضيف بعض الحركة الأفقية.

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

يتلاشى داخل وخارج تأثير التمرير

سنضيف تأثير التلاشي للداخل والخارج أيضًا.

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

تحجيم تأثير التمرير لأعلى ولأسفل

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

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء: 20٪
• مقياس متوسط: 50٪ (عند 69٪)
• مقياس النهاية: 100٪ (عند 73٪)

وحدة استنساخ مقسم # 1

بمجرد الانتهاء من Divider Module ، يمكنك استنساخها.

تعديل لون الخط

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

• لون الخط: # 24252d

تعديل التباعد

قم بتعديل قيم تباعد الوحدة أيضًا.

• الهامش الأيسر: -200 بكسل (الجهاز اللوحي والهاتف فقط)
• الهامش الأيمن: -200 بكسل (الجهاز اللوحي والهاتف فقط)
• الحشو الأيسر: 25vw
• الحشوة اليمنى: 25vw

تعديل تأثير التمرير الأفقي للحركة

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

• إزاحة النهاية:
  • سطح المكتب: -20
  • الجهاز اللوحي والهاتف: -5

أعد إنشاء المثال رقم 2

أضف وحدة Divider Module # 1

الرؤية

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

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

خط

قم بتعديل لون خط الوحدة بعد ذلك.

• لون الخط: # ffa100

تحجيم

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

• وزن الحاجز: 200 بكسل
• العرض: 200 بكسل
• محاذاة الوحدة: المركز
• الارتفاع: 200 بكسل

الحدود

بعد ذلك ، سنحول الوحدة إلى دائرة بإضافة بعض نصف قطر الحدود.

• جميع الزوايا: 200 بكسل

تأثير التمرير الأفقي للحركة

حان الوقت لإضافة تأثيرات التمرير! التأثير الأول الذي نستخدمه هو الحركة الأفقية.

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة: -2
• الإزاحة المتوسطة: 0
• إزاحة النهاية:
  • سطح المكتب: 20
  • الجهاز اللوحي والهاتف: 5

تحجيم تأثير التمرير لأعلى ولأسفل

بعد ذلك ، سنقوم أيضًا بتمكين تأثير التحجيم والتصغير.

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء: 20٪
• مقياس متوسط: 100٪
• مقياس النهاية: 100٪

وحدة استنساخ مقسم

انطلق واستنسخ وحدة Divider بأكملها.

تغيير لون الخط

افتح النسخة المكررة وقم بتغيير لون الخط.

• لون الخط: # 24252d

تعديل التباعد

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

• الهامش العلوي: -200 بكسل

تغيير تأثير الحركة الأفقية التمرير

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

• إزاحة النهاية:
  • سطح المكتب: -20
  • الجهاز اللوحي والهاتف: -5

أعد إنشاء المثال رقم 3

إضافة مساحة صف

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

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

أضف وحدة Divider Module # 1

الرؤية

أضف وحدة Divider Module جديدة إلى الصف الأخير بالقسم الخاص بك وقم بإخفاء الحاجز.

• إظهار الحاجز:

خلفية متدرجة

أضف خلفية متدرجة بعد ذلك.

• اللون 1: # ffa100
• اللون 2: # f77f00
• نوع التدرج: خطي
• اتجاه التدرج: 121 درجة

تحجيم

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

• العرض: 200 بكسل
• محاذاة الوحدة: المركز
• الارتفاع: 0 بكسل

تباعد

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

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

تأثير التمرير الأفقي للحركة

حان الوقت الآن لإضافة تأثيرات التمرير ، بدءًا ببعض الحركة الأفقية عبر أحجام مختلفة للشاشة.

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

تدوير تأثير التمرير

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

• تمكين التدوير: نعم
• دوران البدء: 0 درجة (عند 46٪)
• دوران متوسط: 50 درجة (عند 75٪)
• دوران النهاية: 90 درجة

وحدة استنساخ مقسم

المضي قدما واستنساخ الوحدة بأكملها.

تغيير خلفية التدرج

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

• اللون 1: # 24252d
• اللون 2: # 16161c

تغيير التباعد

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

• الهامش العلوي: -100 بكسل

تغيير تأثير التمرير الأفقي

وقم بتعديل إزاحة نهاية الحركة الأفقية في إعدادات تأثيرات التمرير.

• إزاحة النهاية:
  • سطح المكتب: -20
  • الجهاز اللوحي والهاتف: -5

معاينة

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

مثال 1

سطح المكتب

متحرك

المثال رقم 2

سطح المكتب

متحرك

المثال رقم 3

سطح المكتب

متحرك

افكار اخيرة

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

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