عاجلاً أم آجلاً، يصطدم كل إصدار من Elementor بجدار لا تستطيع عناصر التحكم في اللوحة تسلقه: تأثير التمرير الذي لا توفره علامة التبويب Style، أو الرسوم المتحركة للإطار الرئيسي التي وجدتها في برنامج تعليمي. يحتفظ Elementor بـ CSS مخصص لكل عنصر خلف ترخيص Pro. ال Css مخصص تمديد في الإضافات الرئيسية للعنصر يزيل هذا الجدار: محرر CSS في كل قسم وحاوية وعمود وعنصر واجهة مستخدم في المحرر المجاني.
هنا هو في المحرر. يهبط CSS في الصندوق، وتبدأ بطاقات الشهادة في الانزلاق عبر اللوحة القماشية في نفس الثانية
ما يفعله ملحق CSS المخصص #
بمجرد التمكين، يحصل كل عنصر في محرر Elementor على Css مخصص القسم تحته متقدم علامة التبويب. يوجد بالداخل محرر تعليمات برمجية مع تمييز بناء الجملة وأرقام الأسطر. كل ما تكتبه هناك ينطبق على هذا العنصر فقط، وتقوم اللوحة بمعاينته مباشرة، لذلك تشاهد القاعدة تدخل حيز التنفيذ أثناء الكتابة.
المحرر يدعم محدد الكلمة الأساسية، والتي تعني غلاف العنصر الخاص. يكتب selector { } وتستهدف القاعدة هذا القسم أو عنصر واجهة المستخدم بالضبط، دون البحث عن أسماء الفئات التي تم إنشاؤها بواسطة Elementor. تعمل محددات الأطفال أيضًا selector .some-class يصل داخل العنصر.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة. النسخة المجانية كافية.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ اتبع دليل التثبيت أولاً.
- يعد CSS المخصص امتدادًا مجانيًا، لذلك لا يلزم الحصول على ترخيص Pro.
- بعض CSS. حتى المقتطفات الملصقة تعمل، نظرًا لأن الكلمة الأساسية المحددة تزيل الجزء الثابت.
كيفية تمكين امتداد CSS المخصص #
من لوحة تحكم WordPress الخاصة بك، انتقل إلى الإضافات الرئيسية وافتح ملحقات علامة التبويب. يوجد CSS مخصص في الحاجيات المرافق مجموعة تحمل شارة شعبية، بجوار Custom JS و ناسخ البريد/الصفحة. انقر فوق التبديل الخاص به حتى يتحول إلى اللون الأرجواني، ثم اضغط حفظ التغييرات وانتظر حتى يتم حفظ إعدادات “ الخضراء بنجاح في إشعار”.
افتح محرر CSS المخصص على أحد العناصر #
حدد أي عنصر في محرر Elementor، وحاوية كاملة في العرض التوضيحي، وافتح متقدم علامة التبويب. انتقل إلى Css مخصص قسم يحمل شارة MA الأرجوانية وقم بتوسيعها. يظهر محرر تعليمات برمجية فارغ، مع تلميح أسفله: استخدم الكلمة الأساسية “selector” لاستهداف عنصر الغلاف.
اكتب أو الصق CSS #
يحول العرض التوضيحي صفًا ثابتًا من بطاقات الشهادات إلى سرادق متحرك مع إطار رئيسي واحد للرسوم المتحركة
selector {
animation: testimonial 5s linear infinite alternate;
}
@keyframes testimonial {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(calc(-100% + 100vw));
}
}الصقها وتطيع اللوحة القماشية على الفور: تبدأ البطاقات في الانزلاق من اليمين إلى اليسار، ثم الرجوع للخلف في النهاية، ثم التكرار، تمامًا كما تظهر صورة GIF الموجودة أعلى هذه الصفحة. لا يوجد شيء لحفظه أو تحديثه أولاً. ال selector تقوم الكلمة الأساسية بتثبيت الرسوم المتحركة في هذه الحاوية، لذلك لا يتم لمس أي شيء آخر على الصفحة.
النتيجة على الصفحة #
يضرب ينشر وتقوم الواجهة الأمامية بتشغيل نفس الرسوم المتحركة: ينجرف صف الشهادة عبر إطار العرض، ويوقف الاتجاه مؤقتًا عند كل طرف، ويستمر في ركوب الدراجات من تلقاء نفسه.
إحدى العادات التي تستحق الاحتفاظ بها: يعيش CSS على العنصر، وليس في ورقة أنماط عامة. قم بتكرار القسم في صفحة أخرى وتنتقل الرسوم المتحركة معه.
حيث يساعد CSS المخصص لكل عنصر #
- الرسوم المتحركة للإطار الرئيسي. السرادقات، والأزرار النابضة، والشارات العائمة، وأي شيء لا تستطيع عناصر التحكم في اللوحة التعبير عنه.
- تحوم الدول.
selector:hoverقواعد المصاعد والظلال وتغييرات الألوان على البطاقات. - إصلاحات المقتطف. هذه الإجابة الواحدة لـ Stack Overflow التي تحل خطأ التخطيط الخاص بك، ويتم تطبيقها بالضبط حيث يعيش الخطأ.
- تعديلات مستجيبة. استعلام وسائط في قسم واحد بدلاً من تحرير ورقة الأنماط على مستوى الموقع.
- تجارب التصميم. اختبر قاعدة مباشرة على اللوحة القماشية قبل الترويج لها في CSS الخاص بموضوعك.
فيديو تعليمي #
شاهد التدفق بأكمله، بدءًا من تمكين الامتداد وحتى البطاقات المتحركة التي تعمل على الصفحة المنشورة.
الأسئلة المتداولة #
كيف يمكنني إضافة CSS مخصص في Elementor بدون Pro؟
قم بتمكين ملحق CSS المخصص في علامة التبويب Master Addons Extensions، وحدد أي عنصر في المحرر، وافتح CSS المخصص ضمن علامة التبويب Advanced. اكتب أو ألصق CSS في محرر التعليمات البرمجية وينطبق ذلك على هذا العنصر بمعاينة مباشرة، دون الحاجة إلى ترخيص Pro.
ماذا تفعل الكلمة الرئيسية للمحدد؟
إنه يرمز إلى غلاف العنصر الذي تقوم بتحريره. قاعدة مثل المحدد {اللون: أحمر؛ } يستهدف هذا القسم أو عنصر واجهة المستخدم بالضبط دون معرفة أسماء الفئات التي تم إنشاؤها بواسطة Elementor، ويصل المحدد .child إلى العناصر الموجودة بداخله.
هل ينطبق CSS على الموقع بأكمله أم على عنصر واحد فقط؟
فقط العنصر الذي يحمله. يحتوي كل قسم أو عمود أو عنصر واجهة مستخدم على مربع CSS مخصص خاص به، لذلك تظل القواعد محددة النطاق. يؤدي تكرار العنصر إلى نسخ CSS الخاص به معه، مما يحافظ على التأثيرات قابلة للنقل بين الصفحات.
هل يمكنني تشغيل الرسوم المتحركة CSS بهذا الامتداد؟
نعم. يقبل المحرر CSS الكامل بما في ذلك @keyframes واستعلامات الوسائط والفئات الزائفة مثل التمرير. يقوم العرض التوضيحي الموجود في هذه الصفحة بتشغيل رسم متحرك لإطار المفاتيح في صف الشهادة، ويتم معاينته مباشرة في المحرر قبل النشر.
هل ملحق CSS المخصص مجاني؟
نعم. يأتي CSS المخصص مع الإصدار المجاني من Master Addons for Elementor، في مجموعة Utilities Widgets في علامة التبويب Extensions. تغطي صفحة التسعير ما تضيفه خطط Pro.
إلتحاق بالركب #
يمنح ملحق CSS المخصص Elementor فتحة الهروب المجانية التي يحتاجها كل مشروع حقيقي في النهاية: محرر CSS محدد النطاق على أي عنصر، مع معاينة مباشرة وكلمة رئيسية محددة توفر عليك علم آثار اسم الفئة. إقرانها مع امتداد خلفية التدرج المتحركة (Pro) للحركة دون كتابة الإطارات الرئيسية على الإطلاق، وتصفح المجموعة الكاملة من عناصر واجهة المستخدم والإضافات الرئيسية لبقية صندوق الأدوات.
