كيفية إنشاء تأثير تمرير نص القطع في 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.

الجزء الأول: تصميم القسم

في هذا الجزء الأول ، سنقوم بتصميم خلفية القسم لتخطيط القسم الخاص بنا.

لون الخلفية

للبدء ، أضف لون الخلفية إلى القسم الافتراضي كما يلي:

• خلفية متدرجة اللون الأيسر: # 29c4a9
• خلفية متدرجة اللون الصحيح: # 2b87da

مقسم

ضمن علامة تبويب التصميم ، أضف حاجزًا علويًا كما يلي:

• نمط الفاصل العلوي: انظر الصورة
• لون الفاصل: أبيض
• فاصل الوجه: عمودي

تباعد

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

• الهامش: 80vh أعلى ، 80vh أسفل
• المساحة المتروكة: 200 بكسل للأعلى ، و 200 بكسل للأسفل

مربع الظل لمساحة سفلية إضافية

من أجل الحصول على بعض ألوان / مساحة التصميم الإضافية في الجزء السفلي من القسم دون المساس بالمساحة الفعلية للقسم ، يمكننا إضافة ظل مربع على النحو التالي:

• Box Shadow: انظر لقطة الشاشة
• مربع الظل الوضع الأفقي: 0 بكسل
• مربع الظل الرأسي: 100 بكسل
• لون الظل: # 2b87da

الرؤية مخفية

ثم اضبط الفائض على مخفي حتى لا تظهر تأثيرات التمرير عند التحرك خارج القسم.

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

الجزء 2: إنشاء تأثير النص المائل

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

أضف صفًا للنصف العلوي من النص

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

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

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

رؤية العمود مخفية

بعد ذلك ، افتح إعدادات العمود وقم بتحديث التجاوز إلى مخفي:

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

أضف وحدة نصية

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

محتوى النص

في منطقة محتوى النص ، أضف كلمة "Slash".

تصميم نصي

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

• خط النص: B612 Mono
• وزن خط النص: غامق
• نمط خط النص: TT
• لون نص النص: #ffffff
• حجم نص النص: 150 بكسل (سطح المكتب) ، 100 بكسل (جهاز لوحي) ، 60 بكسل (هاتف)
• تباعد الرسائل النصية: 0.1em
• محاذاة النص: مركز

هامش النص

هنا نحتاج إلى التأكد من إضافة هامش سفلي يساوي نصف حجم النص بالضبط.

• الهامش: -75 بكسل أسفل (سطح المكتب) ، -50 بكسل (كمبيوتر لوحي) ، -30 بكسل (هاتف)

أضف صفًا للنصف السفلي من النص

صف مكرر

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

تحديث هامش وحدة النص

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

• الهامش: -75 بكسل أعلى (سطح المكتب) ، -50 بكسل أعلى (كمبيوتر لوحي) ، -30 بكسل أعلى (هاتف)

أضف تأثيرات التمرير إلى عمود الصف العلوي

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

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

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

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

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

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة: 0 (عند 0٪)
• تعويض متوسط: 0 (عند 50٪)
• إزاحة النهاية: 0.2 (عند 75٪)

ضمن علامة التبويب "التناوب" ...

• تمكين التدوير: نعم
• بدء الدوران: 0 (عند 0٪)
• دوران متوسط: 0 (عند 50٪)
• نهاية الدوران: 1 درجة (عند 75٪)

الآن اكتمل تأثير النص المائل!

الجزء 3: إنشاء الحاجز المتحرك

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

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

اضف سطر

أضف صفًا من عمود واحد تحت الصف الثاني.

إضافة وحدة المقسم

في العمود ، أضف وحدة مقسم جديدة.

خلفية المقسم

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

• خلفية متدرجة اللون الأيسر: شفاف
• تدرج الخلفية اللون الصحيح: # 29c4a9

مقياس التحويل

ثم قم بتحديث الارتفاع وانقله إلى اليسار باستخدام خيار ترجمة التحويل.

• الارتفاع: 4 بكسل
• محور التحويل X للترجمة: -100٪

تأثير التمرير

أضف الآن تأثير التمرير لتحريك الحاجز إلى اليمين.

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

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة: -18 (عند 25٪)
• تعويض متوسط: 0 (عند 50٪)
• إزاحة النهاية: 13 (عند 75٪)

إعدادات الصف

للتأكد من أن الفاصل "مائل" خلال منتصف النص ، نحتاج إلى تحديث إعدادات الصف على النحو التالي:

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

الآن سوف ينتقل الحاجز من اليسار إلى اليمين مائلًا عبر منتصف النص.

الجزء 4: إضافة النص الأساسي

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

اضف سطر

أضف صفًا جديدًا مكونًا من عمود واحد أسفل الصف الذي يحتوي على الفاصل.

أضف وحدة نصية

ثم أضف وحدة نصية جديدة إلى الصف.

محتوى النص

ثم الصق HTML التالي في منطقة النص:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<a href=""> | Learn More ></a>

تصميم نصي

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

• لون نص النص: #ffffff
• لون نص الرابط: # 121212
• حجم نص الرابط: 20 بكسل

إعدادات الصف

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

• عرض الحضيض: 1
• العرض الأقصى: 400 بكسل
• الموقف: مطلق
• الموقع: مركز القاع
• الإزاحة العمودية: 20 بكسل (سطح المكتب والجهاز اللوحي) ، -25 بكسل (الهاتف)

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

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

افكار اخيرة

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

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

هتافات!