3 طرق سهلة لإضافة البرامج النصية إلى موقع Elementor (دليل كامل)
نشرت: 2022-12-14في بعض الأحيان ، تحتاج إلى إضافة أدوات وخدمات مختلفة إلى موقع Elementor الخاص بك باستخدام JavaScript. أو قد ترغب في تنفيذ وظائف JavaScript مخصصة على موقع الويب الخاص بك لجعله أكثر تميزًا.
ولكن كيف تفعلها؟ كيف يمكنك إضافة JavaScript إلى Elementor؟
سأريك كيف في هذا المنشور.
سواء كنت ترغب في إضافة برنامج نصي جاهز أو إضافة كود JavaScript مخصص إلى Elementor ، فهو أسهل مما تعتقد.
في هذه المقالة ، سأشارك ثلاث طرق لإضافة البرامج النصية في Elementor.
- متى تحتاج إلى إضافة JavaScript إلى مواقع Elementor؟
- كيفية إضافة برنامج نصي في Elementor (3 طرق بسيطة)
- أسئلة وأجوبة حول إضافة البرامج النصية في Elementor
- تغليف
متى تحتاج إلى إضافة JavaScript إلى مواقع Elementor؟
JavaScript هي لغة برمجة يتم تشغيلها على متصفح العميل. باستخدام لغة البرمجة النصية الشائعة هذه ، يمكنك إضافة ميزات ووظائف متقدمة غير محدودة إلى موقع الويب الخاص بك.
يمنحك Elementor خيار جعل تصميم موقع الويب سهلًا. ولكن عندما تريد إضافة ميزة وظيفية مثل الآلة الحاسبة والرسوم المتحركة والأشياء الرائعة الأخرى ، يمكنك استخدام جافا سكريبت.
أثناء إضافة وظائف تفاعلية معينة ، قد تحتاج إلى إضافة مكتبات أو أطر عمل JavaScript لجهات خارجية إلى موقع ويب Elementor الخاص بك.
إذا كنت ترغب في تمكين Google Analytics و AdSense و Tag Manager والخدمات الأخرى ، فستحتاج إلى إضافة علامة نص التنشيط إلى منطقة رأس أو تذييل موقع الويب الخاص بك.
كيفية إضافة برنامج نصي في Elementor (3 طرق بسيطة)
نأتي الآن إلى الجزء الرئيسي من هذه المقالة ، كيفية إضافة JavaScript في Elementor.
تحقق من الطرق الثلاثة التالية:
- عنصر واجهة مستخدم HTML
- ميزة الكود المخصص لـ Elementor Pro
- استخدم مكونًا إضافيًا مجانيًا
هيا بنا نبدأ.
الطريقة 1: عنصر واجهة HTML
افتح الصفحة في لوحة محرر Elementor.
هنا ، سنقوم بتنفيذ ميزة التمرير لأعلى باستخدام كود JavaScript مخصص.
لقد أضفت زرًا بسيطًا وقمت بتعيين معرف زر CSS " من الخلف إلى الأعلى ". سأتعامل مع الوظيفة باستخدام معرف الزر هذا لاحقًا.
الآن قم بسحب وإسقاط أداة HTML في أي مكان على صفحتك.
أضف كود JavaScript الخاص بك داخل منطقة المحتوى. لقد أضفت لي.
<script> let mybutton = document.getElementById("back-to-top"); window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } mybutton.addEventListener("click", scrollToTop); function scrollToTop() { window.scrollTo({ top: 0, behavior: "smooth" }); </script>تأكد من التفاف التعليمات البرمجية بأكملها بعلامة HTML <script> </ script> . ضع معرف الزر حيث تريد تشغيله.
أخيرًا ، انقر فوق الزر " تحديث " الأخضر لحفظ التغييرات الحالية.
قم بزيارة الموقع لمعرفة ما إذا كان كل شيء يعمل بشكل صحيح أم لا.
ها أنت ذا! لقد قمت بتطبيق ميزة رائعة على موقع Elementor الخاص بك باستخدام JavaScript مخصص!
الطريقة 2: ميزة الرمز المخصص لـ Elementor Pro
يمنحك عنصر واجهة مستخدم Elementor HTML خيار إضافة كود JavaScript أو HTML خام إلى موقع ويب Elementor الخاص بك.
لكن ميزة كود Elementor المخصصة تأتي مع المزيد من الاحتمالات. يمكنك استخدامه لإضافة علامات البرنامج النصي إلى منطقة رأس وتذييل موقع الويب الخاص بك.
انتقل إلى Elementor> Custom Code .
الآن ، اكتب عنوان الكود الخاص بك والصقه. يمكنك تعيين موقع الرمز حيث ستضيف <head> و <body> البداية و </body> النهاية .
أيضًا ، حدد الأولوية من 1 إلى 10 . الرقم الأقل يعني أولوية أعلى.
إذا قمت بتعيين الأولوية 1 ، فسيتم عرض البرنامج النصي في البداية عندما يزور المستخدم موقع الويب الخاص بك.
الآن ، قم بتعيين الشرط من القائمة المنسدلة ثم اضغط على زر حفظ .
أعط شيك. يجب أن يتم عرضه تمامًا كما خططت له.
الطريقة الثالثة: استخدام البرنامج المساعد المجاني
WPCode هو مكون إضافي مجاني يسمح لك بإضافة رموز مخصصة وعلامات البرنامج النصي إلى منطقة الرأس والتذييل في موقع الويب الخاص بك. يأتي مع مكتبة سهلة الاستخدام بها العديد من مقتطفات التعليمات البرمجية المعدة مسبقًا التي يمكنك إضافتها إلى موقع الويب الخاص بك.
دعنا نضيف بعض البرامج النصية إلى جزء التذييل من موقع Elementor على الويب.
أولاً ، قم بتثبيت المكون الإضافي على موقع الويب الخاص بك.
ثم انتقل إلى Code Snippets> Header & Footer .
الآن ، قم بإضافة علامة البرنامج النصي إلى المكان المناسب. يمكنك إضافته إلى منطقة الرأس والجسم والتذييل.
لقد قمنا بإضافة نصي مكتبة نصوص خارجية إلى قسم التذييلات.
أخيرًا ، اضغط على زر حفظ التغييرات .
الآن ، انتقل إلى موقع الويب الخاص بك وتحقق للتأكد من أن البرنامج النصي يعمل.
أسئلة وأجوبة حول إضافة البرامج النصية في Elementor
دعنا نحصل على إجابات للأسئلة الشائعة التي يطرحها الأشخاص غالبًا حول إضافة JavaScript إلى صفحات Elementor.
هل يمكنني إضافة برامج نصية إلى موقع Elementor الخاص بي مجانًا؟
نعم ، يمكنك إضافة كود JavaScript إلى Elementor مجانًا. ولكن لإضافة علامة برنامج نصي إلى رأس موقع الويب الخاص بك أو منطقة التذييل ، تحتاج إلى استخدام ميزة Elementor Custom Code التي تأتي فقط مع الإصدار المتميز.
كيف تضيف HTML و CSS و JavaScript إلى Elementor؟
يمكنك استخدام عنصر واجهة مستخدم Elementor HTML لإضافة HTML و JavaScript إلى Elementor. لإضافة كود CSS مخصص ، انتقل إلى Advanced> Custom CSS واكتب الكود الخاص بك.
هل يمكن لرمز JavaScript المخصص كسر تصميم موقع الويب الخاص بي؟
ليس صحيحا! ولكن إذا كنت لا تعرف كيفية عمل JavaScript ، فقد تكون هناك فرصة لذلك. نوصي باختباره على موقع ويب مرحلي أولاً. إذا نجح كل شيء ، يمكنك إضافته إلى الموقع المباشر.
تغليف
تعد إضافة JavaScript مخصصة إلى موقع Elementor أمرًا سهلاً عندما تعرف كيف. سواء كنت ترغب في إضافة تأثيرات صور رائعة أو تنفيذ ميزة فريدة لا تسمح بها سمة WordPress أو Elementor. هنا تعمل JavaScript المخصصة مثل البطل الخارق.
يمكنك إجراء تخصيص أفضل باستخدام JavaScript وجعل موقع الويب الخاص بك أكثر جاذبية للزوار.
في هذا الدليل ، شاركت 3 طرق لإضافة نصوص على موقع Elementor.
أتمنى أن تستمتع بهذه المقالة وأن تحصل على الحل الذي تبحث عنه.
انضم إلى رسالتي الإخبارية للحصول على المزيد من النصائح والحيل المفيدة مثل هذه. شارك المنشور حتى يتمكن الآخرون من التعلم أيضًا.
أتمنى لك يوماً عظيماً!