عند عرض عبارات متعددة تحث المستخدم على اتخاذ إجراء على صفحتك ، قد يكون من المفيد إنشاء تأثير تمرير تفاعلي يوحد العناصر المختلفة. يتمثل أحد الحلول في تحويل الوحدات النمطية إلى عناصر ثابتة أثناء تحركها في حاوية العمود الخاصة بها. في البرنامج التعليمي اليوم ، سوف نوضح لك كيفية إنشاء تصميم جميل يتعامل مع هذه التقنية. ستتمكن أيضًا من تنزيل ملف JSON مجانًا!
دعونا نذهب.
مسح
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة أخيرة على كيفية عمله مع أحجام الشاشات المختلفة.
لنبدأ إعادة!
إضافة قسم جديد
ابدأ بإضافة قسم منتظم جديد إلى الصفحة التي تعمل عليها.
مباعدة
افتح إعدادات القسم وقم بتغيير الهوامش السفلية والعلوية لأحجام الشاشة المختلفة.
- سطح التنجيد: 7vw (سطح المكتب) ، 10vw (الكمبيوتر اللوحي) ، 15vw (الهاتف)
- مواد التنجيد في الأسفل: 20vw (سطح المكتب) ، 7vw (الكمبيوتر اللوحي) ، 10vw (الهاتف)
أضف سطرًا جديدًا
هيكل العمود
متابعة إضافة صف جديد باستخدام بنية الأعمدة التالية:
التحجيم
بدون إضافة أي وحدات بعد ، افتح إعدادات الصف واتركها تشغل عرض القسم بالكامل. وهو أيضا مهم جدا تفعيل خيار "Equalize Column Heights". من خلال القيام بذلك ، ستنشئ مساحة فارغة في الأعمدة تسمح للوحدات الثابتة بالتحرك بحرية أثناء التمرير في الصفحة.
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
- معادلة ارتفاع العمود: نعم
- العرض: 100٪
- الحد الأقصى للعرض: 100٪
العمود 2 الحشو العليا
ثم افتح الإعدادات لعمود 2 وأضف بعض الملء العلوي على سطح المكتب.
- الحشو العلوي: 20vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
العمود 3 الحشو العليا
أضف أيضًا قيمة تعبئة أعلى مخصصة إلى العمود الثالث.
- أفضل الحشوة: 40vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
العمود 4 الحشو العليا
واستكمل معلمات الخط بإضافة قيمة تعبئة أعلى إلى عمود 4.
- الحشو العلوي: 60vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
أضف CTA إلى عمود 1
إضافة محتوى
حان الوقت للبدء في إضافة وحدات! الوحدة الأولى التي نحتاجها في العمود 1 هي وحدة CTA (Call to Action). إدراج محتويات دي VOTRE CHOIX.
امتياز
أضف أيضًا ارتباطًا إلى الزر. سيسمح هذا للزر بالظهور في التصميم.
- عنوان URL لرابط الزر: #
لون الخلفية
تغيير لون خلفية الوحدة بعد ذلك.
- لون الخلفية: #ffffff
إعدادات النص
قم بالتبديل إلى علامة التبويب "تصميم" وقم بتغيير إعدادات النص العامة.
- محاذاة النص: المركز
- لون النص: الظلام
إعدادات نص العنوان
قم أيضًا بتغيير إعدادات النص الخاصة بالعنوان.
- العنوان مستوى العنوان: H3
- عنوان النص: الطيفية
- عنوان نص اللون: # 000000
- حجم عنوان النص: 2vw (سطح المكتب) ، 4vw (قرص) ، 6vw (هاتف)
إعدادات نص الجسم
مع معالم نص النص.
- خط الجسم: Fira Sans
- وزن الخط: الضوء
- نص ملون للجسم: # 000000
- حجم النص الأساسي: 1vw (سطح المكتب) ، 2vw (الكمبيوتر اللوحي) ، 3vw (الهاتف)
- ارتفاع الجسم: 1.8em
إعدادات زر
لا تنس تصميم زر وحدة الحث على الشراء أيضًا.
- استخدم الأنماط المخصصة للزر: نعم
- حجم نص الزر: 1vw (سطح المكتب) ، 2vw (قرص) ، 3vw (هاتف)
- لون نص الزر: #ffffff
- لون خلفية الزر: #444eff
- عرض حد الزر: 0px
- نصف قطر حد الزر: 50vw
- زر الخط: Fira Sans
- الحشو العلوي: 1vw (سطح المكتب) ، 2vw (الكمبيوتر اللوحي) ، 3vw (الهاتف)
- مواد التنجيد في الأسفل: 1vw (سطح المكتب) ، 2vw (الكمبيوتر اللوحي) ، 3vw (الهاتف)
- الحشوة اليسرى: 3vw (سطح المكتب) ، 7vw (الكمبيوتر اللوحي) ، 13vw (الهاتف)
- مواد التنجيد على اليمين: 3vw (سطح المكتب) ، 7vw (الكمبيوتر اللوحي) ، 13vw (الهاتف)
مباعدة
ثم انتقل إلى إعدادات التباعد وأضف الهوامش الداخلية والسفلية المخصصة.
- أعلى الحشو: 8vw
- الحشو السفلي: 8vw
الحدود
إضافة الزوايا الدائرية أيضًا إلى الوحدة النمطية.
- زوايا دائرية: 1vw (جميع الزوايا)
صندوق الظل
الانتهاء من تصميم الوحدة النمطية عن طريق إضافة الظل مربع خفية.
- ظل المربع الوضع الأفقي: 10px
- Box Shadow Blur Force: 50px
- لون الظل: rgba (0,0,0,0,08،XNUMX،XNUMX،XNUMX،XNUMX)
فئة CSS
الآن ، لكي يعمل تأثير التمرير اللاصق ، سنحتاج إلى إضافة بضعة أسطر من كود CSS في نهاية هذا البرنامج التعليمي. كتحضير ، سنضيف فئة CSS إلى وحدة CTA.
- فئة CSS: لزجة- cta
أضف وحدة صورة إلى العمود 1
تحميل الصور
دعنا ننتقل إلى التعديل التالي والأخير الذي نحتاجه في العمود 1 ، وهو تعديل الصورة. قم بتحميل صورة PNG من اختيارك.
انحياز
قم بتغيير محاذاة الصورة بعد ذلك.
- محاذاة الصورة: المركز
التحجيم
تأكد من فرض العرض الكامل على الوحدة أيضًا.
- قوة العرض الكامل: نعم
مباعدة
أكمل إعدادات الوحدة بالانتقال إلى إعدادات التباعد وإضافة قيم التباعد المخصصة لأحجام الشاشات المختلفة.
- الهامش العلوي: -5vw (الجهاز اللوحي والهاتف)
- الهامش السفلي: -12vw (سطح المكتب) ، 5vw (الجهاز اللوحي والهاتف)
- الحشوة اليسرى: 3vw (سطح المكتب) ، 10vw (الكمبيوتر اللوحي) ، 25vw (الهاتف)
- مواد التنجيد على اليمين: 3vw (سطح المكتب) ، 10vw (الكمبيوتر اللوحي) ، 25vw (الهاتف)
استنساخ الوحدتين ثلاث مرات ووضع الأعمدة المتبقية
بمجرد الانتهاء من كلتا الوحدتين في عمود 1 ، يمكنك تكرارهما ثلاث مرات ووضع التكرارات في الأعمدة المتبقية من الصف.
تغيير الصور
تأكد من تغيير الصورة في كل وحدة صورة مكررة.
تغيير محتويات CTA وألوان الخلفية من الأزرار
قم أيضًا بتغيير محتويات CTA مع ألوان خلفية الزر.
- CTA Module #2: #89ffb4
- وحدة CTA #3: #ff89f1
- CTA Module #4: #ffd389
أضف فئة CSS إلى وحدات الصورة النمطية في الأعمدة 1 و 2 و 3
الآن ، للتأكد من أن التأثير اللاصق يعمل على الصور أيضًا ، سنحتاج إلى إضافة فئة CSS إلى وحدات الصورة في الأعمدة 1 و 2 و 3.
- فئة CSS: صورة لزجة
أضف سطر 2
هيكل العمود
كل ما تبقى هو إضافة كود CSS. للقيام بذلك ، قم بإضافة سطر جديد.
إضافة وحدة نمطية برمز CSS
أضف وحدة نمطية للكود إلى السطر ، وأدخل كود CSS أدناه وانتهيت!
<style>@media only screenand (min-width: 980px) {.sticky-cta {position: sticky;position: -webkit-sticky;top: 8vw !important;}.sticky-image {position: sticky;position: -webkit-sticky;top: 28vw !important;}}</style>
مسح
الآن وقد تم اتخاذ جميع الخطوات ، دعنا نلقي نظرة أخيرة على ما حدث مع أحجام الشاشات المختلفة.
الأفكار النهائية
في هذه المقالة ، أوضحنا لك كيفية الحفاظ على الوحدات النمطية ثابتة في حاوية العمود الخاصة بها. يمكن أن يؤدي استخدام هذه التقنية إلى إنشاء تأثيرات تمرير مذهلة تتيح لك تمييز العبارات المختلفة التي تحث المستخدم على اتخاذ إجراء على صفحتك. يمكنك أيضًا تنزيل ملف JSON مجانًا! إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.