إنشاء التمرير المضمن يكشف مع Divi

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

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

معاينة

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

سطح المكتب

متحرك

تنزيل Inline Scroll يكشف عن التخطيط مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

قم بإنشاء صفحة جديدة باستخدام الصفحة الرئيسية لـ DJ Layout Pack

أضف صفحة جديدة

في هذا البرنامج التعليمي لحالة الاستخدام ، سنستخدم أحد تخطيطات DJ. ابدأ بإنشاء صفحة جديدة ، مع إعطاء عنوان لصفحتك والانتقال إلى Visual Builder.

تحميل الصفحة الرئيسية DJ

تابع عن طريق تحميل تخطيط الصفحة الرئيسية لـ DJ على صفحتك.

أضف قيمة مؤشر Z أعلى لكل قسم في الصفحة

أضف فهرس Z أعلى إلى قسم الأبطال

سنقوم بإصلاح عمود واحد محدد والسماح له بالظهور في أي مكان نريده. العكس هو الصحيح أيضا؛ نريد إخفائه في أي مكان لا نريده أن يظهر. للقيام بذلك ، سنمنح كل قسم على الصفحة (إلى جانب الجزء الذي يوجد فيه العمود ، وهو القسم رقم 2 في الصفحة) قيمة فهرس z أعلى. ابدأ بفتح قسم البطل وقم بزيادة الفهرس z في إعدادات الرؤية.

• الفهرس Z: 2

انسخ فهرس Z.

بمجرد إضافة الفهرس z ، يمكنك نسخه.

اللصق في أقسام أخرى في الصفحة باستثناء القسم رقم 2

وقم بلصقه في كل الأقسام الأخرى بالصفحة ، باستثناء القسم رقم 2 (القسم الذي يحتوي على العمود الذي سنقوم بتحويله إلى كشف التمرير المضمن).

تغيير القسم # 2

ضع محتوى العمود في صفوف منفصلة

تغيير هيكل عمود الصف

لنبدأ في تعديل القسم الثاني ، بدءًا بهيكل العمود للصف.

صف مكرر

تواصل باستنساخ الصف.

حذف الوحدات النمطية في الصفوف

قم بإزالة وحدات النص والأزرار في الصف الأول ووحدات الصوت في الصف الثاني.

قم بتعديل الصف رقم 1 في القسم رقم 2

قم بإزالة بعض وحدات الصوت (لتناسب أحجام الشاشة الأصغر)

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

أضف الهامش السفلي للصف

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

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

افتح إعدادات العمود

حان الوقت لبدء تحويل العمود إلى كشف تمرير مضمّن! افتح إعدادات العمود.

تحوم مربع الظل

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير بعض قيم ظل الصندوق عند التمرير.

• مربع قوة طمس الظل: 150 بكسل
• لون الظل: rgba (0،0،0،0.55)

تحوم مقياس التحويل

قم بزيادة حجم العمود عند التمرير أيضًا عن طريق تعديل قيم مقياس التحويل.

• القاع: 110٪
• اليمين: 110٪

العنصر الأساسي الافتراضي

لإصلاح العمود ، سنضيف بضعة أسطر من كود CSS إلى العنصر الرئيسي في العمود.

position: fixed;
bottom: 100px;
max-width: 800px !important;
width: 80% !important;

تحوم العنصر الرئيسي

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

position: fixed;

فهرس Z الافتراضي

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

• فهرس Z: 0

مؤشر تحوم Z.

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

• الفهرس Z: 10

قم بتعديل الصف رقم 2 في القسم رقم 2

أضف أعلى مساحة في العمود

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

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

أضف هامشًا سفليًا مخصصًا إلى الأقسام في جميع أنحاء الصفحة

قسم تحديد الموقع

افتح إعدادات القسم

الآن بعد أن قمنا بتعديل عمود الكشف عن التمرير المضمن ، يتعين علينا إنشاء بعض المساحة لتظهر. لقد فعلنا ذلك بالنسبة للصف الموجود بالفعل (مساحة سفلية 700 بكسل) ، لكننا سنسمح للعمود بالكشف عن أماكن أخرى على الصفحة أيضًا. افتح إعدادات القسم في القسم التالي:

أضف الهامش السفلي

انتقل إلى إعدادات التباعد وأضف بعض الهامش السفلي. ستؤدي إضافة الهامش السفلي إلى إنشاء مساحة فارغة على الصفحة تسمح لعمود الفهرس z المنخفض بالظهور.

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

قسم تحديد الموقع

افتح إعدادات القسم

افتح القسم التالي بعد ذلك:

أضف الهامش السفلي

وأضف بعض الهامش السفلي هنا أيضًا.

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

إزالة الحشوة الزائدة القسم

إزالة القسم رقم 2 الحشو السفلي

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

• القاع: 0 بكسل

قسم تحديد الموقع

افتح إعدادات القسم

افتح إعدادات القسم التالية بعد ذلك:

إزالة الحشوة السفلية وإضافة الحشوة العلوية

أضف بعض الحشوة العلوية وقم بإزالة الحشوة السفلية.

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

قسم تحديد الموقع

افتح إعدادات القسم

إلى القسم الأخير. افتح إعدادات القسم.

إزالة الحشوة العلوية

قم بإزالة الحشوة العلوية وتكون قد انتهيت!

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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