عادةً ما تبدو معظم أدوات الشريط الجانبي في ووردبريس متشابهة. سيكون من الجيد أن تتمتع جميع أدواتك بنفس الأهمية ، ولكن الحقيقة هي أن بعض الأدوات المصغّرة أكثر أهمية لنمو موقعك من غيرها. على سبيل المثال ، تعد أداة الاشتراك في قائمة البريد الإلكتروني بالتأكيد أكثر أهمية من أداة الأرشيف. ألن يكون من الجيد أن تتمكن بسهولة من تصميم عناصر واجهة مستخدم مهمة بشكل مختلف؟ في هذه المقالة ، سنوضح لك كيفية إضافة أنماط مخصصة إلى أدوات ووردبريس.
أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي Widget CSS Classes . عند التنشيط ، ما عليك سوى الانتقال إلى Appearance »Widgets والنقر فوق أي عنصر واجهة مستخدم في الشريط الجانبي للتوسيع.
إضافة فئة CSS لإضافة أنماط مخصصة إلى عنصر واجهة مستخدم ووردبريس
ستلاحظ حقل فئة CSS جديدًا أسفل أدواتك ، بحيث يمكنك بسهولة تحديد فئة CSS لكل عنصر واجهة مستخدم. على سبيل المثال ، أضفنا subscribeالفصل إلى أداة نموذج الاشتراك الخاصة بنا.
يمكنك الآن الانتقال إلى ورقة أنماط السمة الخاصة بك وإضافة قواعد النمط الخاصة بك هناك. مثله:
.subscribe {
background-color: #858585;
color:#FFF;
}إضافة أنماط مخصصة إلى أدوات ووردبريس
يمكنك إضافة أي CSS مخصص تريده مثل إضافة خلفية ، وتغيير الحدود ، واستخدام ألوان مختلفة ، وما إلى ذلك.
إذا كنت لا تريد استخدام مكون إضافي ، فيمكنك إضافة أنماط مخصصة يدويًا إلى أدوات ووردبريس الخاصة بك. بشكل افتراضي ، يضيف ووردبريس فئات CSS إلى عناصر مختلفة بما في ذلك الأدوات.
تحتوي كل عنصر واجهة مستخدم في الشريط الجانبي على فئة عناصر واجهة مستخدم مرقمة. مثل widget-1 و widget-2 و widget-3 وما إلى ذلك باستخدام أداة Inspect Element من Google Chrome ، يمكنك العثور على فئة CSS للأداة التي تريد تخصيصها.
العثور على فئة عنصر واجهة المستخدم باستخدام أداة فحص العنصر في Chrome
كما ترى في لقطة الشاشة أعلاه ، فإن الأداة التي نريد تخصيصها تمت widget-2إضافة فئة إليها بواسطة ووردبريس. انتقل الآن إلى ورقة أنماط المظهر الخاص بك وأضف قواعد النمط المخصصة الخاصة بك.
.widget-2 {
background-color: #858585;
color:#FFF;
}
.widget-2 .widget-title {
font-weight:bold;
}هذا كل شيء ، نأمل أن تساعدك هذه المقالة في إضافة أنماط مخصصة إلى أدوات ووردبريس. العب مع CSS وجرب ألوانًا مختلفة. استخدم اختبار الانقسام A / B لمعرفة الأنماط المخصصة التي تعمل بشكل أفضل لموقعك.
أيضًا إذا كنت تريد طريقة أسهل لإبراز عنصر واجهة مستخدم نموذج الاشتراك في الشريط الجانبي ، فجرّب OptinMonster لأنه يوفر تصميمات متعددة واختبار A / B وغير ذلك الكثير.
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
