كيفية جعل العنوان الخاص بك البوب ​​مع إعدادات الرسوم المتحركة Divi

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

سنقوم بدمج إعدادات الرسوم المتحركة لـ Divi لإنشاء عنوان بارز يجذب انتباه زوارك. سنقسم العنوان إلى 5 أجزاء وننشئ تأثيرًا فلاشًا سيجعل زوارك يرغبون في متابعة الحركة وقراءة ما تتم مشاركته.

دعنا نذهب اليها!

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة على أحجام الشاشات المختلفة.

سطح المكتب

متحرك

لنبدأ في إعادة التكوين!

إضافة قسم جديد

لون الخلفية

لنبدأ في الإنشاء! قم بإنشاء صفحة جديدة وإضافة قسم عادي إليها. افتح إعدادات القسم وقم بتغيير لون الخلفية.

• لون الخلفية: #eded

تباعد

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

• الحشو السفلي: 10vw

أضف الصف رقم 1

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

لون الخلفية

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتغيير لون خلفية الصف.

• لون الخلفية: # c9c9c9

تحجيم

انتقل إلى إعدادات التحجيم التالية واسمح للصف بأن يشغل عرض الشاشة بالكامل.

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

قم بإزالة المساحة المتروكة الافتراضية العلوية والسفلية للصف أيضًا.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف وحدة نصية # 1

إضافة محتوى

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

لون الخلفية

بعد ذلك ، انتقل إلى إعدادات الخلفية للوحدة النمطية وأضف لونًا للخلفية.

• لون الخلفية: # c9c9c9

إعدادات النص

قم بتغيير إعدادات النص في علامة تبويب التصميم أيضًا.

• خط النص: Didact Gothic
• وزن خط النص: غامق
• لون النص: # 000000
• حجم النص: 10vw
• ارتفاع خط النص: 0.9em
• اتجاه النص: الوسط

تباعد

وأنشئ الشكل الذي تريده باستخدام المساحة المتروكة العلوية والسفلية المخصصة.

• الحشوة العلوية: 10vw
• الحشو السفلي: 3vw

حيوية

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

• نمط الرسوم المتحركة: تتلاشى
• كرر الرسوم المتحركة: مرة واحدة
• مدة الرسوم المتحركة: 0 مللي ثانية
• تأخير الرسوم المتحركة: 1000 مللي ثانية

وحدة استنساخ النص x4

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

تغيير تكرار # 1

المحتوى

قم بتغيير نسخة النسخة الأولى.

لون الخلفية

جنبا إلى جنب مع لون الخلفية.

• لون الخلفية: # 5900ff

لون الخط

تغيير لون النص إلى الأبيض.

• لون النص: #ffffff

حيوية

وزيادة تأخير الرسوم المتحركة في إعدادات الرسوم المتحركة. سيسمح هذا للزائرين بالحصول على وقت كافٍ لقراءة وحدة النص السابقة قبل ظهور هذه الوحدة.

• تأخير الرسوم المتحركة: 1500 مللي ثانية

تغيير تكرار # 2

المحتوى

قم بتغيير محتوى النسخة الثانية التالية.

لون الخلفية

جنبا إلى جنب مع لون الخلفية.

• لون الخلفية: # ffb200

لون الخط

ولون النص أيضا.

• لون النص: #ffffff

حيوية

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

• تأخير الرسوم المتحركة: 2000 مللي ثانية

تغيير تكرار # 3

المحتوى

تابع عن طريق تغيير محتوى النسخة الثالثة.

حيوية

جنبا إلى جنب مع تأخير الرسوم المتحركة.

• تأخير الرسوم المتحركة: 2500 مللي ثانية

تغيير تكرار # 4

المحتوى

إلى التكرار التالي والأخير. غيّر المحتوى.

لون الخلفية

جنبا إلى جنب مع لون الخلفية.

• لون الخلفية: # 000000

لون الخط

تعديل لون النص أيضا.

• لون النص: # 3a3a3a

حيوية

وزيادة تأخير الرسوم المتحركة في إعدادات الرسوم المتحركة.

• تأخير الرسوم المتحركة: 3000 مللي ثانية

أضف هامشًا سلبيًا إلى كل وحدة نصية باستثناء الأولى

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

• الهامش العلوي: -21.98vw

تحويل الصف

تحويل الترجمة

تابع بتحويل الصف بأكمله ، بدءًا من إعدادات ترجمة التحويل.

• القاع: -35vw

استدارة التحويل

قم بتعديل قيم تدوير التحويل أيضًا.

• اليسار: 320 درجة

أضف الصف رقم 2

هيكل العمود

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

تحجيم

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف واسمح للصف باحتلال عرض الشاشة بالكامل في إعدادات التحجيم:

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

أزل المساحة المتروكة الافتراضية للصف التالي.

• الحشوة العلوية: 0 بكسل

أضف وحدة نص العنوان إلى العمود 2

أضف محتوى H1

حان الوقت لبدء إضافة الوحدات! الوحدة الأولى التي نحتاجها هي وحدة نص العنوان. أضف بعض محتوى H1 من اختيارك.

إعدادات نص H1

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات نص H1.

• خط العنوان: Didact Gothic
• وزن خط العنوان: غامق
• حجم نص العنوان: 1.8vw (Desktop) ، 3.8vw (Tablet) ، 4vw (Phone)

تباعد

أضف بعض قيم الهوامش المخصصة إلى إعدادات التباعد.

• الهامش العلوي: -4vw
• الهامش السفلي: 2vw
• الهامش الأيسر: 30vw
• الهامش الأيمن: 30vw (سطح المكتب) ، 15vw (الجهاز اللوحي والهاتف)

أضف وحدة Divider إلى العمود 2

الرؤية

الوحدة التالية التي نحتاجها هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

اللون

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير لون الفاصل.

• اللون: # 000000

تحجيم

قم بتعديل إعدادات التحجيم أيضًا.

• وزن الحاجز: 8 بكسل
• العرض: 7٪

تباعد

جنبا إلى جنب مع إعدادات التباعد.

• الهامش السفلي: 1vw
• الهامش الأيسر: 30vw

أضف وحدة نص الوصف إلى العمود 2

إضافة محتوى

الوحدة التالية التي نحتاجها هي وحدة نصية أخرى. أدخل بعض المحتوى من اختيارك.

إعدادات النص

بعد ذلك ، قم بتعديل إعدادات النص في علامة تبويب التصميم.

• حجم النص: 0.8vw (سطح المكتب) ، 1.3vw (جهاز لوحي) ، 1.6vw (هاتف)
• ارتفاع خط النص: 2.2em

تباعد

أضف بعض قيم الهوامش المخصصة في إعدادات التباعد أيضًا.

• الهامش السفلي: 3vw
• الهامش الأيسر: 30vw
• الهامش الأيمن: 30vw (سطح المكتب) ، 15vw (الجهاز اللوحي والهاتف)

أضف وحدة الزر إلى العمود 2

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1vw (سطح المكتب) ، 1.5vw (جهاز لوحي) ، 2vw (هاتف)
• عرض حد الزر: 0 بكسل
• خط الزر: بوبينز
• وزن الخط: عريض
• نمط الخط: أحرف كبيرة

تباعد

انتقل إلى إعدادات التباعد وأضف بعض قيم الهوامش والحشو المخصصة ، وقد انتهيت!

• الهامش الأيسر: 30vw
• الحشوة العلوية: 1vw
• الحشو السفلي: 1vw
• الحشوة اليسرى: 3vw
• الحشوة اليمنى: 3vw

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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