كيفية بناء شريط جانبي ثابت متجاوب مع روابط مرساة التمرير السلس مع Divi

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

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

تحقق من ذلك!

نظرة خاطفة

إليكم نظرة خاطفة على ما سنبنيه معًا.

المفهوم

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

ما تحتاجه للبدء

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

إضافة التخطيط إلى صفحتك

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

للبدء ، انطلق وأنشئ صفحة جديدة وانشر Divi Builder. حدد الخيار "اختيار تخطيط Premade". من النافذة المنبثقة تحميل من المكتبة ، حدد حزمة تخطيط وصفات الطعام ، ثم انقر لاستخدام صفحة الوصفات.

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

إنشاء قسم جديد

من الواجهة الأمامية Divi Builder ، قم بإنشاء قسم جديد واسحبه إلى أعلى التخطيط.

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

افتح إعدادات الزر وأضف CSS المخصص التالي إلى العنصر الرئيسي ضمن علامة التبويب خيارات متقدمة:

display: block !important;

هذا ببساطة يسمح للزر بأن يمتد بالعرض الكامل للعمود.

قم بتغيير نص الزر ليقرأ "مقدمة". ثم قم بإضافة ما يلي إلى رابط رابط الزر:

#المقدمة

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

كرر الزر ثم كرر عملية إعطاء الزر نص زر جديد وعنوان URL جديد لرابط الزر. نظرًا لأن هذا سيكون رابطًا ينتقل إلى قسم مختلف من الصفحة ، فتأكد من أن معرف CSS (النص بعد "#") فريد ويتوافق مع الاسم الذي ستعطي القسم الخاص بك لاحقًا.

بالنسبة لهذا الزر ، قم بتغيير نص الزر إلى "المكونات" والزر رابط URL إلى "#ingredients".

كرر الزر مرة أخرى ثم أعط الزر الجديد نص الزر "التغذية" وقم بتغيير عنوان URL لرابط الزر إلى "# التغذية".

كرر الزر مرة أخرى ثم امنح الزر الجديد نص الزر "تعليمات" وقم بتغيير عنوان URL لرابط الزر إلى "# تعليمات".

هذا كل ما علينا القيام به الآن. سنعود إلى هذا القسم ونحوله إلى شريط جانبي ثابت بعد قليل.

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

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

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

<h2 id="introduction">Introduction</h2>

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

كما غطينا سابقًا ، فإن كل من عناوين URL للأزرار التي أنشأناها تهدف إلى التوافق مع معرّفات CSS للأقسام التي يحتاجون إلى الانتقال إليها.

بالنسبة لزر "المقدمة" ، نحتاج إلى إضافة معرف CSS إلى قسم الصفحة الذي يحتوي على محتوى المقدمة. للقيام بذلك ، افتح إعدادات القسم للقسم الثالث من الصفحة (القسم الموجود أسفل الرأس مباشرة) وأضف معرف CSS التالي ضمن علامة التبويب المتقدمة:

معرف CSS: مقدمة

سيتوافق هذا مع زر رابط الربط التقديمي الذي أنشأناه سابقًا.

الآن في نفس القسم ، ابحث عن الصف الذي يحتوي على العنوان "المكونات". ثم افتح إعدادات الصف وأضف معرف CSS التالي:

معرف CSS: المكونات

سيتوافق هذا مع زر ارتباط المكونات الذي أنشأناه سابقًا.

قم بالتمرير لأسفل إلى القسم التالي بعنوان "التغذية" وافتح إعدادات القسم. ثم أضف معرف CSS التالي:

معرف CSS: التغذية

سيتوافق هذا مع زر رابط التغذية الذي أنشأناه سابقًا.

أخيرًا ، قم بالتمرير لأسفل إلى القسم التالي من التخطيط بعنوان "إرشادات خطوة بخطوة". ثم افتح إعدادات القسم وأضف معرف CSS التالي ضمن علامة التبويب خيارات متقدمة:

معرف CSS: التعليمات

سيتوافق هذا مع زر رابط التعليمات الذي أنشأناه سابقًا.

احفظ لك التغييرات.

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

إذا لم يعملوا ، فتأكد من الرجوع والتحقق من صحة معرّفات CSS ومطابقتها.

إنشاء مخطط الشريط الجانبي الثابت

إضافة الهوامش اليسرى إلى الأقسام لإنشاء مساحة للشريط الجانبي

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

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

سيكون مقدار الهامش الأيسر الذي نضيفه إلى كل قسم مساويًا لعرض الشريط الجانبي ، لذا فقد حان الوقت الآن لتحديد العرض الذي تريده للشريط الجانبي. في هذا المثال ، سيفي عرض 20٪ بالغرض.

افتح إعدادات القسم الثاني (القسم الموجود أسفل أزرار رابط الارتساء مباشرة) وأضف الهامش المخصص التالي:

الهامش المخصص: 20٪ متبقي

الآن قبل حفظ الإعدادات ، انقر بزر الماوس الأيمن على خيار Custom Margin وانقر على "نسخ مخصص الهامش" واحفظ الإعدادات.

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

سيعطي هذا هامشًا يسارًا بنسبة 20 ٪ لجميع الأقسام الخاصة بك باستثناء القسم العلوي الذي يحتوي على أزرار رابط الارتساء.

إنشاء الشريط الجانبي الثابت

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

ضمن علامة التبويب "تصميم" ، قم بتحديث الارتفاع والعرض ...

العرض: 20٪
ارتفاع: 100٪

ضمن علامة التبويب خيارات متقدمة ، قم بتحديث الموضع ...

الموقف: ثابت
الإزاحة العمودية: 80 بكسل

يمنح هذا القسم موضعًا ثابتًا بعرض 20٪ من الصفحة. كما أنه يضع القسم على يسار الصفحة و 80 بكسل من أعلى الصفحة لاستيعاب ارتفاع التنقل في الرأس. يضمن الارتفاع بنسبة 100٪ أن المقطع يمتد على ارتفاع الصفحة بالكامل.

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

إصلاح تداخل التذييل

ربما لاحظت أن القسم يتداخل مع شريط التذييل السفلي أسفل الصفحة.

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

لون الخلفية: rgba (255،255،255،0)

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

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

إجراء تعديلات للجوال

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

العرض المخصص: 100
الحشو المخصص (سطح المكتب): 10٪ يسار ، 10٪ يمين
الحشو المخصص (الكمبيوتر اللوحي): يسار 0٪ ، يمين 0٪

الآن كل ما يتعين علينا القيام به هو إخفاء (أو تعطيل) القسم الموجود على الهاتف الذكي. للقيام بذلك ، افتح إعدادات القسم وانتقل إلى علامة التبويب خيارات متقدمة وانقر فوق خانة الاختيار للتعطيل على الهاتف الذكي.

هذا كل شيء. لديك الآن قائمة شريط جانبي ثابتة سريعة الاستجابة مع روابط مرساة تمرير سلسة!

النتيجة النهائية

الآن دعنا نتحقق من النتيجة النهائية.

وإليك ما يبدو عليه التخطيط على الجهاز اللوحي.

تعرف على المزيد حول العناصر الثابتة وارتباطات الإرساء

إذا وجدت هذا البرنامج التعليمي مفيدًا ، فراجع بعض البرامج التعليمية ذات الصلة أدناه:

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

افكار اخيرة

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

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

هتافات!