كيفية إنشاء شريط جانبي عمودي مثبت في Elementor للتنقل السلس في الصفحة

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

This tutorial will guide you through creating a vertical sticky sidebar in Elementor with navigation items, anchor links, and custom styling to match your website’s aesthetic.

التحضير

قبل أن تبدأ، تأكد مما يلي:

1. إليمنتور برو تم التثبيت والتفعيل: يتطلب التأثير اللاصق Elementor Pro.
2. إعداد الصفحة: إما صفحة جديدة أو موجودة حيث تريد إضافة الشريط الجانبي اللاصق العمودي.
3. الإلمام بحاويات Elementor Containers: نوصي بالعمل مع فليكس بوكس وضع الحاوية لتحكم أكثر مرونة لهذا البرنامج التعليمي.

الخطوة 1: إنشاء قالب صفحة واحدة

We’ll begin by creating a single page template and setting it up to house the container that will serve as our vertical sticky sidebar.

1. الانتقال إلى القوالب

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

2. حدد نوع القالب

في النافذة المنبثقة، اختر صفحة واحدة as the template type and give it a name, like “Business Service Page Template.”

3. اختر نوع الصفحة

في الجزء العلوي من مكتبة القوالب، حدد ملف الصفحات علامة التبويب.

Browse the available templates to find a suitable style. You can use the search bar to find templates for specific purposes, such as “Services” or “Company.” If you’re creating this sidebar for a particular type of page, you may also configure conditions in the display settings to limit its appearance to specific pages.

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

الخطوة 2: إنشاء الحاوية في Elementor

ستعمل هذه الحاوية كقاعدة للشريط الجانبي اللاصق الرأسي.

1. إضافة الحاوية

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

2. تعيين اتجاه الحاوية

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

3. تحديد عرض الحاوية

في الطراز tab, adjust the width to fit the sidebar’s needs, such as 200px or less, depending on your design preferences. Ensuring it takes up minimal space on the page helps maintain focus on the main content.

الخطوة 3: إنشاء الشريط الجانبي العمودي الثابت

1. إدراج العنوان وعناصر التنقل

إضافة العنوان widget inside the container with a title like “Quick Navigation” or “Contents.”

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

إدراج قائمة الأيقونات أو الزر widget below the heading to create navigation items. Here, we’ll use an Icon List for a streamlined look, allowing space between each item in the sidebar.

3. إضافة روابط التنقل

بالنسبة لتصفح الشريط الجانبي، أضف عناصر مثل:

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

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

4. تعيين روابط التثبيت

Add anchor links to each navigation item by setting up anchor points on the page. For example, for an “About Us” section, we’ll use #P5عنّاومثبتات مماثلة للأقسام الأخرى.

Add an Anchor for “About Us”

في Elementor، ابحث عن مرساة القائمة widget. Drag it just above the title for the “About Us” section or to any appropriate position. Name the anchor (for example, about-us) in the settings for easy linking later.

ربط الرابط بالملاحة

Return to the Icon List item for “About Us” and link it by setting the URL as #about-us. Users clicking on this navigation item will immediately jump to the section.

كرر هذه العملية مع باقي عناصر القائمة.

5. تحديد عرض الشريط الجانبي

للحفاظ على تخطيط متسق، اضبط عرض كل من حاوية قائمة الأيقونات والحاوية الرئيسية على قيمة ثابتة، مثل 200 بكسل.

6. تخصيص نمط الشريط الجانبي

يمكنك ضبط الخط، والألوان، والمسافات في الطراز tab to match your site’s style. You may also add a لون الخلفيةوالحشو، وتأثيرات الظل لجعل الشريط الجانبي مميزًا بصريًا.

الخطوة 4: تمكين التأثير اللاصق

للحفاظ على الشريط الجانبي ثابتًا أثناء تمرير المستخدم، اتبع الخطوات التالية:

1. تعيين معرّف CSS لشريط التنقل ومنطقة المحتوى

حدِّد حاوية شريط التنقل، وفي علامة التبويب خيارات متقدمة، أضف معرِّف CSS؛ على سبيل المثال، قم بتعيين المعرِّف إلى الشريط الجانبي-القائمة.

• إضافة كود CSS مخصص

افتح CSS مخصص في Elementor (إعداد عام أو CSS مخصص لحاوية شريط التنقل). أضف الكود التالي:

#side-قائمة الشريط الجانبي {
    الموضع: ثابت؛ /* يثبت الشريط الجانبي في مكانه، بحيث لا يتحرك عند التمرير *//
    اليسار: 0؛ /* محاذاة الشريط الجانبي إلى الجانب الأيسر من الصفحة */
    أعلى الصفحة: 0؛ /* يضع الشريط الجانبي في أعلى الصفحة *//
    الارتفاع: 100vh؛ /* يضبط ارتفاع الشريط الجانبي على ارتفاع منفذ العرض الكامل *//
    العرض: 200 بكسل؛ /* يضبط عرض الشريط الجانبي حسب الحاجة *//
    z-index: 10 ؛ /* يضمن بقاء الشريط الجانبي أعلى العناصر الأخرى *//
    لون الخلفية: #e0f7fa؛ /* يضبط لون خلفية الشريط الجانبي */
    اللون: #P5TFFF؛ /* تعيين لون النص داخل الشريط الجانبي */
    الحشو من أعلى: 250 بكسل؛ /* إضافة الحشو في أعلى الشريط الجانبي */
    overflow-y: تلقائي؛ /* يسمح بالتمرير إذا كان محتوى الشريط الجانبي طويلًا جدًا *//
}

الشرح

• الموضع: ثابت;
  • يحافظ على الشريط الجانبي في موضع ثابت على الشاشة أثناء تمرير المستخدمين. سيظل مرئيًا دائمًا في منفذ العرض بغض النظر عن تمرير الصفحة.
• اليسار: 0;
  • Align the sidebar to the viewport’s left edge, positioning it flush with the page’s left side.

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

• الارتفاع: 100 فولت في الساعة;
  • Sets the sidebar’s height to occupy the entire viewport height (100% of the viewport height). This ensures the sidebar spans from the top to the bottom of the screen.

• العرض: 200 بكسل;
  • Sets the sidebar’s width to 200px. This value can be adjusted based on design needs.

• مؤشر z-index: 10;
  • Sets the sidebar’s stacking order. A higher z-index ensures the sidebar appears above other elements that might overlap.

• لون الخلفية: #e0f7fa;
  • هذا يحدد لون خلفية الشريط الجانبي. هنا، تم اختيار اللون الأزرق الفاتح الباستيل الفاتح (#e0f7fa) لإضفاء مظهر الهدوء والنظافة.

• اللون: #FFF;
  • يضبط لون النص داخل الشريط الجانبي على اللون الأبيض (#FFF). يوفر ذلك تباينًا مقابل الخلفية الزرقاء الباستيلية، مما يحسن من سهولة القراءة.

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

• تجاوز ص: تلقائي;
  • It allows vertical scrolling inside the sidebar if the content exceeds its height. This ensures the content remains accessible without affecting the page’s overall layout.

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