كيفية إضافة CSS مخصص في Elementor: 4 طرق سهلة

هل تبحث عن طرق لإضافة Custom CSS في Elementor؟

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

لذا ، لماذا لا تستخدم بعض CSS المخصص من Elementor وتبرز في حشد هذا العالم الرقمي شديد التنافسية ، أليس كذلك؟

لا يوجد سبب يمنعك من ذلك.

ولكن كيف تضيف CSS مخصصًا إلى أداة إنشاء صفحات العنصر بالسحب والإفلات؟

حسنًا ، يمكنك إضافة CSS مخصص في Elementor بعدة طرق. لمعرفة المزيد من التفاصيل حول كيفية إضافة CSS مخصص في Elementor ، استمر في القراءة ...

ما هو CSS؟

CSS (أوراق الأنماط المتتالية) هي لغة ورقة أنماط قائمة على القواعد يستخدمها المرء لتغيير تخطيط ومظهر صفحات الويب المبنية بلغة ترميزية مثل HTML أو XML. يعد استخدام CSS طريقة فعالة لتصميم الويب لأنه يحافظ على كل من المحتوى والأسلوب في ملف منفصل مما يمنحك أكبر قدر من المرونة وسهولة الاستخدام.

لماذا يجب عليك إضافة CSS مخصص في موقع Elementor ؟

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

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

• وبالمثل ، يمكنك أيضًا تجاوز تصميم قالب Elementor premade باستخدام مقتطفات كود CSS المخصصة.

• يمكنك أيضًا تخصيص تصميم موقع الويب الخاص بك ليبدو مختلفًا على الأجهزة المختلفة عن طريق إضافة مقتطفات كود CSS مخصصة إلى Elementor.

كيفية إضافة CSS مخصص في Elementor: 3 طرق مختلفة

إضافة CSS مخصصة ليست مهمة صعبة على الإطلاق. في الواقع ، يمكنك إضافة CSS مخصص في Elementor باستخدام طرق مختلفة. هنا أشارك معك أكثر 4 طرق أمانًا لإضافة CSS مخصص لـ Elementor.

أضف CSS باستخدام مقتطفات كود CSS المخصصة من Elementor

يوفر لك Elementor خيارًا متقدمًا لإضافة CSS مخصص إلى الأقسام والأعمدة وكذلك الأدوات. ومع ذلك ، لا يتوفر هذا الخيار إلا مع Elementor Pro.

لإضافة CSS مخصص إلى أي قسم / قسم داخلي من موقع Elementor الخاص بك ، انقر فوق Six Dots للانتقال إلى وضع التحرير ، ثم انتقل إلى علامة التبويب Advanced ⇒ Custom CSS . الآن قم بتوسيع علامة التبويب Custom CSS وأضف التعليمات البرمجية المخصصة الخاصة بك.

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

استخدم عنصر واجهة مستخدم HTML لإضافة CSS مخصص Elementor

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

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

أضف CSS مخصصًا في إعدادات موقع Elementor

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

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

أضف CSS مخصصًا في Elementor من إعدادات تخصيص WordPress

لا يتعين عليك بالضرورة استخدام الخيارات التي يوفرها Elementor لإضافة CSS مخصصة. يمكنك أيضًا استخدام خيارات تخصيص WordPress لإضافة CSS مخصص.

لهذا ، انتقل إلى WordPress Dashboard ⇒ المظهر ⇒ التخصيص.

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

كيفية إصلاح مشكلة عدم عمل CSS المخصصة Elementor

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

إعادة إنشاء CSS

يمكن أن يؤدي تجديد CSS إلى حل هذه المشكلة. لإعادة إنشاء CSS ، انتقل إلى Elementor ⇒ Tools وانقر فوق Regenerate CSS & Data ثم انقر فوق حفظ التغييرات.

مسح ذاكرة التخزين المؤقت لموقع الويب وذاكرة التخزين المؤقت للمتصفح

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

عدم توافق الموضوع

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

استخدام أداة إنشاء صفحات أخرى مع Elementor

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

أسئلة مكررة

ألقِ نظرة على بعض الأسئلة الأكثر شيوعًا المتعلقة بـ Elementor Custom CSS مع الإجابات:

كيف يمكنني استخدام CSS مخصص في Elementor؟

يمكنك إضافة CSS مخصص في Elementor بأربع طرق. تستخدم هذه الطرق كتلة HTML ، ومقتطف CSS مخصص Elementor ، وخيارات تخصيص WordPress ، وإعدادات بناء موقع Elementor.

كيف يمكنني إضافة CSS مخصص إلى Elementor مجانًا؟

من خيارات تخصيص WordPress ، يمكنك إضافة CSS مخصص في موقع Elementor مجانًا.

الختام باستخدام CSS مخصص Elementor

أنت الآن تعرف 4 طرق يمكنك استخدامها لإضافة CSS مخصص في Elementor. بينما يمكنك استخدام كل منهم ، يجب أن تضع في اعتبارك التسلسل الهرمي للأولوية في CSS. على سبيل المثال ، سيحصل النمط المضمّن دائمًا على أولوية أكبر على CSS المكتوب على مستوى الصفحة أو مستوى موقع الويب.

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

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