جعل العناصر تتفاعل عند التحويم.

تعلّم DXPR Builderبناء الصفحاتتنسيق العناصرأدلة التصميم

اجعلوا عنصرًا يتغير عندما يشير إليه زائر: صندوق يرتفع أو زر يغمق أو صورة تُشرق. تضبطون مظهر الراحة في لوحة النمط ومظهر التحويم في توأمها، لوحة نمط التحويم. يبني المثال مربع نص رماديًا يرتفع عند التحويم.

يمنح الفيديو مربع نص خلفية وحشوة وظلًا يعمق عند التحويم.

بناء مربع النص

  1. انقروا + في منطقة المحتوى واختاروا مقطعًا من تبويب التخطيط.
  2. انقروا + على المقطع واختاروا صفًا.
  3. انقروا أيقونة الشبكة على الصف واختاروا البلاطة ذات الأعمدة الثلاثة المتساوية وانقروا حفظ.
  4. انقروا + في العمود الأول واختاروا نصًا من تبويب المحتوى.
  5. اكتبوا "Open day" واضبطوه على العنوان 3 وأضيفوا سطرًا تحته.

ضبط نمط الراحة

  1. في مربع حوار الإعدادات نفسه، افتحوا لوحة النمط.
  2. اختاروا خلفية رمادية فاتحة.
  3. في نموذج الصندوق، اضبطوا الجوانب العلوية واليسرى والسفلية من الحشوة على 24.
  4. اضبطوا نصف قطر الحد على 8.
  5. اضبطوا ظل الإسقاط على 1.

ضبط نمط التحويم

  1. افتحوا لوحة نمط التحويم.
  2. اضبطوا ظل الإسقاط على 4.
  3. انقروا حفظ.
  4. انقروا حفظ على شريط أدوات DXPR Builder.
  5. افتحوا قائمة العرض، أيقونة العين على شريط الأدوات، واختاروا معاينة.
  6. حرّكوا المؤشر إلى مربع النص.

ما الذي ترونه

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

الإعدادات

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

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

أنماط شائعة

  • رفع البطاقة: ظل الإسقاط 1 في النمط و4 في نمط التحويم.
  • كشف الصورة: الشفافية 0.7 في النمط و1 في نمط التحويم.
  • تغيير لون زر: خلفية أغمق في نمط التحويم.
  • إبراز الحد: نمط الحد مصمت مع لون حد فاتح في النمط ولون حد مميز في نمط التحويم.

إذا لم تروا الأثر

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

ما الخطوة التالية؟