كيفية تحويل عناصر متعددة لتأثيرات التحويم المجردة في Divi

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

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

هيا بنا نبدأ.

نظرة خاطفة

قم بتنزيل Transform Multiple Elements on Hover Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

ابدء

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

في هذا البرنامج التعليمي ، ستحتاج إلى ما يلي:

1. موضوع Divi مثبت ونشط
2. بعض الصور. أنا أستخدم صورًا من تخطيطاتنا المعدة مسبقًا التي يمكن الوصول إليها من داخل Divi Builder

بمجرد أن تصبح جاهزًا ، انتقل إلى لوحة معلومات WordPress الخاصة بك. ثم قم بإنشاء صفحة جديدة (Pages> Add New) ، وامنح صفحتك عنوانًا ، وانشر Divi Builder. اختر الخيار "البناء من الصفر".

الآن قماشك الفارغ في انتظارك!

آثار تحوم مجردة لصورة

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

هيريس كيفية القيام بذلك.

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

ثم أضف وحدة صورة إلى الصف.

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

إضافة تأثيرات تحوم وحدة الصورة

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

مقياس التحويل لمحور X و Y: 110٪

تحويل محور Z: 9deg

تحويل الانحراف X والمحور Y: 3deg

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

إعدادات الصف

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

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

قم بتحديث إعدادات الصف كما يلي:

أقصى عرض: 400 بكسل

نظرًا لأننا نريد أن يتطابق ارتفاع الصف مع الصورة الموجودة بداخله ، فنحن بحاجة إلى التخلص من الحشو الافتراضي العلوي والسفلي:

الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

نحتاج الآن إلى إضافة صورة خلفية إلى عمود الصف. ستظهر صورة الخلفية هذه عندما تنحرف وحدة الصورة عن تأثير التحويم وتدور.

صورة الخلفية للعمود 1: [أدخل الصورة]

استمر في تحديث الصف بظل مربع عند التمرير كما يلي:

Box Shadow: انظر لقطة الشاشة
Box Shadow Horizontal Position: 0 بكسل (افتراضي) ، -30 بكسل (تحوم)
Box Shadow Vertical Position: 0 بكسل (افتراضي) ، -15 بكسل (تحوم)
لون الظل: # 002f66

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

أخيرًا ، نحن مستعدون لإضافة خاصية تحويل منحرف لإضافة تأثير تمرير إضافي للصف.

تحويل الانحراف X والمحور Y: -3 درجة

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

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

وسيتوسع بشكل جيد على الهاتف المحمول أيضًا.

تأثيرات التمرير المجردة لدعوة إلى اتخاذ إجراء (مثال 1)

إعدادات الصف

أنشئ قسمًا عاديًا جديدًا بصف عمود واحد.

ثم قم بتحديث إعدادات الصف كما يلي:

العمود 1 الخلفية متدرجة اللون الأيسر: rgba (34،43،58،0.71)
العمود 1 خلفية متدرجة اللون الصحيح: # 222b3a
صورة الخلفية: [إدراج الصورة]
العرض الأقصى: 400 بكسل
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

إعدادات وحدة الدعوة إلى العمل

افتح إعدادات وحدة الحث على اتخاذ إجراء وقم بتحديث المحتوى على النحو التالي:

العنوان: السفر بالنقاط
نص الزر: انقر هنا
المحتوى: لفترة محدودة فقط
URL رابط الزر: # (فقط لتنشيط الزر الآن)
استخدام لون الخلفية: NO

ثم قم بتحديث إعداد التصميم للنص والتباعد بين الوحدة النمطية.

خط العنوان: عرض جيلدا
حجم نص الزر: 16 بكسل
لون نص الزر: # ffb238
لون خلفية الزر: rgba (0،0،0،0)
عرض حد الزر: 0 بكسل

حشوة مخصصة: 20٪ علوي ، 20٪ سفلي

أضف الآن حدًا إلى الوحدة النمطية.

عرض الحدود: 2 بكسل
لون الحدود: # 222b3a

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

لنبدأ بتأثيرات تمرير الصفوف.

تأثيرات تحوم الصفوف

أولاً ، يمكننا إضافة ظل مربع عند المرور فوق صفنا. افتح إعدادات الصف وقم بتحديث ما يلي:

Box Shadow: انظر لقطة الشاشة
Box Shadow Horizontal Position: 0 بكسل (افتراضي) ، 90 بكسل (تحوم)
Box Shadow Vertical Position: 0 بكسل (افتراضي) ، 80 بكسل (تحوم)
قوة انتشار الظل المربع: 0 بكسل (افتراضي) ، -40 بكسل (تحوم)

لون الظل: # ffb238

ضع في اعتبارك أن ظل الصندوق سيرث أيضًا خيارات التحويل التي سنضيفها بعد ذلك.

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

تحويل محور X (تحوم): 10deg
تحويل محور X (تحوم): -4deg
تحويل المحور ص (تحوم): -4 درجة

هذا يعتني بآثار تحويم الصفوف. نحتاج الآن إلى إضافة تأثير التمرير إلى وحدة Call to Action التي ستكمل التصميم.

دعوة إلى اتخاذ إجراء تحوم تأثيرات الوحدة النمطية

افتح إعدادات وحدة الحث على اتخاذ إجراء ومنحها تأثير تحوم ظل الصندوق كما يلي:

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: 0 بكسل
Box Shadow Vertical Position: 0 بكسل (افتراضي) ، 30 بكسل (تحوم)
لون الظل: #ffffff

أخيرًا ، أضف خاصية تحويل مقياس وتدوير وانحراف عند التمرير على النحو التالي:
مقياس التحويل X والمحور Y (تحوم): 115٪
تحويل محور Z (تحوم): 9 درجة
تحويل المحور X الانحراف (تحوم): 3deg
تحويل المحور ص (تحوم): 3deg

ستساعد زيادة حجم الوحدة باستخدام المقياس عند التمرير في تقليل فرصة قيام المستخدم بالمرور فوق عنصر الصف فقط بدلاً من الوحدة النمطية.

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

هذه هي النتيجة النهائية لتأثير التمرير المجرد. لاحظ كيف يتم تنشيط كل من تأثيرات تمرير الصفوف وتأثيرات تحويم الوحدة النمطية عند التمرير لتحريف العناصر في تصميم مجرد.

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

تأثيرات التمرير المجردة لدعوة إلى اتخاذ إجراء (مثال 2)

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

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

أولاً ، قم بتحديث إعدادات الصف كما يلي:

تحويل محور Z: -5deg
تحويل الانحراف X والمحور Y: -4deg

تحديث إعدادات وحدة الحث على اتخاذ إجراء

الآن دعنا نعدل إعدادات الوحدة على النحو التالي:

أولاً ، اسحبوا الحدود ...

عرض الحدود: 0 بكسل

ثم قم بتحديث Box Shadow كما يلي:

مربع الظل الأفقي: 0 بكسل
مربع الظل الرأسي: 110 بكسل
(تأكد من وتعطيل تأثير التمرير الموروث من التصميم السابق الذي نسخته)
لون الظل: # ffb238

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

قم بتحديث خيارات التحويل التالية:

مقياس التحويل X والمحور Y (تحوم): 110٪
تحويل محور Z (تحوم): -9deg
تحويل محور X الانحراف (تحوم): -3deg
تحويل المحور ص (تحوم): -3 درجة

إنشاء تخطيط الشبكة لصفوفك

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

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

ثم أضف هامشًا مخصصًا لكل من الصفوف:

الهامش المخصص: 50 بكسل للأعلى و 50 بكسل للأسفل

ثم افتح إعدادات القسم وقم ببساطة بإضافة CSS المخصص التالي إلى العنصر الرئيسي.

display: flex;
flex-wrap: wrap;

لديك الآن ثلاثة أعمدة من الصفوف التي ستستجيب لحجم متصفحك.

افكار اخيرة

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

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

هتافات!