كيفية تحريك الحروف لتصميمات نصية فريدة في Divi

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

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

هيا بنا نبدأ.

نظرة خاطفة

قم بتنزيل نماذج تصميم الرسوم المتحركة للرسالة مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

ابدء

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

أنت الآن جاهز للتصميم!

بناء التخطيط لتحريك الحروف

إضافة المقطع والصف والعمود

انطلق وأنشئ قسمًا عاديًا جديدًا بصف من عمود واحد.

قبل أن نبدأ في إضافة وحدات النص الخاصة بنا (والتي ستحتوي على أحرف بيضاء) ، دعنا نضيف صورة خلفية داكنة إلى القسم. افتح إعدادات القسم وأضف صورة خلفية. أنا أستخدم صورة خلفية مجردة من التخطيط المسبق للصفحة المقصودة لشركة الاستثمار.

إنشاء كتل أحرف فردية باستخدام وحدات نصية

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

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

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

ثم قم بتحديث إعدادات تصميم النص على النحو التالي:

• خط النص: روبيك
• نمط خط النص: TT
• لون نص النص: #ffffff
• حجم نص النص: 80 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 30 بكسل (هاتف)
• ارتفاع خط النص: 1.6em
• اتجاه النص: الوسط

بعد ذلك ، أضف رسمًا متحركًا إلى وحدة النص على النحو التالي:

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

قم بتكرار وحدة النص وتحديث المحتوى بالحرف "i". ثم قم بزيادة تأخير الرسوم المتحركة بمقدار 100 مللي ثانية على النحو التالي:

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

قم بتكرار وحدة النص وتحديث المحتوى بالحرف "v". ثم قم بزيادة تأخير الرسوم المتحركة إلى 300 مللي ثانية.

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

قم بتكرار وحدة النص وتحديث المحتوى بالحرف "i". ثم قم بزيادة تأخير الرسوم المتحركة إلى 400 مللي ثانية.

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

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

 

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

ثم قم بتكرار وحدة النص وتحديث المحتوى بالحرف "d". هذا هو الحرف الأول في كلمة "تصميم". ثم قم بزيادة تأخير الرسوم المتحركة إلى 500 مللي ثانية.

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

استمر في عملية تكرار وحدة النص وزيادة تأخير الرسوم المتحركة بمقدار 100 مللي ثانية لكل حرف من الأحرف المتبقية التي توضح كلمة "تصميم".

• الحرف "e": الرسوم المتحركة تأخير 600 مللي ثانية
• الحرف "s": الرسوم المتحركة تأخير 700 مللي ثانية
• الحرف "i": الرسوم المتحركة تأخير 800 مللي ثانية
• الحرف "g": الرسوم المتحركة تأخير 900 مللي ثانية
• الحرف "n": تأخير الحركة بمقدار 1000 مللي ثانية

هذا ما يبدو عليه التصميم حتى الآن.

إضافة خاصية Flex لمحاذاة الوحدات أفقيًا

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

display: flex;

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

نحتاج أيضًا إلى إضافة عرض هامش مخصص لإخراج الهامش السفلي أسفل الأحرف وإضافة بعض المساحة المتروكة العلوية والسفلية للصف بحيث يكون للأحرف مساحة للتحريك.

• عرض الحضيض: 1
• الحشو المخصص: 5vw top، 5vw bottom

هنا هو النتيجة النهائية.

إضافة أنماط مختلفة للرسوم المتحركة

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

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

أقترح تكرار القسم قبل اختبار رسم متحرك جديد بحيث يمكنك الاحتفاظ بالأمثلة السابقة.

وفيما يلي بعض الأمثلة على ذلك.

عكس حركة نص التكبير

لتحريك الأحرف بتأثير تكبير عكسي ، قم بتحديث إعدادات العنصر (إعدادات جميع الوحدات) بما يلي:

• نمط الرسوم المتحركة: تكبير
• اتجاه الرسوم المتحركة: المركز
• كثافة الرسوم المتحركة: 200٪

هنا هو النتيجة النهائية.

المتداول نص الرسوم المتحركة

لتحريك الحروف بتأثير الموجة المتدحرجة ، قم بتحديث إعدادات العنصر (الإعدادات لجميع الوحدات) بما يلي:

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

هنا هو النتيجة النهائية.

دومينو نص متحرك

لتحريك النص بتأثير الدومينو ، قم بتحديث إعدادات العنصر (إعدادات جميع الوحدات) بما يلي:

• نمط الرسوم المتحركة: قلب
• اتجاه الرسوم المتحركة: يسار
• كثافة الرسوم المتحركة: 100٪

هنا هو النتيجة النهائية.

وضع نص متحرك

لتحريك النص بتأثير الدومينو ، قم بتحديث إعدادات العنصر (إعدادات جميع الوحدات) بما يلي:

• نمط الرسوم المتحركة: أضعاف
• اتجاه الرسوم المتحركة: لأعلى
• كثافة الرسوم المتحركة: 100٪

ثم أضف منظورًا لإنشاء عنصر تصميم ثلاثي الأبعاد عن طريق إضافة css التالي إلى عنصر العمود الرئيسي ضمن إعدادات الصف.

عنصر العمود الرئيسي CSS:

perspective: 1000px;

هنا هو النتيجة النهائية.

حرك الحروف باستخدام مجموعة من اتجاهات الرسوم المتحركة

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

هيريس كيفية القيام بذلك.

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

ثم احذف أول 4 وحدات نصية بحيث يتم عرض النص "التصميم" فقط.

إعدادات القسم

بعد ذلك ، نظرًا لأننا نريد أن تبدأ بعض الأحرف في الرسم المتحرك خارج إطار عرض القسم ، فسنحتاج إلى إضافة مقتطف صغير من css إلى إعدادات القسم على النحو التالي:

overflow: hidden;

سيؤدي ذلك إلى إبقاء الحروف مخفية حتى دخولها إلى القسم.

إعدادات الصف

الآن ، للتأكد من بقاء الوحدات النصية (الحروف) في المنتصف ، نحتاج إلى إضافة css التالية إلى إعدادات الصف:

display:flex;
justify-content: center;

الإعدادات العامة لوحدة النص

باستخدام التحديد المتعدد ، قم بتحديث جميع وحدات النص الستة بإعدادات العناصر التالية:

• الهامش المخصص: 3٪ يسار ، 3٪ يمين
• عرض الحدود: 1 بكسل
• لون الحدود: #ffffff

• نمط الرسوم المتحركة: شريحة
• مدة الرسوم المتحركة: 2000 مللي ثانية
• تأخير الرسوم المتحركة: 100 مللي ثانية
• كثافة الرسوم المتحركة: 300٪

هذا يعتني بإعدادات الرسوم المتحركة الأساسية التي ستكون مشتركة بين جميع وحدات النص. الآن يمكننا إدخال تعديل على إعدادات الرسوم المتحركة لكل منهم على حدة.

الإعدادات الفردية لوحدة النص

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

• الحرف د
  اتجاه الرسوم المتحركة: لأعلى
• الحرف E
  اتجاه الرسوم المتحركة: لأسفل
• حروف
  اتجاه الرسوم المتحركة: يسار
  كثافة الرسوم المتحركة: 80٪
• الحرف الأول
  اتجاه الرسوم المتحركة: صحيح
  كثافة الرسوم المتحركة: 80٪
• الحرف G
  اتجاه الرسوم المتحركة: لأسفل
• حرف N
  اتجاه الرسوم المتحركة: لأعلى

ها هو التصميم النهائي.

وإليك كيف يبدو على الهاتف المحمول.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!