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

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على التصميمات التي سنقوم ببنائها في هذا البرنامج التعليمي.

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد واختر ملف التنزيل من جهاز الكمبيوتر الخاص بك.

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

تصميم قناع نص مع رسوم متحركة للخلفية في Divi

اضف سطر

لبدء الأمور ، أضف صفًا من عمودين إلى القسم العادي الافتراضي.

تحديث إعدادات القسم

قبل إضافة أي وحدات نمطية ، افتح إعدادات القسم وقم بتحديث لون الخلفية والحشو كما يلي:

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

• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

تحديث إعدادات الصف

بعد الانتهاء من إعدادات القسم ، افتح إعدادات الصف وقم بتحديث إعدادات التصميم التالية:

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

من المهم ضبط عرض الحضيض على 1 والعرض إلى 100٪ لأننا سنستخدم وحدة طول vw للنص عند إنشاء تصميم قناع النص. نظرًا لأن وحدة الطول vw تعتمد على عرض المتصفح ، فمن المهم أن يكون للحاويات الرئيسية (القسم والصف) نفس عرض المتصفح الذي يبلغ 100٪.

تحديث إعدادات العمود 1

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

افتح إعدادات العمود 1 وقم بتحديث ما يلي:

• لون الخلفية: # 750046
• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

إنشاء قناع النص

لإنشاء قناع النص ، أضف وحدة نصية إلى العمود 1.

محتوى النص

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

خلفية النص

بعد ذلك ، أضف لون خلفية بيضاء إلى وحدة النص.

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

تصميم نصي

بعد ذلك ، ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• خط النص: Rubik Mono One
• نمط خط النص: TT
• لون نص النص: # 000000
• حجم نص النص: 25vw (سطح المكتب) ، 50vw (الجهاز اللوحي والهاتف)
• ارتفاع خط النص: 0.8em
• محاذاة النص: مركز

• الحشو: 8vw أعلى ، 8vw أسفل

وضع مزج النص

لإكمال تصميم قناع النص ، أضف وضع المزج التالي:

• وضع المزج: الشاشة

حتى الآن ، المكونات الأربعة الرئيسية لتأثير قناع النص هذا هي كما يلي:

1. خلفية العمود
2. خلفية النص الأبيض
3. نص أسود
4. وضع مزج الشاشة في وحدة النص

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

أضف صورة الخلفية

لإضافة صورة الخلفية إلى قناع النص ، أنشئ وحدة صورة جديدة وحمِّل صورة تقريبًا 1700 × 2500 بكسل. حجم الصورة مهم بحيث تغطي الصورة ارتفاع وعرض العمود.

تصميم الصور

ثم قم بتحديث إعدادات التصميم التالية:

• فرض عرض كامل: نعم
• وضع المزج: الشاشة

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

موقف الصورة

بعد ذلك ، امنح الصورة موضعًا مطلقًا وقم بتحديث فهرس Z بحيث يكون خلف وحدة النص.

• الموقف: مطلق
• مؤشر Z: -1

تأثيرات تمرير الصورة

بمجرد أن يصبح تصميم الصورة جاهزًا ، انتقل إلى علامة التبويب خيارات متقدمة وقم بتحديث خيارات تأثير التمرير على النحو التالي:

تحت علامة التبويب "الحركة العمودية" ،

• بداية الإزاحة: -1 (عند 0٪)
• تعويض متوسط: 0 (عند 50٪)
• إزاحة النهاية: 1 (عند 100٪)

تحت علامة التبويب "الحركة الأفقية" ،

• بداية الإزاحة: -0.5 (عند 0٪)
• تعويض متوسط: 0 (عند 50٪)
• إزاحة النهاية: 0.5 (عند 100٪)

ضمن علامة التبويب "توسيع النطاق لأعلى ولأسفل" ،

• مقياس البدء: 110٪ (عند 0٪)
• مقياس متوسط: 125٪ (عند 50٪)
• مقياس النهاية: 140٪ (عند 100٪)

نتيجة

يمكنك إضافة بعض الهامش العلوي والسفلي إلى القسم بحيث يمكنك التحقق من النتيجة حتى الآن.

إنشاء نص وهمي

في العمود الأيمن ، أضف وحدة نصية جديدة.

قم بتحديث محتوى الجسم بما يلي:

<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

ثم تحديث إعدادات تصميم النص الإعلاني التالي:

• لون النص: فاتح
• خط العنوان 2: Rubik
• حجم نص العنوان 2: 4vw
• الحشو (سطح المكتب): 16vw أعلى ، 5vw يسار ، 5vw يمين
• الحشو (الجهاز اللوحي): 16vw أعلى ، 16vw أسفل ، 5vw يسار ، 5vw يمين

نتيجة

تعديلات اختيارية

خلفية سوداء / نص أبيض

إذا كنت تريد استخدام خلفية سوداء لقناع النص ، فكل ما عليك فعله هو تحديث الخيارات الثلاثة الرئيسية التي تشكل تأثير إخفاء النص.

افتح إعدادات وحدة النص وقم بتغيير ما يلي:

• لون الخلفية: # 000000 (أسود)
• لون نص النص: #ffffff (أبيض)
• وضع المزج: الضرب

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

تدوير صورة PNG

ويمكنك تغيير الصورة المتحركة إلى صورة ذات خلفية شفافة (PNG) للحصول على تأثير رائع آخر. فيما يلي مثال على صورة PNG استخدمتها مع إضافة تأثير التمرير الدوار.

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

هنا نظرة أخرى على جميع التصاميم.

افكار اخيرة

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

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

هتافات!