يضمن لك عنوانٌ بارزٌ فرصةً لجذب انتباه زوارك. عادةً ما تُلفت العناوين انتباهَ الزوار نظرًا لحجمها وموقعها المركزي، ولكن إذا كنت ترغب في إضافة لمسةٍ مميزةٍ إلى عنوانك، فأنت في المكان المناسب.
في هذا البرنامج التعليمي، سنقوم بدمج إعدادات الرسوم المتحركة الخاصة بـ Divi لإنشاء عنوان يبرز ويلفت انتباه زوارك.
النتيجة النهائية
الجزء الأول: التصميم
قسم التكوين
لون الخلفية
لنبدأ في التصميم! قم بإنشاء صفحة جديدة وإضافة قسم عادي إليها. افتح إعدادات القسم وقم بتغيير لون الخلفية.
- لون الخلفية: # EEE
مباعدة
ثم ، انتقل إلى إعدادات تباعد القسم وإضافة هوامش التعبئة المخصصة.
- الحشو السفلي: 10vw
أضف صف 1
هيكل العمود
متابعة إضافة صف جديد باستخدام بنية الأعمدة التالية:
لون الخلفية
بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتغيير لون خلفية الصف.
- لون الخلفية: #DDD
التحجيم
ثم انتقل إلى إعدادات التحجيم واترك الصف يملأ عرض الشاشة بالكامل.
- جعل هذا الخط عرض كامل: نعم
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
مباعدة
أيضًا ، قم بإزالة الحشوة الداخلية العلوية والسفلية للخط.
- الحشو في الجزء العلوي: 0px
- المفروشات القاع: 0px
إضافة وحدة نمطية النص
حان وقت إضافة الوحدات! أول وحدة نحتاجها هي وحدة نصية. أدخل الجزء الأول من عنوانك في حقل المحتوى باستخدام نمط نص الفقرة.
لون الخلفية
ثم انتقل إلى إعدادات خلفية الوحدة النمطية وإضافة لون الخلفية.
- لون الخلفية: #ccc
إعدادات النص
قم أيضًا بتغيير إعدادات النص في علامة التبويب "التصميم".
- نص الخط: Didact Gothic
- وزن الخط للنص: غامق
- لون النص: #000000
- حجم النص: 10vw
- ارتفاع سطر النص: 0.9em
- اتجاه النص: المركز
مباعدة
ثم أنشئ الشكل الذي تريده باستخدام حشوة مخصصة في الأعلى والأسفل.
- الحشو في الجزء العلوي: 10vw
- الحشو السفلي: 3vw
الرسوم المتحركة
أخيرًا وليس آخرًا ، سنضيف بعض الرسوم المتحركة. من المهم التأكد من أن مدة الرسوم المتحركة وعتامة البداية تساوي صفرًا. سيسمح هذا لوحدة النص بالظهور بتأثير الفلاش.
- أسلوب الرسوم المتحركة: Fade
- كرر الرسوم المتحركة: مرة واحدة
- مدة الرسوم المتحركة: 0ms
- تأخير الرسوم المتحركة: 1000 مللي ثانية
استنساخ وحدة النص x4
بمجرد الانتهاء من تحرير وحدة النص الأولى ، يمكنك المضي قدمًا واستنساخها عدة مرات كما تريد ، اعتمادًا على طول العنوان الخاص بك. ستحتاج إلى وحدة نصية منفصلة لكل جزء من العنوان تريد عرضه بتأثير الفلاش. في هذا المثال ، سنحتاج إلى وحدات 4 إضافية.
لون الخلفية
مع لون الخلفية.
- نسخ 1 = لون الخلفية: # 5900ff ، لون النص: #FFF
- نسخ 2 = اترك كما هو ، تعديل مدة الرسوم المتحركة (تأخير الرسوم المتحركة): 1500 مللي ثانية
- Copy 3 = لون الخلفية: # ffb200 ، لون النص: #FFF ، تعديل مدة الرسوم المتحركة: 2000 مللي ثانية
- نسخ 4 = لون الخلفية: # 000 ، لون النص #FFF ، تعديل مدة الرسوم المتحركة: 2500 مللي ثانية
أضف هامشًا سالبًا لكل وحدة نصية باستثناء الأولى
بمجرد الانتهاء من تخصيص جميع وحدات النص ، يمكنك المضي قدمًا وإنشاء تداخل. لإنشاء هذا التداخل ، سنضيف هامشًا علويًا سلبيًا إلى كل وحدة من وحدات النص المكرر. بمعنى آخر ، نتأكد من أن جميع الوحدات التي تتبع الوحدة الأولى تظهر أعلى وحدة النص الأولى.
- الهامش العلوي: -31.98vw
خط التحول
تحويل الترجمة
تابع بتحويل الخط بالكامل ، بدءًا من معلمات التحول.
- أسفل: -35vw
تحويل الدوران
أيضا تغيير قيم دوران التحول.
- اليسار: 320deg
أضف سطر 2
هيكل العمود
في المركز الثاني! الآن وقد أصبح تأثير العنوان في مكانه الصحيح ، يمكننا البدء في إضافة الوحدات المتبقية. أضف صفًا جديدًا باستخدام بنية العمود التالية:
التحجيم
بدون إضافة أي وحدات بعد ، افتح إعدادات الصف واترك الصف يملأ عرض الشاشة بالكامل في إعدادات التحجيم:
- جعل هذا الخط عرض كامل: نعم
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
مباعدة
يزيل التعبئة العلوية الافتراضية من السطر التالي.
- الحشو العلوي: 0px
إضافة وحدة وصف النص إلى عمود 2
أضف محتوى H1
حان وقت إضافة الوحدات. الوحدة الأولى ستكون نصية. يمكنك إضافة أي محتوى تريده.
إعدادات النص H1
ثم انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات H1.
- خط العنوان: Didact Gothic
- وزن العنوان: جريئة
- حجم الخط: 1.8vw (الكمبيوتر) ، 3.8vw (الكمبيوتر اللوحي) ، 4vw (الهاتف)
مباعدة
أضف هوامش مخصصة في قسم التباعد.
- الهامش العلوي: -4vw
- الهامش السفلي: 2vw
- الهامش الأيسر: 30vw
- الهامش الأيمن: 30vw (كمبيوتر) ، 15vw (أجهزة لوحية وهاتف)
إضافة وحدة نمطية فاصل إلى عمود 2
رؤية
الوحدة التالية هي الوحدة الفاصلة. تأكد من تمكين خيار "إظهار الحاجز".
- عرض فاصل: نعم
اللون
ثم انتقل إلى علامة التبويب "تصميم" وقم بتغيير لون الفاصل.
- اللون: #000000
Dimentionnement
قم بتغيير خيارات التباعد أيضًا.
- تباعد الوزن: 8 بكسل
- العرض: 7٪
مباعدة
دائما مع خيارات التحجيم.
- الهامش المنخفض: 1vw
- الهامش الأيسر: 30vw
إضافة وحدة نمطية النص إلى العمود 2
إضافة محتوى
الوحدة التالية ستكون وحدة نصية أخرى. يجب عليك تقديم المحتوى الذي تختاره.
إعداد النص
ثم تحتاج إلى تغيير إعدادات النص في علامة التبويب "التصميم".
- حجم النص: 0.8vw (الكمبيوتر) ، 1.3vw (الكمبيوتر اللوحي) ، 1.6vw (الهاتف)
- ارتفاع الخط: 2.2em
مباعدة
أضف بعض الهوامش في قسم التباعد أيضًا.
- الهامش المنخفض: 3vw
- الهامش الأيسر: 30vw
- الهامش الأيمن: 30vw (كمبيوتر) ، 15vw (أجهزة لوحية وهواتف)
إضافة وحدة زر إلى عمود 2
إعدادات وحدة زر
للوحدة الأخيرة ، والتي ستكون وحدة زر. ستقوم بإضافة المحتوى الذي تختاره وتغيير الإعدادات على النحو التالي:
- استخدام نمط مخصص: نعم
- حجم الخط: 1vw (الكمبيوتر) ، 1.5vw (الكمبيوتر اللوحي) ، 2vw (الهاتف)
- عرض حد الزر: 0px
- خط الزر: بوبينس
- وزن النص: غامق
- نمط الخط: أحرف كبيرة
مباعدة
انتقل إلى إعدادات التباعد وأضف هامشًا خارجيًا مخصصًا بالإضافة إلى هامش داخلي وهذا كل شيء.
- الهامش الخارجي الأيسر: 30vw
- الهامش العالي الداخلي: 1vw
- داخل الهامش المنخفض: 1vw
- الهامش الداخلي الأيسر: 3vw
- الهامش الداخلي الأيمن: 3vw
إلى إنهاء
في هذا البرنامج التعليمي، رأينا كيفية تصميم عنوان بنص متحرك، باستخدام خيارات Divi الداخلية فقط. هذه تقنية ممتازة ستجذب انتباه زوارك بطريقة مبتكرة للغاية.
صباح الخير. عظيم البرنامج التعليمي الخاص بك ، شكرا لك. فعلت ، لكن لدي مشكلة صغيرة. الرسوم المتحركة تحدث مرة واحدة فقط ثم لا تتكرر.