[ad_1]
دعونا نذهب.
مسح
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة على أحجام الشاشات المختلفة.
مكتب
الهاتف
قم بتنزيل التصميم مجانًا
للحصول على التصميمات المجانية، عليك أولاً تنزيلها بالنقر على الزر أدناه. للوصول إلى التنزيل، عليك الاشتراك في قائمتنا البريدية اليومية Divi باستخدام النموذج أدناه. كمشترك جديد، ستتلقى المزيد من منتجات Divi الرائعة وحزمة تصميمات Divi مجانية كل اثنين! إذا كنت مشتركًا بالفعل في القائمة، فأدخل بريدك الإلكتروني أدناه وانقر على "تنزيل". لن يتم إعادة اشتراكك ولن تتلقى رسائل بريد إلكتروني إضافية.
لنبدأ في إعادة الإنشاء!
أضف 2x أقسام العنصر النائب
إضافة قسم جديد
ابدأ بإضافة قسم عنصر نائب إلى الصفحة التي تعمل عليها.
التحجيم
افتح إعدادات القسم وقم بتغيير الارتفاع في إعدادات التحجيم.
قسم استنساخ
استنساخ القسم مرة واحدة. هذا يترك لك قسمين نائبين على صفحتك. ستساعدك أقسام العناصر النائبة هذه على رؤية التأثير النهائي بعد متابعة البرنامج التعليمي. على موقع الويب المباشر، سيتم استبدال أقسام العناصر النائبة بأقسام عادية تستخدمها في جميع أنحاء الصفحة.
أضف قسمًا جديدًا بين أقسام العناصر النائبة
بمجرد وضع أقسام العنصر النائب في مكانها ، أضف قسمًا جديدًا بين أقسام العنصر النائب.
لون الخلفية
افتح إعدادات القسم واستخدم لون الخلفية الأبيض.
- لون الخلفية: #ffffff
مباعدة
قم بالتبديل إلى علامة تبويب تصميم القسم وقم بتغيير قيم المساحة المتروكة العلوية والسفلية وفقًا لذلك:
- الحشو العلوي: 10vh
- الحشوة السفلية: 10vh
أضف السطر رقم 1
هيكل العمود
تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:
التحجيم
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف ، وانتقل إلى إعدادات التحجيم ، وقم بتغيير الحد الأقصى لقيم العرض والعرض.
- العرض: 100٪
- أقصى عرض: 100٪
إضافة وحدة نمطية النص إلى العمود
أضف نسخة
الوحدة الوحيدة التي نحتاجها لهذا السطر هي وحدة نصية. أضف نسخة من اختيارك.
إعدادات النص
قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات النص وفقًا لذلك:
- خط النص: مونتسيرات
- وزن خط النص: غامق للغاية
- نمط خط النص: أحرف كبيرة
- لون النص: # fff2ea
- حجم النص: 11vw
- ارتفاع سطر النص: 1 م
- محاذاة النص: الوسط
أضف السطر رقم 2
هيكل العمود
أضف صفًا آخر إلى القسم باستخدام بنية العمود التالية:
التحجيم
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم على النحو التالي:
- استخدام عرض هامش مخصص: نعم
- عرض المزراب: 2
- العرض: 90٪
- محاذاة الخط: الوسط
أضف وحدة صورة إلى العمود
تحميل صورة
إضافة وحدة صورة إلى عمود الصف. قم بتحميل صورة من اختيارك.
انحياز
قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير محاذاة الصورة وفقًا لذلك:
التحجيم
ثم انتقل إلى إعدادات التحجيم وفرض العرض الكامل على الوحدة.
إضافة وحدة زر إلى العمود
أضف نسخة
الوحدة التالية والأخيرة التي سنضيفها إلى العمود هي وحدة الزر. استخدم نسخة من اختيارك.
محاذاة الزر
انتقل إلى علامة التبويب "تصميم" وقم بتغيير محاذاة الزر.
إعدادات زر
ثم قم بتصميم الزر على النحو التالي:
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 16 بكسل
- لون نص الزر: # 000000
- لون خلفية الزر: #ffffff
- عرض حد الزر: 0 بكسل
- تباعد حرف الزر: 2 بكسل
- خط الزر: مونتسيرات
- وزن خط الزر: غامق
- نمط خط الزر: أحرف كبيرة
مباعدة
استخدم أيضًا قيم المساحة المتروكة المخصصة في إعدادات التباعد.
- المساحة المتروكة العلوية: 20 بكسل
- المساحة المتروكة السفلية: 20 بكسل
- المساحة المتروكة اليسرى: 5٪
- الحشو الأيمن: 5٪
أضف تحديد الموضع المطلق إلى السطر 1
بعد الانتهاء من الصف الثاني، ارجع إلى الصف رقم 1. افتح إعدادات الصف، وانتقل إلى علامة التبويب خيارات متقدمة واجعل القسم مطلقًا. من خلال القيام بذلك، سيتم وضع السطر ووحدة النص الموجودة بداخله أسفل السطر الذي يحتوي على وحدة الصورة.
- الموقف: مطلق
- الموقع: المركز
استنساخ الصف رقم 1 وضع النسخة المكررة تحت الصف رقم 2
للسماح بظهور وحدة النص أعلى الصورة، سنحتاج إلى صف آخر بقيمة مؤشر z أعلى. انسخ السطر الأول وضع النسخة المكررة تحت السطر الثاني.
قم بتطبيق التأثيرات على الصف 3
زيادة مؤشر Z.
افتح الصف المكرر وقم بتغيير الفهرس z في علامة التبويب خيارات متقدمة.
تغيير لون النص
افتح وحدة النص في الصف وقم بتغيير لون النص.
تطبيق وضع المزج على الخط
ثم افتح إعدادات الصف وقم بتغيير وضع المزج في إعدادات المرشحات.
استخدم تأثير التمرير على وحدة النص في الصف رقم 3
أضف تأثير التلاشي والتلاشي
أكمل البرنامج التعليمي عن طريق فتح وحدة النص مرة أخرى، والانتقال إلى تأثيرات التمرير، وتمكين تأثير التلاشي والتلاشي. هذا كل شيء!
- تمكين التلاشي والتلاشي: نعم
- عتامة البداية: 0٪
- عتامة متوسطة: 0٪ (إلى 26٪)
- التعتيم النهائي: 100٪ (عند 28٪)
- مشغل تأثير الحركة: منتصف العنصر
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على كيفية ظهورها على أحجام الشاشات المختلفة.
مكتب
الهاتف
الأفكار النهائية
في هذه المقالة، أظهرنا لك كيفية الإبداع باستخدام تأثيرات التمرير المضمنة في Divi. على وجه التحديد، أظهرنا لك كيفية مزج النسخة على التمرير. في البداية تظهر النسخة أسفل الصورة. بعد التمرير، تكشف النسخة عن نفسها فوق الصورة وتندمج مع الصورة. لقد تمكنت أيضًا من تنزيل ملف JSON مجانًا! إذا كان لديك أي أسئلة أو اقتراحات، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.
إذا كنت ترغب في معرفة المزيد عن Divi والحصول على المزيد من الهدايا المجانية من Divi، فتأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناتنا على YouTube حتى تكون دائمًا من أوائل الأشخاص الذين يعرفون ويستفيدون من هذا المحتوى المجاني.
[ad_2]
