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

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

التحضير

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

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

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

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

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

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

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

في النافذة المنبثقة، اختر صفحة واحدة كنوع القالب ومنحه اسمًا، مثل "قالب صفحة خدمة الأعمال".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

إضافة مرساة ل "نبذة عنا"

في Elementor، ابحث عن مرساة القائمة القطعة. اسحبه فوق عنوان قسم "نبذة عنا" أو إلى أي موضع مناسب. قم بتسمية المرساة (على سبيل المثال، حولنا) في الإعدادات لسهولة الربط لاحقًا.

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

ارجع إلى عنصر قائمة الأيقونات الخاص بـ "نبذة عنا" واربطه بتعيين عنوان URL كـ #about-us. سيؤدي نقر المستخدمين على عنصر التنقل هذا إلى الانتقال فورًا إلى القسم.

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

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

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

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

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

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

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

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

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

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

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

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

الشرح

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

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

• الارتفاع: 100 فولت في الساعة;
  • يضبط ارتفاع الشريط الجانبي ليشغل ارتفاع منفذ العرض بالكامل (100% من ارتفاع منفذ العرض). يضمن ذلك امتداد الشريط الجانبي من أعلى الشاشة إلى أسفلها.

• العرض: 200 بكسل;
  • يضبط عرض الشريط الجانبي على 200 بكسل. يمكن تعديل هذه القيمة بناءً على احتياجات التصميم.

• مؤشر z-index: 10;
  • يضبط ترتيب تكديس الشريط الجانبي. يضمن الفهرس z الأعلى ظهور الشريط الجانبي فوق العناصر الأخرى التي قد تتداخل.

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

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

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

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

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