كيفية إنشاء روابط نشطة على التمرير لمواقع Divi ذات الصفحة الواحدة

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

بالنسبة لأولئك الذين يواجهون صعوبة في تصور هذا التأثير في أذهانهم ، قمنا بتوفير معاينة أدناه.

نتيجة

دعنا نلقي نظرة على النتيجة النهائية التي ستتمكن من تحقيقها بعد اتباع هذا المنشور:

كما ترى ، يتغير الارتباط النشط المميز تلقائيًا أثناء قيام المستخدم بالتمرير عبر أقسام الصفحة (وكذلك عند النقر).

إلهام

وجدنا مصدر إلهامنا لهذا المنشور في موقع Filmschool Berlin الإلكتروني والذي ذكرناه كمثال في منشورنا على التنقل الرأسي. طلب أحد القراء في تعليقات هذا المنشور أن نظهر لهم كيفية إنشاء تأثير الارتباط النشط للتمرير وهكذا نحن هنا!

كيفية إنشاء روابط نشطة على التمرير لمواقع Divi ذات الصفحة الواحدة

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

الشروع في العمل: قم بتنزيل الصفحة انتقل إلى ID Plugin

لسحب هذا التصميم ، سنبدأ بالاستفادة من البرنامج الإضافي المجاني والمُصنَّف جيدًا Page Scroll to ID والذي يمكنك العثور عليه هنا. انقر فوق الزر "تنزيل" واحفظ ملف البرنامج المساعد ZIP في مكان ما حيث يمكنك العثور عليه على الفور.

تحميل وتنشيط الصفحة انتقل إلى ID Plugin

الشيء التالي الذي ستحتاج إلى القيام به هو الانتقال إلى لوحة معلومات WordPress> المكونات الإضافية> إضافة جديد> حدد ملف ZIP الذي قمت بتنزيله للتو وتحميله.

بعد ذلك ، لا تنس تنشيط المكون الإضافي أيضًا.

تمكين التنقل العمودي

قبل أن ندخل إلى إعدادات Page Scroll to ID plugin ، سنقوم بتمكين التنقل العمودي (والتنقل الثابت في الخطوة التالية) أولاً. إذا كنت تستخدم لوحة معلومات WordPress الخاصة بك ، فانتقل إلى المظهر> تخصيص> الرأس والتنقل> تنسيق الرأس> وقم بتمكين التنقل العمودي.

تمكين التنقل الثابت

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

الصفحة قم بالتمرير إلى ID Plugin Settings (إعدادات ID Plugin)

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

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

• تمكين على ارتباطات قائمة WordPress: نعم
• مدة التمرير: 200 مللي ثانية
• مدة التمرير للضبط التلقائي: نعم
• تمرير إرخاء الرسوم المتحركة: خطي
• قم دائمًا بالتمرير بسلاسة عند الوصول إلى نهاية الصفحة / المستند: نعم
• إيقاف تمرير الصفحة على عجلة الماوس أو التمرير باللمس: نعم
• تخطيط الصفحة: تلقائي
• السماح بعنصر مميز واحد فقط في كل مرة: نعم
• حافظ على تمييز العنصر الحالي حتى يظهر العنصر التالي: نعم
• تسليط الضوء على الهدف التالي: نعم
• قم بإلحاق قيمة تجزئة الارتباط الذي تم النقر فوقه بعنوان URL / شريط العنوان بالمتصفح: نعم
• انتقل من / إلى صفحات مختلفة: نعم
• 0 مللي ثانية تأخير للتمرير إلى الهدف عند تحميل الصفحة
• منع البرامج النصية الأخرى من التعامل مع روابط البرنامج المساعد (إن أمكن): نعم
• تطبيع أهداف نقطة الارتساء: نعم

أضف معرف CSS وفئة إلى الأقسام

الشيء التالي الذي ستحتاج إلى القيام به هو تعيين معرفات CSS المختلفة وتمرير الصفحة في فئة ID CSS إلى الأقسام المختلفة في جهاز النداء الواحد. للقيام بذلك ، افتح إعدادات كل قسم من أقسامك وانتقل إلى علامة التبويب خيارات متقدمة. ضمن علامة التبويب خيارات متقدمة ، حدد معرّفات CSS المختلفة التي تريد استخدامها لأقسامك. اعلم أنه لكي يعمل ، سيتعين عليك تعيين معرف CSS مختلف لكل قسم من الأقسام الموجودة في جهاز النداء الواحد.

في هذا المثال ، نستخدم "home" كأول معرّف CSS لدينا. ومع ذلك ، فإن فئة CSS هي نفسها لكل قسم من الأقسام وتساعدك على ربط القسم بـ Page Scroll to ID plugin. اسم فئة CSS هو 'ps2id'.

إضافة معرف إلى عناصر القائمة

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

استخدم الروابط المخصصة

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

تمكين فئات CSS

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

استخدم Page Scroll إلى ID CSS Class

بمجرد تمكين فئات CSS لعناصر القائمة ، يمكنك المضي قدمًا وربط Page Scroll to ID class يدويًا بكل عنصر من عناصر القائمة. فئة CSS هي نفسها التي استخدمناها لتعيين معرفات لأقسامنا ، وهي "ps2id".

إجراء تعديلات على المظهر

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

ملاحظة: كما ورد في مقدمة هذا المنشور ، لن تتمكن من رؤية التغييرات التي أجريتها أثناء معاينة الصفحة. يجب عليك نشر الصفحة أولاً ومشاهدتها في طريقة البث المباشر لملاحظة النتائج.

مخصص الموضوع

ابدأ بالانتقال إلى Theme Customizer> Header & Navigation> Primary Menu وقم بإجراء التغييرات التالية على الشكل الذي ستبدو عليه قائمتك الأساسية:

• إخفاء صورة الشعار: نعم
• أقصى ارتفاع للشعار: 83
• الهامش العلوي للقائمة: 0
• حجم النص: 14
• تباعد الأحرف: -1
• الخط: Lato Light
• نمط الخط: عواصم
• لون النص: #FFFFFF
• لون الارتباط النشط: #FFFFFF
• لون الخلفية: rgba (255،255،255،0)
• لون خلفية القائمة المنسدلة: rgba (255،255،255،0)

خيارات سمة CSS المخصصة

لتغيير نمط الارتباط النشط ، سيتعين علينا إضافة بعض أكواد CSS المخصصة. إذا كنت تستخدم لوحة معلومات WordPress الخاصة بك ، فانتقل إلى Divi> Theme Options> قم بالتمرير لأسفل في علامة التبويب General والصق الأسطر التالية من كود CSS في مربع CSS المخصص:

#top-menu .current-menu-item a.mPS2id-highlight{
background: black;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 15px;
}

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

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
}

نتائج

عند اتباع جميع الخطوات الواردة في هذا المنشور ، يجب أن تكون قادرًا على تحقيق هذه النتيجة النهائية:

يمكنك بالطبع تعديل النمط حسب تفضيلاتك الخاصة (أو استخدامه للتنقل العلوي أيضًا).

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة بواسطة Yurlick / shutterstock.com