إذا كنت مثلي، فلديك الكثير من الأفكار لموقعك الإلكتروني التي ترغب في رؤيتها تتحقق. ورغم أن Elementor يُسهّل إنشاء تصاميم فريدة باستخدام ميزات السحب والإفلات والعناصر الجاهزة، إلا أنه في بعض الأحيان لا شيء يُضاهي قوة CSS. في هذه المقالة، سنشرح كيفية إضافة CSS مخصص في Elementor لتتمكن من الارتقاء بتصميم موقعك الإلكتروني إلى مستوى أعلى!
ثلاث طرق شائعة لإضافة CSS مخصص في Elementor
توجد طرق عديدة لإضافة أكواد CSS مخصصة في Elementor. دعونا نلقي نظرة على أفضل ثلاث طرق للقيام بذلك.
- استخدم أداة تخصيص ووردبريس
- استخدم إضافة CSS
- استخدام أداة HTML
استخدم أداة تخصيص ووردبريس.
لإضافة كود CSS مخصص في Elementor، اتبع الخطوات التالية:
- انتقل إلى المظهر > تخصيص
- في أداة تخصيص ووردبريس، انقر على CSS إضافي.
- سيتم فتح قسم CSS الإضافي. يمكنك إضافة التعليمات البرمجية هنا عن طريق لصقها في مربع النص أو النقر على زر "إضافة CSS مخصص" لاستعراض ملفك من جهاز الكمبيوتر الخاص بك.
استخدم إضافة CSS
تتوفر العديد من الإضافات في السوق، مثل Simple CSS وCustom CSS Pro وCSS Hero، والتي تسمح لك بإضافة CSS مخصص إلى Elementor.
للبدء، انتقل إلى CSS و JS المخصص > إضافة CSS مخصص وانقر على إضافة كود CSS.
سيظهر محرر CSS أساسي على اليسار. يمكنك اختيار تحميل كود CSS داخليًا أو من ملف أنماط خارجي باستخدام خيارات التكوين على اليمين. بالإضافة إلى ذلك، يمكنك تحديد ما إذا كان الكود مناسبًا للرأس أو التذييل
بمجرد الانتهاء من تعديل كود CSS، اضغط على النشر .
ملاحظة: انتقل إلى عرض الواجهة الأمامية لرؤية الكود أثناء العمل.
استخدام أداة HTML
يمكنك استخدام أداة HTML لإضافة CSS مخصص إلى Elementor. كل ما عليك فعله هو سحب وإفلات أداة HTML وإضافة كود CSS الخاص بك داخل وسم <style>.
تُعدّ CSS المخصصة طريقةً لإضافة أكواد مخصصة إلى موقعك الإلكتروني. ويمكن استخدامها لأغراضٍ عديدة، بدءًا من تغيير مظهر موقعك الإلكتروني وتجربة استخدامه، وصولًا إلى إضافة وظائف إضافية.
الآن بعد أن عرفت كيفية إضافة CSS مخصص، يمكنك استخدامه على مواقعك الإلكترونية باتباع هذه الخطوات:
- افتح نافذة محرر Elementor وانقر على أيقونة "+" في أعلى اليسار
- انقر على "رمز مخصص" ثم الصق هذا الجزء من الكود: `.elementor-custom-css{display:none;}`. يمكنك العثور على هذا الخيار ضمن الإعدادات > CSS المخصص أو المظهر > خيارات القالب > CSS المخصص (بحسب إصدار ووردبريس الذي تستخدمه).
خاتمة
الآن وقد تعلمت كيفية إضافة أكواد CSS مخصصة، يمكنك الاستفادة من مرونة Elementor. في المرة القادمة التي لا يعمل فيها شيء ما كما هو متوقع، جرّب إضافة بعض أكواد CSS بدلاً من إصلاحه باستخدام إضافة أو تغيير القالب!
محتوى ذو صلة
- ما هو إطار عمل CSS؟
- كيفية إزالة أكواد CSS غير المستخدمة في ووردبريس؟
