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

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل The Text Block Animation Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

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

أضف القسم رقم 1

خلفية متدرجة

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

• اللون 1: # ff0f2b
• اللون 2: # c10b1a
• نوع التدرج: خطي
• اتجاه التدرج: 63 درجة

تباعد

انتقل إلى علامة تبويب تصميم القسم وقم بتطبيق قيم الحشو العلوية والسفلية المخصصة التالية عبر أحجام الشاشات المختلفة:

• الحشوة العلوية: 7vw (سطح المكتب) ، 20vw (كمبيوتر لوحي) ، 25vw (هاتف)
• الحشوة السفلية: 7vw (سطح المكتب) ، 20vw (كمبيوتر لوحي) ، 25vw (هاتف)

الحدود

أضف حدًا إلى القسم أيضًا.

• عرض الحدود: 2vw (أعلى ، يسار ، يمين)
• عرض الحد السفلي: 0vw
• لون الحدود: #ffffff

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

افتح إعدادات الصف وقم بتغيير إعدادات التحجيم وفقًا لذلك:

• العرض: 100٪
• العرض الأقصى: 100٪

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

أضف محتوى H1

ثم أضف وحدة نصية بعنوان H1 من اختيارك.

أضف علامات Div إلى كل كلمة في عنوان H1

قم بالتبديل إلى علامة تبويب النص في نسخة العنوان وأضف div مختلفًا إلى كل كلمة في العنوان. يجب أن يكون معرف CSS مختلفًا لكل كلمة.

<h1><div id="word-1" class="display-state">Ready</div>
<div id="word-2" class="display-state">to</div>
<div id="word-3" class="display-state">Build</div>
<div id="word-4" class="display-state">Beautiful</div>
<div id="word-5" class="display-state">Websites?</div></h1>

إعدادات نص H1

انتقل إلى علامة تبويب تصميم الوحدة وقم بتعديل إعدادات نص H1 وفقًا لذلك:

• خط العنوان: Work Sans
• وزن خط العنوان: متوسط
• لون نص العنوان: #ffffff
• حجم نص العنوان: 4vw (سطح المكتب) ، 5vw (الجهاز اللوحي) ، 6vw (الهاتف)
• ارتفاع خط العنوان: 1.4em

تباعد

بعد ذلك ، قم بتعديل قيم الهامش عبر أحجام الشاشات المختلفة.

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

أضف وحدة التعليمات البرمجية إلى العمود

أدخل كود CSS

لجعل الرسوم المتحركة للكتلة النصية تنطبق على عنواننا ، سنحتاج إلى بعض أكواد CSS. سنضيف كود CSS هذا إلى وحدة كود جديدة.

<style>

.display-state {
display: inline !important;
}

#word-1 {
-webkit-animation: slide-right 0.5s linear 0.3s both;
	        animation: slide-right 0.5s linear 0.3s both;
}

#word-2 {
-webkit-animation: slide-right 0.5s linear 0.6s both;
	        animation: slide-right 0.5s linear 0.6s both;
}

#word-3 {
-webkit-animation: slide-right 0.5s linear 0.9s both;
	        animation: slide-right 0.5s linear 0.9s both;
}

#word-4 {
-webkit-animation: slide-right 0.5s linear 1.2s both;
	        animation: slide-right 0.5s linear 1.2s both;
}
#word-5 {
-webkit-animation: slide-right 0.5s linear 1.5s both;
	        animation: slide-right 0.5s linear 1.5s both;
}

@-webkit-keyframes slide-right {
0% {
background-color: #000;
opacity: 0.5;
color: transparent;
}

1% {
opacity: 1;
}
}

</style>

تباعد

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

• الهامش السفلي: 0 بكسل

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

أضف نسخة

الوحدة التالية التي نحتاجها هي وحدة الأزرار. أدخل نسخة من اختيارك.

إعدادات الزر

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات الزر وفقًا لذلك:

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

• خط الزر: العمل بلا

تباعد

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

• الهامش العلوي: 3vw (سطح المكتب) ،
• الهامش الأيسر: 20vw (سطح المكتب والكمبيوتر اللوحي) ، 15vw (الهاتف)
• الحشوة العلوية: 1.2vw (سطح المكتب) ، 2vw (Tablet) ، 4vw (Phone)
• الحشوة السفلية: 1.2vw (سطح المكتب) ، 2vw (الكمبيوتر اللوحي) ، 4vw (الهاتف)
• الحشوة اليسرى: 1.8vw (سطح المكتب) ، 3vw (Tablet) ، 6vw (Phone)
• الحشو الأيمن: 1.8vw (سطح المكتب) ، 3vw (Tablet) ، 6vw (Phone)

حيوية

تخصيص إعدادات الرسوم المتحركة أيضًا.

• نمط الرسوم المتحركة: قلب
• اتجاه الرسوم المتحركة: لأسفل
• تأخير الرسوم المتحركة: 2000 مللي ثانية
• كثافة الرسوم المتحركة: 100٪
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج
• كرر الرسوم المتحركة: مرة واحدة

أضف القسم رقم 2

تابع عن طريق إضافة قسم عادي جديد أسفل القسم السابق مباشرة.

تباعد

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

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

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

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

• العرض: 100٪
• العرض الأقصى: 100٪

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

إضافة محتوى

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

لون الخلفية

أضف لون خلفية بيضاء.

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

إعدادات النص

انتقل إلى علامة تبويب تصميم الوحدة وقم بتعديل إعدادات النص وفقًا لذلك:

• خط النص: Work Sans
• لون النص: # 9b9b9b
• حجم النص: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• ارتفاع خط النص: 2.6em

تباعد

أضف بعض قيم التباعد المخصصة عبر أحجام الشاشات المختلفة أيضًا.

• الهامش العلوي: -5vw (سطح المكتب) ، -20vw (جهاز لوحي) ، -27vw (هاتف)
• الهامش الأيسر: 20vw (سطح المكتب) ، 13vw (كمبيوتر لوحي) ، 8vw (هاتف)
• الهامش الأيمن: 20vw (سطح المكتب) ، 13vw (كمبيوتر لوحي) ، 8vw (هاتف)
• الحشوة العلوية: 5vw (سطح المكتب) ، 7vw (الجهاز اللوحي والهاتف)
• الحشوة السفلية: 5vw (سطح المكتب) ، 7vw (الكمبيوتر اللوحي والهاتف)
• الحشو الأيسر: 3vw (سطح المكتب) ، 5vw (كمبيوتر لوحي) ، 6vw (هاتف)
• الحشو الأيمن: 3vw (سطح المكتب) ، 5vw (جهاز لوحي) ، 6vw (هاتف)

مربع الظل

وأكمل إعدادات الوحدة بتطبيق ظل مربع دقيق. هذا كل شيء!

• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.1)

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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