كيفية تشغيل تأثيرات التحويم لوحدة نمطية وعمود وصف في نفس الوقت

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

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

هيا بنا نبدأ.

نظرة خاطفة

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

قم بتنزيل مثال التصميم مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

كل عنصر في Divi (قسم أو صف أو وحدة نمطية) له مساحة تحوم خاصة به والتي هي أساسًا حجم العنصر نفسه.

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

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

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

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

وأخيرًا ، عندما تقوم بالتمرير فوق وحدة نمطية ، فإنك تقوم بتشغيل حالات التمرير للوحدة وجميع عناصرها الأصلية (العمود والصف والقسم).

بشكل افتراضي ، سيكون لكل عنصر من هذه العناصر مسافات (حشوة) تخلق فجوات في مساحة التمرير والتي تتيح للمستخدم القدرة على التمرير فوق كل عنصر بشكل انتقائي. ولكن ، إذا قمت بإزالة التباعد بين كل عنصر ، فستتمكن من تشغيل حالات التمرير لجميع العناصر في وقت واحد.

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

مثال على الجمع بين تأثيرات التحويم

فيما يلي مثال على كيفية عمل ذلك مع Divi.

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

داخل الصف ، لدينا عمود مملوء بظل الصندوق الأسود. عند التمرير ، يتم تقليل ظل مربع العمود تدريجيًا للكشف عن صورة خلفية الصف.

داخل العمود ، لدينا وحدة دعاية مغالى فيها بخلفية زرقاء. عند التمرير ، يتم تغيير الخلفية الزرقاء إلى اللون الأزرق شبه الشفاف حتى تتمكن من رؤية صورة الخلفية.

نظرًا لوجود مسافات بين كل عنصر ، يمكننا أن نرى تأثير التمرير المحدد لكل عنصر أثناء التمرير فوق كل مساحة تحوم فردية.

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

تعمل التأخيرات الانتقالية بشكل رائع مع هذا الإعداد

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

إعادة إنشاء مثال التصميم في Divi

لإعطائك بعض الإرشادات حول كيفية حدوث ذلك في العالم الحقيقي لـ Divi ، دعنا نعيد إنشاء المثال الموضح أعلاه.

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

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

1. موضوع Divi مثبت ونشط
2. تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)
3. الصور لاستخدامها لمحتوى وهمي

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

إضافة القسم والصف

أول شيء عليك القيام به هو إنشاء قسم عادي بصف من عمود واحد.

تحديث إعدادات الصف والعمود

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

ثم نحتاج إلى إزالة المساحة المتروكة الافتراضية بحيث لا توجد فجوة في مسافة التمرير بين الصف والعمود.

• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

ثم أضف ظل المربع التالي إلى الصف الموجود عند التمرير.

• Box Shadow: انظر لقطة الشاشة
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار ظل الصندوق: 0 بكسل (سطح المكتب) ، 10 بكسل (تحوم)
• لون الظل: # 063c68

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

• مدة الانتقال: 500 مللي ثانية
• تأخير الانتقال: 700 مللي ثانية

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

• Box Shadow: انظر لقطة الشاشة
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار ظل الصندوق: 200 بكسل (سطح المكتب) ، 0 بكسل (تحوم)
• لون الظل: # 000000
• مدة الانتقال: 500 مللي ثانية
• تأخير الانتقال: 200 مللي ثانية

أضف الوحدة النمطية Blurb

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

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

• الصورة: [إدراج صورة دعاية]
• لون الخلفية: # 0c71c3
• لون الخلفية (تحوم): rgba (12،113،195،0.35)

• محاذاة النص: مركز
• لون النص: فاتح
• المساحة المتروكة: 20 بكسل للأعلى ، 20 بكسل للأسفل ، 20 بكسل لليسار ، 20 بكسل لليمين

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

تحقق من النتيجة النهائية.

الأفكار والنصائح النهائية

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

• استخدم Box Shadow بدلاً من Borders - تضيف الحدود بالفعل مساحة إضافية إلى عنصر ما ، لذا قد يتسبب ذلك في فجوات تحوم غير مرغوب فيها. تضيف Box Shadows عنصر تصميم لا يضيف مساحة فعلية.
• استكشاف تأثيرات التحويم في الخلفية - يحتوي كل عنصر من عناصر Divi على خيارات تحويم في الخلفية يمكن دمجها مع طبقات من تأثيرات التمرير الإبداعية.
• استخدام خيارات التحويم - يمكن أن تضيف خيارات التحويم عنصرًا إبداعيًا مثل تحجيم العناصر وتدويرها عند التمرير. ومع ذلك ، قد يكون من الصعب تدوير عناصر متعددة عند التمرير لأنها ستؤدي إلى القفز.
• استفد من خيارات الانتقال - يمكن أن تؤدي إضافة فترات انتقال وتأخيرات مختلفة في حالة التمرير لكل عنصر إلى إنشاء رسوم متحركة فريدة من نوعها.

آمل أن يلهمك هذا البرنامج التعليمي لاستكشاف بعض تركيبات تأثير التحويم المذهلة في Divi.

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

هتافات!