Elementor: كيفية إضافة CSS مخصص إلى الإصدار المجاني

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

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

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

الطرق الثلاث لإضافة CSS مخصصة إلى صفحة Elementor أو موقع ويب هي كما يلي:

• أضف كود CSS عبر عنصر HTML.
• عبر البرنامج المساعد كود المقتطف.
• استخدم أداة تخصيص قالب Elementor

الطريقة الأولى: إضافة كود CSS من عنصر HTML الخاص بـ Elementor

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

الخطوة 1: اسحب وأفلت عنصر HTML الخاص بـ Elementor

يمكنك وضع عنصر HTML هذا في أي مكان على الصفحة ، وسيعمل بشكل جيد.

الخطوة الثانية: انقر فوق رمز تحرير HTML

انقر على الأيقونة تحرير html إلى يمين عنصر HTML الخاص بـ Elementor. سيؤدي النقر عليه إلى إظهار صندوق أدوات تحرير HTML على الجانب الأيسر من الشاشة.

الخطوة 3: أضف كود CSS الخاص بك

1. انقر فوق علامة التبويب محتويات وافتح القائمة المنسدلة كود HTML.
2. ضع كود CSS الخاص بك في ملف منارات.

الطريقة 2: Custom CSS لـ Elementor عبر المكون الإضافي Code Snippets

فوائد استخدام البرنامج المساعد Code Snippets:

• إذا كنت ترغب في تغيير أو تحديث سمة WordPress الخاصة بك ، فسيتم تطبيق CSS دائمًا.
• هذه هي الطريقة الأكثر ملاءمة وفعالية لإضافة كود CSS لأنه يمكنك تمكين أو تعطيل كود CSS مثل المكونات الإضافية.

الخطوة 1: افتح قائمة الملحقات على لوحة القيادة

الخطوة 2: قم بإضافة مكون إضافي جديد

انقر فوق الزر "إضافةللوصول إلى صفحة إضافة المكونات الإضافية الجديدة.

1. ابحث عن الإضافة "كود القصاصات" .
2. قم بتثبيته بالنقر فوق الزر تثبيت الآن بمجرد أن تكون نتائج البحث إيجابية.

الخطوة 3: تنشيط البرنامج المساعد

انقر فوق الزر "نشطبمجرد اكتمال التثبيت، قم بتفعيل الملحق مقتطفات الشفرة.

الخطوة 4: افتح صفحة البرنامج المساعد وأضف مقتطف الشفرة

1. افتح القائمة مقتطفات من لوحة القيادة الخاصة بك
2. انقر على زر جديد لإضافة مقتطف رمز جديد

الخطوة 5: قم بإنشاء مقتطف وقم بتنشيطه

1. أدخل اسمًا لمقتطف الشفرة.
2. داخل العلامة ، اكتب الكود الخاص بك. هذا الرمز متاح أدناه للنسخ.
3. انقر فوق الزر "حفظ التغييرات"لحفظ جزء الكود."
4. بعد حفظ ملف CSS، انقر على "نشط"لتفعيل كود CSS".

رمز النسخ

add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );

الطريقة الثالثة: استخدم مُخصص سمة Elementor

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

الخطوة 1: افتح أداة تخصيص السمة

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

الخطوة 2: انقر فوق علامة التبويب CSS الإضافية

سيؤدي هذا إلى فتح صفحة إدخال CSS.

الخطوة 3: أضف كود CSS الخاص بك

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

احصل على Elementor Pro الآن!

اكتشف أيضًا بعض الإضافات المتميزة لبرنامج WordPress  

يمكنك استخدام مكونات WordPress الأخرى لإضفاء مظهر حديث وتحسين قبضة مدونتك أو موقعك الإلكتروني.

نحن نقدم لك هنا بعض الإضافات WordPress المتميزة التي سوف تساعدك على القيام بذلك.

1. FileBird

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

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

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

لمعرفة المزيد، يرجى زيارة الموقع كيفية إدارة الملفات والمجلدات وورد

حتى إذا كنت ترغب في إعطاء دفعة ل إدارة مكتبة الوسائط الخاصة بكيمكن أن يكون مكون WordPress FileBird هو سلاحك السري.

تحميل | عرض | استضافة المواقع

2. في نهاية المطاف WooCommerce الفئات القابلة للتوسيع

يتيح لك هذا البرنامج المساعد WordPress بسهولة تحرير قوائم طويلة من فئات WooCommerce المزعجة ، واستبدالها بمستويات مختلفة من العناصر الفرعية في قائمة الأكورديون.

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

تحميل | عرض | استضافة المواقع

3. WavePlayer

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

ويمكن استخدامه أيضاً لأغراض البث الصوتي (البودكاست)، كما يوفر ميزات أخرى مثل: دعم HTML5، وتصميم متجاوب، وتكامل مع WooCommerce، إلخ...

ستتمكن أيضًا من إنشاء قائمة تشغيل بشكل مرئي قبل نشرها. ميزة أساسية أخرى هي سرعتها وكفاءتها.

تحميل | عرض | استضافة المواقع

الموارد الموصى بها

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

• كيفية ضغط وتغيير حجم الصور على وورد
• كيفية الحصول على عنوان بريد إلكتروني مع استضافة وورد الخاص بك
• كيفية إعادة تسمية الصور على بلوق وورد
• كيفية العثور على وصلة إلى صفحة تسجيل الدخول وورد

خاتمة

هذا كل شيء! بهذا نختتم هذا الدرس. نأمل أن يكون قد ساعدك في إضافة أكواد CSS مخصصة إلى Elementor مجانًا. تفضل باستخدامه! شارك مع أصدقائك على الشبكات الاجتماعية المفضلة لديك. 

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

إذا كانت لديك اقتراحات أو ملاحظات ، فاتركها في قسمنا تعليقات.

...