كيفية الحفاظ على الوحدات الثابتة في حاوية العمود الخاصة بهم مع Divi

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

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

معاينة

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

سطح المكتب

الجهاز اللوحي والجوال

قم بتنزيل تصميم حاوية العمود اللاصق مجانًا

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

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

تنزيل مجاني

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

تحميل

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

اشترك في قناتنا على اليوتيوب

لنبدأ في إعادة التكوين!

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

ابدأ بإضافة قسم عادي جديد إلى الصفحة التي تعمل عليها.

تباعد

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

• الحشوة العلوية: 7vw (سطح المكتب) ، 10vw (كمبيوتر لوحي) ، 15vw (هاتف)
• الحشو السفلي: 20vw (سطح المكتب) ، 7vw (كمبيوتر لوحي) ، 10vw (هاتف)

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

هيكل العمود

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

تحجيم

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

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

مساحة العمود 2 العلوية

افتح إعدادات العمود 2 بعد ذلك وأضف بعض المساحة المتروكة العلوية على سطح المكتب.

• الحشوة العلوية: 20vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)

مساحة العمود 3 العلوية

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

• الحشوة العلوية: 40vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)

العمود 4 أعلى المساحة المتروكة

وأكمل إعدادات الصف عن طريق إضافة قيمة تعبئة علوية للعمود 4 أيضًا.

• الحشوة العلوية: 60vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)

أضف CTA إلى العمود 1

إضافة محتوى

حان الوقت لبدء إضافة الوحدات! الوحدة الأولى التي نحتاجها في العمود 1 هي وحدة CTA. أدخل بعض المحتوى من اختيارك.

وصلة

أضف ارتباطًا إلى الزر أيضًا. سيؤدي القيام بذلك إلى السماح للزر بالظهور في التصميم.

• URL ارتباط الزر: #

لون الخلفية

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

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

إعدادات النص

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

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

إعدادات نص العنوان

قم بتغيير إعدادات نص العنوان أيضًا.

• مستوى عنوان العنوان: H3
• خط العنوان: Spectral
• لون نص العنوان: # 000000
• حجم نص العنوان: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 6vw (هاتف)

إعدادات النص الأساسي

جنبا إلى جنب مع إعدادات النص الأساسي.

• خط الجسم: فيرا سانس
• وزن خط الجسم: خفيف
• لون النص الأساسي: # 000000
• حجم النص الأساسي: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• ارتفاع خط الجسم: 1.8em

إعدادات الزر

لا تنس تصميم زر وحدة CTA أيضًا.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• لون نص الزر: #ffffff
• لون خلفية الزر: # 444eff
• عرض حد الزر: 0 بكسل

• نصف قطر حدود الزر: 50vw
• خط الزر: Fira Sans

• الحشوة العلوية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشوة السفلية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشو الأيسر: 3vw (سطح المكتب) ، 7vw (كمبيوتر لوحي) ، 13vw (هاتف)
• الحشو الأيمن: 3vw (سطح المكتب) ، 7vw (كمبيوتر لوحي) ، 13vw (هاتف)

تباعد

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

• الحشو العلوي: 8vw
• الحشو السفلي: 8vw

الحدود

أضف بعض الزوايا الدائرية إلى الوحدة أيضًا.

• الزوايا الدائرية: 1vw (جميع الزوايا)

مربع الظل

أكمل تصميم الوحدة بإضافة ظل مربع دقيق.

• مربع الظل الأفقي: 10 بكسل
• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.08)

فئة CSS

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

• فئة CSS: sticky-cta

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

تحميل الصور

ننتقل إلى الوحدة التالية والأخيرة التي نحتاجها في العمود 1 ، وهي وحدة صورة. قم بتحميل صورة PNG من اختيارك.

انتقام

قم بتغيير محاذاة الصورة بعد ذلك.

• محاذاة الصورة: المركز

تحجيم

تأكد من فرض عرض كامل على الوحدة أيضًا.

• فرض عرض كامل: نعم

تباعد

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

• الهامش العلوي: -5vw (الجهاز اللوحي والهاتف)
• الهامش السفلي: -12vw (سطح المكتب) ، 5vw (الجهاز اللوحي والهاتف)
• الحشو الأيسر: 3vw (سطح المكتب) ، 10vw (كمبيوتر لوحي) ، 25vw (هاتف)
• الحشو الأيمن: 3vw (سطح المكتب) ، 10vw (كمبيوتر لوحي) ، 25vw (هاتف)

استنساخ كلا الوحدتين ثلاث مرات ووضعهما في الأعمدة المتبقية

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

تغيير الصور

تأكد من تغيير الصورة في كل وحدة صورة مكررة.

تغيير محتوى CTA وألوان خلفية الزر

قم بتغيير محتوى CTA جنبًا إلى جنب مع ألوان خلفية الزر أيضًا.

• وحدة CTA رقم 2: # 89ffb4
• وحدة CTA رقم 3: # ff89f1
• وحدة CTA رقم 4: # ffd389

أضف فئة CSS إلى وحدات الصورة في العمود 1 و 2 و 3

الآن ، للتأكد من أن التأثير اللاصق يعمل على الصور أيضًا ، سنحتاج إلى إضافة فئة CSS إلى وحدات الصورة في الأعمدة 1 و 2 و 3.

• فئة CSS: صورة مثبتة

أضف الصف رقم 2

هيكل العمود

الشيء الوحيد المتبقي هو إضافة كود CSS. للقيام بذلك ، أضف صفًا جديدًا.

أضف وحدة التعليمات البرمجية برمز CSS

أضف وحدة رمز إلى الصف ، وأدخل رمز CSS أدناه ، وبذلك تكون قد انتهيت!

<style>
@media only screen and (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 مجانًا أيضًا! إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.

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