يُكمّل هذا الدرس درسًا آخر أنشأناه قبل بضعة أيام. شرحنا لكم كيفية إضافة نص متحرك إلى عمود في Divi. واليوم، سنشرح لكم كيفية استخدام نفس التقنية لإضافة قسم "البطل الخارق" (وهو مصطلح يُستخدم لوصف مساحة كبيرة من صفحة الويب مصممة لجذب الانتباه وإبراز عناصر معينة).
دعونا نبدأ.
إضافة تخطيط محدد مسبقا
لإضافة التصميم إلى صفحتك، افتح قائمة الإعدادات أسفل مُنشئ Divi وانقر على رمز الزائد. في النافذة المنبثقة "تحميل من المكتبة"، اختر حزمة تصميم "مُوظِّف التوظيف". ثم انقر لاستخدام تصميم الصفحة الرئيسية.
إزالة محتوى إضافي مع التخطيط
بمجرد تحميل العرض التقديمي على الصفحة، قم بتوسيع عرض الإطار السلكي وحذف كل المحتوى من العرض التقديمي باستثناء الرأس كامل العرض والقسم الموجود أسفله مباشرة.
إنشاء الرسوم المتحركة لنص التحديد
كما ترى ، فإن كلمة "hired" مستخدمة بالفعل كعنصر تصميم نص كبير في وحدة نصية في القسم الثاني. سنقوم بتحويل هذا النص إلى عنصر تصميم مكبر صوت نصي سريع الاستجابة. المفتاح لجعل مستطيل النص مستجيبًا هو التأكد من أن وحدة السطر والنص يمتدان بعرض نافذة المتصفح بالكامل. يمكننا القيام بذلك باستخدام عرض 100٪. ثم يمكننا استخدام وحدة الطول vw لحجم النص. سيؤدي ذلك إلى جعل النص مناسبًا تمامًا لعرض المتصفح. بعد ذلك ، سنطبق نفس المبادئ التي استخدمناها سابقًا لتوضيح مثال نص التمرير البسيط.
إليك كيفية القيام بذلك.
تحديث معلمات الخط
كما ذكرنا سابقًا ، يجب أن يكون الصف 100٪ حتى يعمل تصميم تحديد النص سريع الاستجابة هذا. يسمح هذا لوحدة النص الخاصة بنا باستخدام وحدات الطول vw بالنسبة لعرض المتصفح. نظرًا لأن التخطيط المحدد مسبقًا يحتوي بالفعل على خط بعرض 100٪ ، فليس علينا فعل أي شيء.
ومع ذلك ، يجب علينا ضبط بقية الإعدادات على النحو التالي.
- الهامش: -24vw لأسفل
- تحويل ترجمة المحور ص: -24vw
- تجاوز أفقي: مخفي
- تجاوز عمودي: مخفي
الهامش السفلي السالب هو إزالة المساحة السالبة المتبقية في كل مرة نقوم فيها بتحريك الصف باستخدام أمر التحويل. ونحتاج إلى إخفاء تجاوز الصف من أجل تأثير نص التحديد.
تحديث تصميم النص من وحدة النص
الآن كل ما عليك فعله هو تحديث وحدة النص لتحويلها إلى عنصر تصميم نص كبير.
افتح الوحدة النمطية للنص وقم بتحديث ما يلي:
- لون نص النص: rgba (255,255,255,0.16)
- حجم نص النص: 36vw
- الهامش: -100٪ على اليسار ، 100٪ على اليمين
يستخدم حجم النص وحدة طول vw ، لذلك يتناسب النص مع عرض المتصفح جيدًا.
أضف رسمًا متحركًا إلى وحدة النص
- نمط الرسوم المتحركة: شريحة
- اتجاه الحركة: يسار
- مدة الرسوم المتحركة: 10000 مللي ثانية
- كثافة الرسوم المتحركة: 100٪
- الرسوم المتحركة لمنحنى السرعة: خطي
- كرر الرسوم المتحركة: حلقة
التصميم النهائي
الآن ، تحقق من التصميم النهائي.
الأفكار النهائية
يمكن أن تكون مربعات النصوص أداةً مفيدةً لتصميم الويب. فهي لا تقتصر على مجرد استخدام أشرطة الأدوات، بل تُضفي أيضًا عنصرًا متحركًا مميزًا على تصميم الويب. والأفضل من ذلك، أن Divi يُسهّل إنشاء وتصميم جميع أنواع العناصر الجميلة. آمل أن يُساعدك هذا البرنامج التعليمي في إنشاء مربعات نص بسيطة وقتما تشاء.
آمل أن أسمع منك في التعليقات.
لصحتك!