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

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

دعنا نذهب اليها.

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

1. إنشاء بنية العنصر

إضافة قسم جديد

الرؤية

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

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

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات نمطية ، افتح إعدادات الصف وقم بتعديل إعدادات التحجيم وفقًا لذلك:

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

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

إعدادات العمود 1

تباعد

بعد ذلك ، افتح إعدادات العمود 1 وقم بتطبيق بعض قيم المساحة المتروكة المخصصة عبر أحجام الشاشات المختلفة.

• الحشوة العلوية:
  • سطح المكتب: 200 بكسل
  • الجهاز اللوحي: 100 بكسل
  • الهاتف: 80 بكسل
• الحشوة السفلية:
  • سطح المكتب: 200 بكسل
  • الجهاز اللوحي: 100 بكسل
  • الهاتف: 80 بكسل

فهرس Z.

قم بزيادة الفهرس z لهذا العمود أيضًا. لاحقًا في البرنامج التعليمي ، سننشئ تداخلًا أفقيًا بين العمود 1 والعمود 2. ونعمل على زيادة الفهرس z لضمان بقاء وحدات العمود 1 فوق وحدات العمود 2.

• الفهرس Z: 11

إعدادات العمود 2

لون الخلفية

بعد ذلك ، سنضيف لون الخلفية إلى العمود 2.

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

تباعد

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

• الحشوة العلوية:
  • سطح المكتب: 200 بكسل
  • الجهاز اللوحي: 150 بكسل
  • الهاتف: 100 بكسل
• الحشوة السفلية:
  • سطح المكتب: 200 بكسل
  • الجهاز اللوحي: 150 بكسل
  • الهاتف: 100 بكسل

إعدادات العمود 3

تباعد

أخيرًا وليس آخرًا ، سنضيف بعض قيم الحشو المخصصة إلى العمود 3 أيضًا.

• الحشوة العلوية:
  • سطح المكتب: 200 بكسل
  • الجهاز اللوحي: 100 بكسل
  • الهاتف: 50 بكسل
• الحشوة السفلية:
  • سطح المكتب: 200 بكسل
  • الجهاز اللوحي: 100 بكسل
  • الهاتف: 50 بكسل
• الحشوة اليسرى: 8٪
• الحشوة اليمنى: 8٪

أضف وحدة نصية إلى العمود 1

أضف نسخة

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

لون الخلفية

قم بتغيير لون الخلفية بعد ذلك.

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

إعدادات النص

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: مونتسيرات
• لون النص: #ffffff
• حجم النص: 100 بكسل
• ارتفاع خط النص: 1em
• محاذاة النص: الوسط

تحجيم

قم بتعديل العرض بعد ذلك.

• العرض: 150 بكسل

تباعد

ثم أضف بعض المساحة المتروكة العلوية والسفلية المخصصة.

• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل

موقع

قم بتغيير موضع الوحدة أيضًا.

• الموقف: مطلق
• الموقع: أسفل اليمين
• الإزاحة الأفقية: -5٪

أضف وحدة نصية إلى العمود 2

أضف نسخة H3 & H4

إلى العمود الثاني. هناك ، سنضيف وحدة نصية مع بعض نسخ H3 و H4.

إعدادات النص

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

• محاذاة النص: الوسط
• لون النص: غامق

إعدادات نص H3

بعد ذلك ، قم بتعديل إعدادات نص H3.

• خط العنوان 3: عرض Playfair
• العنوان 3 محاذاة النص: الوسط
• حجم نص العنوان 3:
  • سطح المكتب: 90 بكسل
  • الجهاز اللوحي: 70 بكسل
  • الهاتف: 60 بكسل

إعدادات نص H4

صمم نص H4 أيضًا.

• خط العنوان 4: مونتسيرات
• وزن خط العنوان 4: خفيف

تحجيم

بعد ذلك ، انتقل إلى إعدادات التحجيم وقم بتطبيق عرض "100٪". سيساعد هذا في الخطوة التالية ، وهي تغيير موضع الوحدة.

• العرض: 100٪

موقع

أكمل إعدادات الوحدة بالانتقال إلى علامة التبويب المتقدمة وتعديل إعدادات الموضع على النحو التالي:

• الموقف: مطلق
• الموقع: أسفل اليسار
• الإزاحة العمودية: 20 بكسل

أضف وحدة نصية إلى العمود 3

إضافة محتوى H5 فقرة

إلى العمود الثالث. أضف وحدة نصية مع بعض محتوى H5 والفقرة من اختيارك.

إعدادات النص

انتقل إلى علامة تبويب تصميم الوحدة وتغيير الخط في إعدادات النص.

• خط النص: مونتسيرات

إعدادات نص H5

صمم نص H5 أيضًا.

• خط العنوان 5: مونتسيرات
• وزن خط العنوان 5: غامق
• حجم نص العنوان 5:
  • سطح المكتب والكمبيوتر اللوحي: 23 بكسل
  • الهاتف: 18 بكسل

2. مفتاح التغييرات لخلق تأثير

الجزء

قم بإزالة حشوة القسم

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

صف

بدوره صف لزجة

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

• موقف مثبت: التمسك بالأعلى
• الإزاحة العلوية اللاصقة: 0 بكسل
• حد الالتصاق السفلي: القسم
• الإزاحة من العناصر اللاصقة المحيطة: نعم
• الانتقال الافتراضي والأنماط الثابتة: نعم

لون خلفية الصف اللاصق

حان الوقت لبدء تطبيق بعض الأنماط اللاصقة على عناصرنا! ابدأ بلون خلفية الصف.

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

انتقال الصف

لضمان انتقال سلس ، سنزيد مدة الانتقال في علامة التبويب خيارات متقدمة للصف.

• مدة الانتقال: 500 مللي ثانية
• منحنى سرعة الانتقال: سهولة

لون خلفية العمود اللاصق 2

بعد ذلك ، سنقوم بتغيير لون خلفية العمود اللاصق 2.

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

وحدة النص في العمود 1

لون الخلفية اللاصق

سنقوم بتغيير لون خلفية وحدة النص في العمود 1 أيضًا.

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

لون النص اللاصق

جنبا إلى جنب مع لون النص اللاصق.

• لون النص: # 0a0a0a

تحجيم لزجة

وسنزيد عرض الوحدة في إعدادات التحجيم.

• العرض: 105٪

انتقال

نحن نضمن انتقالًا سلسًا من خلال تعديل مدة انتقال الوحدة في علامة التبويب "خيارات متقدمة".

• مدة الانتقال: 500 مللي ثانية
• منحنى سرعة الانتقال: سهولة

وحدة النص في العمود 2

لون النص اللاصق

بعد ذلك ، لدينا وحدة النص في العمود 2. سنقوم بتغيير لون النص إلى فاتح في حالة لزجة.

• لون النص: فاتح

وحدة النص في العمود 3

لون النص اللاصق

الشيء نفسه ينطبق على Text Module في العمود 3.

• لون النص: فاتح

3. قسم استنساخ لإعادة الاستخدام

الآن وقد أكملنا القسم الأول ، بما في ذلك تأثير تغيير الأنماط اللاصقة ، يمكننا إعادة استخدام هذا القسم عدة مرات كما نريد عن طريق استنساخه.

تغيير كل نسخ

تأكد من تغيير جميع النسخ المكررة.

أضف بعض الهامش العلوي للقسم الأول والهامش السفلي للقسم الأخير

وأخيرًا وليس آخرًا ، سنضيف بعض الهامش العلوي إلى القسم الأول والهامش السفلي إلى القسم الأخير. سيساعدنا هذا في منع الانتقال الفوري قبل أن يبدأ الأشخاص في التمرير. هذا كل شيء!

• الهامش الأعلى: 200 بكسل

• الهامش السفلي: 200 بكسل

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

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