توفر الأحرف الكبيرة النصية مربع نص قابل للتمرير إلى ملف موقع انترنت الذي يشرك القراء بمقتطفات مفيدة من محتويات. يطلق عليها أيضًا اسم المؤشرات (أو أشرطة الأخبار) وغالبًا ما تُستخدم لعرض دفق مستمر من تحديثات الأخبار في أعلى الصفحة أو أسفلها. . عادة، يتم تمرير الرسوم المتحركة بسطر واحد من محتويات في حلقة بحيث يتم عرض المعلومات بشكل متكرر. لسوء الحظ، ال <marquee>نظرًا لأن علامة html قديمة ، فإننا نعتمد على CSS و JavaScript لإنشاء أطر تحديد في هذه الأيام. ومع ذلك ، باستخدام Divi ، يمكنك إنشاء مستطيل تحديد بسيط دون القلق بشأن الرمز المخصص.
في هذا البرنامج التعليمي ، سنشرح مدى سهولة إنشاء نص اختيار بسيط باستخدام Divi. سنرى أيضًا كيفية إيقاف الرسوم المتحركة للنص التمرير مؤقتًا عند التمرير وكيفية إضافة نص تمرير كبير كعنصر تصميم فريد للرؤوس.
دعونا نبدأ.
مسح
ما تحتاجه للبدء
للبدء ، تحتاج إلى ما يلي:
- Le موضوع ديفي مثبت ونشط
- تم إنشاء صفحة جديدة للبناء من البداية على الواجهة الأمامية (مُنشئ بصري)
بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.
بداية المفهوم
بالنسبة لهذا المثال الأول ، سنقوم بإنشاء مستطيل نص بسيط لسطر واحد من النص. للقيام بذلك ، سنمنح الصف أقصى عرض مع إخفاء الفائض. بعد ذلك ، سنقوم بإضافة الرسوم المتحركة المتتالية للشرائح إلى وحدة نصية تحتوي على سطر النص بحيث ينزلق بشكل متكرر في السطر ، مثل المستطيل.
إليك كيفية القيام بذلك.
ابدأ بإنشاء قسم منتظم مع صف من العمود.
بعد ذلك ، قبل إضافة وحدة نمطية ، قم بتحديث الصف بعرض ثابت ، ومربع ظل ، ونصف قطر ، على النحو التالي:
- أقصى عرض: 200px
- مواد التنجيد: 10px في الأعلى ، 10px في الأسفل
- زوايا دائرية: 10px
- Box Shadow: انظر لقطة الشاشة
- تجاوز أفقي: مخفي
- تجاوز عمودي: مخفي
إضافة وحدة النص
عند اكتمال السطر ، أضف وحدة نمطية نصية جديدة إلى السطر.
ثم قم بتحديث محتويات من الجسم مع سطر واحد من النص. في الوقت الحالي، تأكد من عدم انقسام سطر النص إلى سطر آخر.
- الجسم: "هذه جملة"
تصميم وحدة النص
قم بتحديث معلمات تصميم وحدة النص كما يلي:
- الهامش: -100٪ على اليسار ، 100٪ على اليمين
هذا يضع وحدة النص خارج يسار السطر. نظرًا لأن الرؤية المخفية للخط مخفية ، سيتم إخفاء الوحدة النمطية حتى نضيف الرسوم المتحركة لجعلها مرئية.
- نمط الرسوم المتحركة: شريحة
- اتجاه الحركة: صحيح
- مدة الرسوم المتحركة: 5000 مللي ثانية
- كثافة الرسوم المتحركة: 100٪
- الرسوم المتحركة بدء التعتيم: 100٪
- الرسوم المتحركة لمنحنى السرعة: خطي
- كرر الرسوم المتحركة: حلقة
نتيجة
دعونا نرى النتيجة الآن.
إنشاء خطوط نصية أطول
في تصميم نص التحديد البسيط أعلاه ، قمنا بتقييد عرض سطر النص بنفس عرض الخط. ومع ذلك ، إذا أردنا إنشاء سطر نص أطول بنفس العرض ، فسنحتاج إلى تعديل الإعدادات قليلاً.
أولاً ، على الوحدة النمطية للنص واستبدال النص الأساسي بما يلي:
هذه مرحلة لها ارتباط
أضف المزيد من العرض والهامش لملاءمة أطول سطر من النص
كما قد تلاحظ ، يتم تقسيم النص إلى ثلاثة أسطر بدلاً من سطر واحد.
لذلك ، نحتاج إلى ضبط هامش وشدة الرسوم المتحركة.
- العرض: 207٪
- الهامش: -207٪ على اليسار ، 207٪ على اليمين
- كثافة الرسوم المتحركة: 75٪
الحيلة هنا هي زيادة العرض وتحديث قيم الهوامش بحيث لا يتبقى سوى مساحة كافية لسطر واحد من النص. ثم اضبط شدة الرسوم المتحركة بحيث لا يكون هناك فاصل كبير بين الرسوم المتحركة المتتالية.
نتيجة
ها هي النتيجة النهائية.
قم بإيقاف الرسوم المتحركة لنص التحديد عند التمرير
نظرًا لأن تحديد الشاشة الاسمية هذا يتضمن ارتباطًا ، فسيكون من الصعب على المستخدمين النقر فوق الارتباط أثناء التنقل. ومع ذلك ، يمكننا إضافة مقتطف css صغير إلى وحدة النص التي ستوقف الرسوم المتحركة مؤقتًا عند التمرير.
أضف مقتطف CSS لإيقاف الرسوم المتحركة مؤقتًا عند التمرير
لإضافة مقتطف css ، افتح إعدادات وحدة النص وأضف كود CSS المخصص التالي إلى العنصر الرئيسي تحت علامة تبويب التمرير :
الرسوم المتحركة للعب الدولة: توقف مؤقت.
نتيجة نهائية
الآن تحقق من النتيجة النهائية. لاحظ أن الرسوم المتحركة للنص تتوقف عندما يحوم المؤشر فوق النص ، مما يسمح للمستخدم بالنقر فوق الارتباط.
هذا كل شيء في هذا البرنامج التعليمي ، آمل أن يكون قد علمك كيفية إضافة نص تمرير على Divi.
أعتقد أن الإصدار قد تغير كثيرًا منذ هذا البرنامج التعليمي وأنه لم يعد من الممكن أن تفخر بمقالك
نعم أظن كذلك. سنقوم بتحديثه.
مرحبا،
شكرًا على هذا البرنامج التعليمي ، هذا بالضبط ما أحتاجه!
ومع ذلك ، فقد قمت بإجراء نفس التكوين بالضبط على السطر والوحدة النمطية ولكن لسوء الحظ لا يعمل أو ربما أكثر.
هل هذه هي حالتك أيضا؟
شكرا لك مقدما على عودتك.
الكسيس الخامس
شكرا لك على هذا البرنامج التعليمي ، فائق الوضوح والدقة. أحسنت !