ووردبريس

إضافة زر وقسم جديد في صفحات المحرر باستخدام Elementor

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

فهم كيفية إضافة زر جديد في Elementor

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

خطوات إضافة زر جديد

للبدء، يجب عليك التأكد من أنك قمت بتضمين ملف JavaScript بشكل صحيح في ملف الإضافة الخاص بك. يجب أن يظهر في وحدة التحكم لديك (Console) عبارة "Elementor initialized"، مما يعني أن Elementor قد تم تشغيله بنجاح. إذا كان لديك أي مشكلات في تحميل ملف JavaScript، تأكد من أنك قمت بتحميله بشكل صحيح.

بعد التأكد من الأمور السابقة، يمكننا الانتقال إلى خطوات البرمجة لإضافة الزر. سيتطلب الأمر استخدام أكواد JavaScript للقيام بعمليات التحقق من وجود الحاويات المناسبة والتي يمكن إضافة الزر إليها.

jQuery(window).on('elementor:init', function() {
    console.log('Elementor initialized');
    elementor.hooks.addAction('editor/init', function() {
        console.log('Editor initialized');
        const interval = setInterval(() => {
            const targetContainers = document.querySelectorAll('.elementor-add-new-section, .e-view');
            console.log('Checking for target containers:', targetContainers);
            if (targetContainers.length > 0) {
                targetContainers.forEach((container, index) => {
                    console.log(`Container ${index} found`, container);
                    if (container.classList.contains('e-view')) {
                        const buttonDiv = document.createElement('div');
                        buttonDiv.classList.add('elementor-add-section-area-button');
                        const newButton = document.createElement('button');
                        newButton.textContent="إضافة قسم جديد";
                        newButton.classList.add('button', 'button-primary');
                        buttonDiv.appendChild(newButton);
                        container.appendChild(buttonDiv);
                        console.log('Button added to the editor');
                        clearInterval(interval);
                    }
                });
            } else {
                console.log('No matching target containers found yet');
            }
        }, 500); 
    });
});

استخدام الأزرار في التصميم

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

تحسين الأداء وواجهة المستخدم

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

خاتمة

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

احمد علي

متخصص في مجال تطوير وإدارة المواقع الإلكترونية، يتمتع بخبرة واسعة في التعامل مع منصات إدارة المحتوى، خاصة ووردبريس. يقدم أحمد حلولاً مبتكرة واستراتيجيات فعالة لتحسين أداء المواقع وتطوير تصميماتها بما يتناسب مع احتياجات المستخدمين. كما يتميز بقدرته على تبسيط المفاهيم التقنية وكتابة محتوى تعليمي يساعد الأفراد والشركات على تحسين تواجدهم الرقمي وتحقيق أهدافهم على الإنترنت.
زر الذهاب إلى الأعلى
Don`t copy text!