كيفية جعل أي عنصر Divi مثبتًا؟ (دليل خطوة بخطوة)

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

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

لماذا تجعل عناصر ديفي لزجة؟

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

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

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

هناك طريقتان رئيسيتان لجعل أي عنصر Divi لزجًا:

1. استخدام البرنامج المساعد Divi builder المدمج
2. مع القليل من الترميز

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

1) استخدام Divi Builder

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

قم بإنشاء صفحة

أولاً ، في لوحة معلومات WordPress الخاصة بك ، انتقل إلى Pages> Add New وأنشئ صفحة جديدة.

من الآن فصاعدًا ، سنستخدم أداة إنشاء الصور Divi ، لذا اضغط على زر استخدام Divi Builder وسترى أداة إنشاء بصرية تعمل بالسحب والإفلات.

استيراد النموذج المفضل

بمجرد فتح المنشئ ، سترى ثلاثة خيارات:

• بناء من الصفر
• اختر تخطيط معدة مسبقا
• استنساخ صفحة موجودة

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

بعد ذلك ، نظرًا لأننا نستخدم المحرر الكلاسيكي ، سترى شيئًا كهذا على شاشتك:

ومع ذلك ، من الأسهل العمل مع المنشئ المرئي ، لذلك سننتقل إليه.

قم بالتبديل إلى Visual Builder

في الرأس ، سترى خيارًا لاستخدام المنشئ المرئي يسمى Build On the Front End . اضغط عليه وسترى كيف تتغير الشاشة وتسهل رؤية نتائج التعديلات من الواجهة الأمامية.

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

قم بتثبيت وتفعيل البرنامج الإضافي لـ Sticky Menu WordPress

لجعل أي عنصر Divi لزجًا ، سنستخدم المكون الإضافي Sticky Menu. لذلك ، افتح لوحة معلومات WordPress الخاصة بك ، وانتقل إلى المكونات الإضافية> إضافة جديد ، وابحث عن القائمة اللاصقة ، Sticky Header on Scroll . ثم ، انقر فوق تثبيت وقم بتنشيطه.

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

قم بإعداد قائمة ثابتة

هناك خياران رئيسيان لإعداد التخصيص:

• أساسي
• متقدم

أولاً ، دعنا نرى كيفية تخصيص الإعدادات الأساسية. سوف تحتاج إلى تسمية عنصر لاصق. في حالتنا ، سوف نسميها # sticky وسنقوم بتعيين مسافة بين الصفحة العلوية والعنصر على 50 بكسل . لا تقلق إذا لم تكن متأكدًا من التباعد ، يمكنك تغيير ذلك لاحقًا.

ثم احفظ الإعدادات الأساسية وانتقل إلى علامة التبويب "الإعدادات المتقدمة ". سنقوم هنا بتحسين العنصر اللاصق أكثر قليلاً. على سبيل المثال ، سنقوم بتعيين حقل Z-Index على 99998 ونضيف #stop في حقل عنصر الضغط. سيساعدك عنصر الضغط على إيقاف الأداة اللاصقة العائمة (المزيد حول هذا لاحقًا).

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

أضف معرف CSS مخصص

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

تأكد من حفظ إعدادات Divi builder بالكامل ، وإلا فلن تعمل. بعد ذلك ، يمكنك معاينة الصفحة.

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

أضف Stop CSS

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

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

وبالمثل ، يمكنك اتباع نفس الخطوات لجعل أي عنصر Divi ثابتًا على موقعك . دعونا نرى كيف يمكنك إصلاح الرموز الاجتماعية باستخدام Sticky Menu و Divi Builder.

جعل أيقونات الوسائط الاجتماعية مثبتة

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

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

ثم احفظ الإعدادات وتحقق من النتائج على الواجهة الأمامية.

كما ترى ، لقد جعلنا أيقونات الوسائط الاجتماعية لزجة!

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

2) اجعل أي عنصر Divi مثبتًا بقليل من الترميز

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

قم بإنشاء رأس مخصص

من Divi theme builder ، يمكنك إنشاء قوالب موقع ويب مخصصة.

في هذا العرض التوضيحي ، أولاً ، لنقم بإنشاء رأس عام.

لديك ثلاثة خيارات:

• بناء من الصفر
• اختر تخطيط معدة مسبقا
• استنساخ صفحة موجودة

بالنسبة لهذا العرض التوضيحي ، سننشئ رأسًا من البداية.

في الخطوة التالية ، تحتاج إلى تحديد عدد الصفوف التي تريدها في الرأس.

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

في حالتنا ، سنضيف قائمة إلى العنوان الخاص بنا.

أضف فئة CSS

قبل المضي قدمًا ، تحتاج إلى ذكر فئة CSS لرأسك. من إعدادات الرأس ، انتقل إلى علامة التبويب خيارات متقدمة وأضف فئة CSS مخصصة. سنضيف pa-sticky-header كفئة CSS مخصصة.

بعد ذلك ، احفظ التغييرات وفي خيارات سمة Divi ، سترى قسمًا لإدراج الرمز ضمن إعدادات التكامل .

أضف كود JavaScript

الآن يبدأ الجزء الممتع. انسخ كود JavaScript التالي:

 <script>
jQuery (الوظيفة ($) {
var headerHeight = $ ('header.et-l.et-l - header'). OuterHeight () ؛
$ (window) .bind ('scroll'، function () {
var windowHeight = $ (window) .height () ؛
إذا ($ (نافذة) .scrollTop () <windowHeight - headerHeight) {
$ ('pa-header'). removeClass ('pa-sticky-header')؛
}
آخر {
$ ('pa-header'). addClass ('pa-sticky-header')؛
}
}) ؛
}) ؛
</script>

الصقها في المحرر وحفظ التغييرات.

أضف CSS إضافية

بعد ذلك ، سنقوم بتعيين العنصر الذي نريد أن نجعله لزجًا على الموقع. في حالتنا ، لجعل الرأس ثابتًا في الأعلى ، انسخ كود CSS التالي والصقه في محرر CSS واحفظ التغييرات.

 / * لجعل عنصر معين ثابتًا * /

.pa-sticky-header {
	الموقف: ثابت! مهم ؛
	أعلى: 0؛ / * يضبط مسافة الرأس من أعلى الصفحة * /
	العرض: 100٪؛
} 

الآن ، تحقق من الواجهة الأمامية لموقع الويب الخاص بك وسترى أنه سيتم إصلاح الرأس.

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

التوصيات

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

لا توجد رسوم متحركة

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

معاينة التغييرات قبل النشر

يتيح لك Divi Builder رؤية التغييرات التي تجريها على الشاشة. هذا مفيد جدًا للتأكد من صحة المحاذاة وأن العنصر لا يتداخل مع أي عناصر واجهة مستخدم أخرى على الموقع.

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

يسمح لك الإصدار المجاني من WP Sticky Menu بإضافة عنصر لاصق واحد فقط. لذلك ، إذا كنت ترغب في إضافة المزيد من العناصر إلى موقع الويب الخاص بك ، فقد ترغب في التفكير في الترقية إلى الإصدار المحترف الذي يبدأ بسعر 39 دولارًا أمريكيًا.

استنتاج

بشكل عام ، يعد إصلاح بعض العناصر خيارًا رائعًا عندما تريد جعلها أكثر وضوحًا للمستخدمين. في هذا البرنامج التعليمي ، رأينا خيارين لجعل أي عنصر Divi لزجًا:

• باستخدام البرنامج المساعد Divi Builder
• برمجيا

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

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

ما الطريقة التي استخدمتها لجعل عناصرك لزجة؟ هل تعرف أي شيء آخر؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه.

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