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

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

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

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

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

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

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

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

الخطوة 1: قم بسحب وإفلات عنصر HTML الخاص بالعنصر

يمكنك وضع عنصر 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 المتميزة التي سوف تساعدك على القيام بذلك.

1. FileBird

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

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

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

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

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

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

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

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

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

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

3. WavePlayer

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

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

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

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

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

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

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

وفي الختام

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

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

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

...