عند تصميم صفحة الخدمات الخاصة بك ، فأنت تريد التأكد من أن ملف آخر لاحظ جميع الخدمات المختلفة التي تقدمها. في كثير من الحالات ، ستكون خدمة واحدة محددة يبحثون عنها فقط ، ولكن إذا قمت بتوفير طريقة مبسطة في هيكل الخدمة الخاص بك ، فمن المرجح أن آخر تعامل معهم جميعًا.
في هذا البرنامج التعليمي ، سنوضح لك كيفية الإبداع باستخدام تأثيرات التمرير الخاصة بـ Divi وإنشاء انتقال سلس للخدمة. ستتمكن أيضًا من تنزيل ملف JSON مجانًا!
دعونا نذهب.
النتيجة المحتملة
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة على أحجام الشاشات المختلفة.
1 ، إعادة بناء هيكل العناصر
إضافة القسم رقم 1
مباعدة
ابدأ بإضافة قسم جديد إلى الصفحة التي تعمل عليها. افتح إعدادات القسم وقم بتغيير قيم المساحة المتروكة على أحجام الشاشات المختلفة.
- المساحة المتروكة العلوية: 80 بكسل (سطح المكتب والجهاز اللوحي) ، 0 بكسل (الهاتف)
- الحشو السفلي: 80px
أضف سطرًا جديدًا
هيكل العمود
متابعة إضافة صف جديد باستخدام بنية العمود التالي:
التحجيم
بدون إضافة المزيد من الوحدات النمطية ، افتح معلمات الخط وقم بتطبيق التغييرات التالية على معلمات الأبعاد:
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
- العرض: 90٪
- العرض الأقصى: 1580 بكسل
مباعدة
ثم قم بإضافة هامش علوي وسفلي مخصص.
- الهامش العلوي: 200px
- الهامش السفلي: 200px
إضافة وحدة نمطية النص إلى العمود 1
أضف محتوى H2
حان الوقت لإضافة وحدات، بدءًا بوحدة نصية في العمود 1. أدخل محتويات H2 من اختيارك.
إعدادات النص H2
انتقل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات نص H2 كما يلي:
- العنوان 2 الشرطة: ربع سنوي
- العنوان 2 حجم النص: 80 بكسل (سطح المكتب) ، 50 بكسل (الكمبيوتر اللوحي) ، 40 بكسل (الهاتف)
- ارتفاع السطر 2 من الرأس: 1.2em
مباعدة
ثم أضف هامشًا أقل على الجهاز اللوحي والهاتف.
- الهامش السفلي: 50 بكسل (الكمبيوتر اللوحي والهاتف فقط)
إضافة وحدة نمطية النص إلى العمود 2
إضافة محتوى
دعنا ننتقل إلى العمود الثاني. هناك الوحدة الأولى التي نحتاجها هي وحدة نصية ذات قيمة معينة محتويات وصف.
إعدادات النص
قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات النص وفقًا لذلك:
- خط النص: المقصورة
- نمط خط النص: أحرف كبيرة
- لون النص: # 000000
- حجم النص: 18 بكسل (سطح المكتب) ، 15 بكسل (الكمبيوتر اللوحي) ، 13 بكسل (الهاتف)
- تباعد الحروف النصية: 3 بكسل (سطح المكتب) ، 1 بكسل (الكمبيوتر اللوحي والهاتف)
- ارتفاع سطر النص: 3em
أضف وحدة فصل إلى العمود 2
رؤية
الوحدة التالية والأخيرة التي نحتاجها في هذا العمود هي وحدة فصل. تأكد من تمكين خيار "إظهار الفاصل".
- إظهار الفاصل: نعم
خط
ثم قم بتغيير لون خط الوحدة.
- لون الخط: # 000000
التحجيم
ثم قم بإجراء بعض التغييرات على معلمات التحجيم.
- وزن المقسم: 3px
- العرض: 28٪
مباعدة
نضيف أيضًا هامشًا علويًا.
- الهامش العلوي: 10px
إضافة القسم رقم 2
مباعدة
دعنا ننتقل إلى القسم العادي التالي. أزل المساحة المتروكة الافتراضية من القسم.
- الحشو العلوي: 0px
الفيضانات
أيضًا إخفاء التدفقات الفائضة.
- تجاوز أفقي: مخفي
- تجاوز عمودي: مخفي
أضف سطرًا جديدًا
هيكل العمود
استمر في إضافة صف أول باستخدام هيكل العمود التالي:
التحجيم
بدون إضافة المزيد من الوحدات النمطية ، افتح معلمات الخط ، وقم بالوصول إلى معلمات الأبعاد وقم بإجراء التعديلات التالية:
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
- معادلة ارتفاع العمود: نعم
- العرض: 90٪
- العرض الأقصى: 1580 بكسل
مباعدة
ثم قم بإزالة كل المساحة المتروكة العلوية والسفلية الافتراضية.
- الحشو العلوي: 0px
- الحشو السفلي: 0px
إعدادات العمود 1
لون الخلفية
ثم افتح إعدادات العمود 1 وقم بتغيير لون الخلفية.
- لون الخلفية: # f7f7f7
مباعدة
أكمل إعدادات العمود بإضافة قيم مساحة متروكة مخصصة على أحجام شاشات مختلفة.
- المساحة المتروكة العلوية: 200 بكسل (المكتب) ، 100 بكسل (الكمبيوتر اللوحي والهاتف)
- المساحة السفلية: 200 بكسل (المكتب) ، 100 بكسل (الكمبيوتر اللوحي والهاتف)
- المساحة المتروكة اليسرى: 8٪
- المساحة المتروكة لليمين: 8٪
إعدادات العمود 2
مباعدة
تابع بفتح الإعدادات في العمود 2. انتقل إلى علامة التبويب "خيارات متقدمة" وأضف قيم حشو مخصصة على أحجام شاشات مختلفة.
- المساحة العلوية: 100 بكسل (سطح المكتب) ، 50 بكسل (الكمبيوتر اللوحي والهاتف)
- الحشو السفلي: 200px
- المساحة المتروكة اليسرى: 150 بكسل (المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
أضف وحدة فصل إلى العمود 1
رؤية
في العمود الأول ، أول وحدة نحتاجها هي وحدة فصل. تأكد من تمكين خيار "إظهار الفاصل".
- إظهار الفاصل: نعم
خط
ثم قم بتغيير لون خط الوحدة.
- لون الخط: # 000000
التحجيم
قم أيضًا بإجراء تغييرات على معلمات التحجيم.
- وزن المقسم: 3px
- العرض: 50٪
إضافة وحدة نمطية النص إلى العمود 1
أضف محتوى H3
الوحدة التالية التي نحتاجها في العمود 1 هي وحدة نصية بها محتويات H3.
إعدادات النص H3
قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات نص H3:
- العنوان 3 الشرطة: ربع سنوي
- لون نص العنصر 3: # 000000
- العنصر 3 حجم النص: 50 بكسل (سطح المكتب) ، 40 بكسل (الكمبيوتر اللوحي) ، 35 بكسل (الهاتف)
- ارتفاع السطر 3 من الرأس: 1.1em
إضافة وحدة نمطية النص إلى العمود 2
إضافة محتوى
في العمود الثاني ، الوحدة الأولى التي نحتاجها هي وحدة نصية مع بعض محتوى الوصف.
إعدادات النص
قم بتغيير إعدادات نص الوحدة كما يلي:
- خط النص: المقصورة
- نمط خط النص: أحرف كبيرة
- حجم النص: 18 بكسل (سطح المكتب) ، 15 بكسل (الكمبيوتر اللوحي) ، 13 بكسل (الهاتف)
- تباعد الحروف النصية: 3 بكسل (سطح المكتب) ، 1 بكسل (الكمبيوتر اللوحي والهاتف)
- ارتفاع سطر النص: 3em
إضافة وحدة زر إلى عمود 2
أضف نسخة
الوحدة التالية والأخيرة التي نحتاجها هي وحدة زر. أدخل نسخة من اختيارك.
إعدادات زر
ثم صمم الزر.
- استخدم الأنماط المخصصة للزر: نعم
- حجم نص الزر: 20 بكسل
- لون نص الزر: #ffffff
- لون خلفية الزر: # 000000
- عرض حد الزر: 0px
- خط الزر: ربع سنوي
- وزن خط الزر: غامق
مباعدة
أضف أيضًا المساحة المتروكة المخصصة.
- الحشو العلوي: 50px
- الحشو السفلي: 50px
- حشوة اليسار: 100px
- الحشوة اليمنى: 100 بكسل
الموقع الحالي
وأعد وضع الزر وفقًا لذلك:
- المنصب: مطلق
- الموقع: أسفل اليسار
استنساخ الخط عدة مرات حسب الضرورة
بمجرد الانتهاء من الخط بالكامل وجميع وحداته ، يمكنك استنساخ الخط بأكمله ثلاث مرات.
تغيير كل المحتوى
تأكد من تحرير كل المحتوى في أسطر مكررة.
2. تطبيق تأثيرات التمرير
تأثيرات التمرير للصف الأول
الحركة الأفقية
بمجرد الانتهاء من جميع الأسطر في القسم الخاص بك ، حان الوقت لإضافة تأثيرات التمرير. افتح الصف الأول من القسم وأضف حركة أفقية.
- تنشيط الحركة الأفقية: نعم
- تعويض البداية: -5
- متوسط الإزاحة: 0 (بنسبة 26 ٪)
- تعويض النهاية: 0
- تأثير حركة الزناد: منتصف العنصر
تتلاشى والخروج
استخدم أيضًا تأثير التلاشي الوارد والصادر.
- تنشيط التلاشي داخل وخارج: نعم
- العتامة الأولية: 100٪
- متوسط العتامة: 100٪ (بنسبة 50٪)
- عتامة النهاية: 0٪ (إلى 53٪)
- تأثير حركة الزناد: منتصف العنصر
تأثيرات التمرير للصف الأوسط
الحركة العمودية
بعد ذلك ، سنضيف تأثيرات التمرير لجميع الأسطر بين السطر الأول والأخير من القسم. استخدم أولاً حركة عمودية:
- تنشيط الحركة العمودية: نعم
- تعويض البداية: -4
- متوسط الإزاحة: 0 (بنسبة 26 ٪)
- تعويض النهاية: 0
- تأثير تحريك الحركة: منتصف العنصر
تتلاشى والخروج
قم أيضًا بتفعيل تأثير التلاشي للداخل والخارج.
- تنشيط التلاشي داخل وخارج: نعم
- العتامة الأولية: 0٪
- متوسط العتامة: 100٪ (من 27٪ إلى 50٪)
- تعويض النهاية: 0 (عند 53٪)
- تأثير حركة الزناد: منتصف العنصر
تأثيرات تمرير الخط الأخير
الحركة العمودية
ثم افتح السطر الأخير من القسم وأضف الحركة الرأسية التالية:
- تنشيط الحركة العمودية: نعم
- تعويض البداية: -4
- متوسط الإزاحة: 0 (بنسبة 26 ٪)
- تعويض النهاية: 0
- تأثير حركة الزناد: منتصف العنصر
تتلاشى والخروج
مع تأثير التلاشي الوارد والصادر ، تكون قد انتهيت!
- تنشيط التلاشي داخل وخارج: نعم
- العتامة الأولية: 0٪
- متوسط العتامة: 100٪ (من 27٪ إلى 50٪)
- عتامة النهاية: 100٪ (إلى 53٪)
- تأثير حركة الزناد: منتصف العنصر
نتيجة نهائية
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على كيفية ظهورها على أحجام الشاشات المختلفة.
الأفكار النهائية
في هذه المقالة ، أوضحنا لك كيفية إنشاء انتقال إرسال جميل باستخدام تأثيرات التمرير الخاصة بـ Divi. حتى قبل أن تختفي إحدى الإرسال ، يبدأ الآخر في الظهور ، مما يعطي انتقالًا لطيفًا يسهل على العين. سيساعدك هذا النهج على إبراز كل خدمة على المستوى الفردي. لقد تمكنت أيضًا من تنزيل ملف JSON مجانًا! إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.
