كيفية جعل أي عنصر صفحة Divi مثبتًا

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

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

دعنا ندخله!

ما تحتاجه لهذا البرنامج التعليمي

في هذا البرنامج التعليمي ، ستحتاج إلى ما يلي:

• موضوع ديفي
• القائمة اللاصقة (أو أي شيء!) في البرنامج المساعد التمرير
• تخطيط صفحة مدونة المحاسب (متاح من داخل Divi Builder)

كيفية جعل أي عنصر صفحة Divi مثبتًا

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

تكوين إعدادات البرنامج المساعد

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

ضمن علامة التبويب الإعدادات الأساسية ، قم بتحديث الخيارات على النحو التالي:

أولاً ، ستحتاج إلى إضافة معرّف فريد للعنصر اللاصق. يمكن أن يكون هذا معرف CSS أو فئة. سنقوم بعد ذلك بإضافة هذا المعرف إلى عنصرنا في Divi لاحقًا. لتسهيل التذكر ، سأضيف معرف CSS "# sticky".

العنصر اللاصق: # sticky

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

المسافة بين أعلى الصفحة والعنصر اللاصق: 54 بكسل

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

لا تلصق أي عنصر عندما تكون الشاشة أصغر من: 980 بكسل

احفظ إعداداتك ثم انتقل إلى علامة التبويب "الإعدادات المتقدمة" وقم بتحديث ما يلي:

بالنسبة لخيار z-index ، نريد التأكد من أن العنصر الخاص بنا مكدس فوق جميع العناصر الأخرى على الصفحة ، خاصة إذا كنا نخطط لتداخل العناصر الأخرى عند التمرير. للتأكد من حدوث ذلك ، قم بتعيين الفهرس z إلى 99998.

مؤشر Z: 99998

لإعطائك فكرة عن كيفية ترتيب العناصر في Divi ، تحتوي الأقسام على فهرس z من 2 ، والأعمدة لها مؤشر z 9 ، وشريط الرأس / شريط التنقل يحتوي على مؤشر z من 99999. لذلك بشكل أساسي ، نحن الرغبة في أن يكون عنصرنا الثابت أقل برقم واحد من الفهرس z للتنقل الرأسي. سيؤدي هذا إلى التأكد من أن العنصر اللاصق يجلس فوق كل شيء آخر في الصفحة باستثناء التنقل. سيكون هذا مفيدًا عندما تريد إيقاف العنصر الخاص بك ودفعه لأعلى الصفحة حتى لا يجلس العنصر اللاصق أعلى التنقل أثناء التمرير (يبدو فوضويًا ومكسورًا).

بعد ذلك ، يمكننا إضافة معرف عنصر "push up". يمكنك التفكير في هذا على أنه سدادة لعنصرنا اللاصق. هذا عنصر تذييل شائع. بشكل أساسي ، يحدد هذا العنصر الذي سيوقف العنصر اللاصق عند التمرير لأسفل الصفحة ، مما يسمح بدفع العنصر اللاصق لأعلى مع باقي الصفحة. في هذا المثال ، سأقوم بتعيين المعرف بمعرف CSS “#stop”.

عنصر الضغط: #stop

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

الآن نحن مجهزون بالقوة التي نحتاجها لصنع عنصر لزج!

جعل عنصر صفحة Divi مثبتًا

لتوضيح كيفية جعل عنصر Divi لزجًا ، سأستخدم صفحة مدونة Divi Accountant من Accountant Layout Pack. للبدء ، قم بإنشاء صفحة جديدة ، وامنح صفحتك عنوانًا ، ثم انشر Visual Builder. ثم حدد الخيار "Choose a Premade Layout". من التحميل من نافذة المكتبة المنبثقة ، حدد Accountant Layout Pack واختر صفحة المدونة.

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

كيفية جعل العمود مثبتًا

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

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

معرف CSS: مثبت

(ملاحظة: لا تضع رمز الهاشتاج (أو الجنيه) قبل المعرف هنا. أيضًا ، تأكد من إضافته إلى معرف CSS وليس فئة CSS)

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

إيقاف العنصر اللاصق في أحد الأقسام

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

لإيقاف العنصر اللاصق في القسم أدناه ، نحتاج إلى فتح إعدادات القسم وإضافة معرف CSS "stop".

معرف CSS: توقف

اذهب الآن لمعاينة النسخة الحية للصفحة. لاحظ كيف يتوقف العنصر اللاصق في القسم الذي حددته.

رائع أليس كذلك؟

كيفية جعل الوحدة النمطية مثبتة

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

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

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

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

z-index: 99998;

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

جعل قسم مثبت

لجعل قسم كامل ثابتًا ، عليك اتباع نفس العملية لإضافة معرف CSS "مثبت" في القسم الذي تختاره. لا حاجة لتحديث الفهرس z باستخدام css المخصص لأن المكون الإضافي يقوم بذلك تلقائيًا.

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

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

عنصر مثبت واحد فقط في كل صفحة

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

افكار اخيرة

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

أتطلع إلى تلقي رد منك في التعليقات أدناه.

هتافات!