دليل لفهم واستخدام المركز الثابت في Divi

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

في هذا المنشور سوف نغطي:

• نظرة عامة على أنواع Divi الأربعة لتحديد المواقع
• كيف "مواقف" المركز الثابت عنصرًا في Divi
• استخدام خيارات المركز الثابت في Divi
• نصائح يجب وضعها في الاعتبار عند استخدام الموضع الثابت
• 6 طرق مفيدة لاستخدام المركز الثابت في Divi

تحقق من ذلك!

نظرة عامة على أنواع Divi الأربعة لتحديد المواقع

الموضع الثابت هو واحد من أربعة أنواع من المواضع المتاحة في خيارات مركز Divi. فيما يلي نظرة عامة سريعة على كل واحد أدناه.

ثابت (افتراضي)

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

نسبيا

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

لمزيد من المعلومات ، راجع دليلنا لفهم واستخدام الموضع النسبي في Divi.

مطلق

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

لمزيد من المعلومات ، راجع دليلنا لفهم واستخدام الموضع المطلق في Divi.

مثبت

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

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

كيف "مواقف" المركز الثابت عنصرًا في Divi

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

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

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

استخدام خيارات المركز الثابت في Divi

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

تعديل الموقع الأساسي للوضع الثابت

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

استخدام تعويضات الموضع الثابت

تسمح لك عناصر التحكم Vertical and Horizontal Offset بتعديل الموقع الأساسي للعنصر الثابت عبر محور الموقع الخاص به.

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

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

استخدم المراسي القابلة للسحب لتغيير موضع العناصر الثابتة على الصفحة

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

بعض النصائح لاستخدام تحديد المواقع الثابتة

ضبط العناصر الثابتة للجوال

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

خلق مساحة للعناصر الثابتة

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

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

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

استخدم فهرس Z أعلى للعناصر الثابتة

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

6 طرق لاستخدام المركز الثابت

# 1 رؤوس ثابتة

أحد أفضل استخدامات خيارات المركز الثابت الجديدة هو إنشاء رؤوس ثابتة. باستخدام Divi Theme Builder ، يمكنك إنشاء رأس مخصص بالكامل وإصلاح القسم بالكامل.

كيف تنشر

إليك منشور حول كيفية إنشاء رأس ثابت في Divi:

• كيفية إنشاء رأس ثابت مع خيارات مركز Divi

# 2 أشرطة تذييل ثابتة

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

كيف المشاركات

فيما يلي بعض المشاركات حول كيفية إنشاء شريط تذييل ثابت في Divi:

• كيفية إنشاء شريط تذييل ثابت لموضوع Divi الخاص بك
• كيفية إنشاء أشرطة تذييل ثابتة للهاتف المحمول باستخدام Divi
• كيفية إنشاء شريط اتصال محمول (ثابت) في Divi

# 3 الثابتة الشريط الجانبي / القوائم العمودية

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

كيف المشاركات

إليك منشور حول كيفية إنشاء شريط جانبي ثابت في Divi:

• كيفية بناء شريط جانبي ثابت متجاوب مع روابط مرساة التمرير السلس مع Divi
• كيفية إنشاء قائمة تنقل عمودية (ثابتة) لموقع Divi الخاص بك

# 4 الأزرار الثابتة من الخلف إلى الأعلى

عادةً ما تكون أزرار Back-to-Top ثابتة في الجزء السفلي الأيمن من موقع الويب ، وهي متاحة دائمًا للمستخدمين للنقر عليها لإرسالها مرة أخرى إلى أعلى الصفحة.

فيما يلي منشور حول كيفية إنشاء أزرار عودة إلى أعلى ثابتة في Divi:

• كيفية إنشاء مخصص لاصق (ثابت) العودة إلى أعلى التصاميم مع Divi

# 5 القوائم الثابتة

معظم القوائم التي تنزلق إلى الداخل أو المنبثقة لها موضع ثابت. هذه رائعة للجوال أيضًا.

إليك منشور حول كيفية إنشاء قائمة ثابتة في Divi:

• كيفية إنشاء قائمة مستجيبة للداخل باستخدام منشئ سمات Divi

# 6 مربعات الإشعارات الثابتة ، والعبارات التي تحث المستخدم على اتخاذ إجراء ، والاشتراك في البريد الإلكتروني ، وما إلى ذلك ...

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

• كيفية إضافة دعوة إلى اتخاذ إجراء قابلة للإغلاق إلى أي ركن من قالب صفحتك في Divi

افكار اخيرة

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

ما هي تجربتك مع نوع المركز الثابت؟

أتطلع إلى الاستماع منك في التعليقات.

هتافات!