كيفية تعيين حجم مخصص لأيقونة زر العنصر

كيف تُحدِّد حجم أيقونة زر Elementor؟ في هذا الدرس، سنشرح كيفية القيام بذلك باستخدام CSS مُخصَّص.

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

اكتشف كيفية تثبيت Elementor على WordPress

افتراضيًا، يُمكن لأداة زر Elementor تخصيص حجم الأيقونة. لكن هذا الخيار يقتصر على خمسة أحجام ثابتة (صغير جدًا، صغير، متوسط، كبير، وكبير جدًا). ​​ولا يقتصر الأمر على تحديد خمسة خيارات فقط، بل إن الإعداد ليس فرديًا. هذا يعني أنه عند تحديد الحجم، سيؤثر ذلك على عنصرين من عناصر الزر (الأيقونة والنص).

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

كيفية تعيين حجم الرمز المخصص لزر العنصر

قبل بدء هذا البرنامج التعليمي ، نريد أن نعلمك أن هذا البرنامج التعليمي سيعمل مع CSS المخصص لـ Elementor. وظيفة CSS المخصصة متاحة فقط في إليمنتور برو.

حسنًا ، لنبدأ!

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

اقرأ أيضا: العنصر: كيفية إنشاء أشكال مخصصة

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

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

حسنًا ، الآن سنحل هذه المشكلة. في إعدادات الأداة ، انتقل إلى علامة التبويب متقدم -> عرف المغلق.

انسخ مقتطف CSS أدناه ثم الصقه في الحقل عرف المغلق.

selector .elementor-button-icon { font-size:100px; color: inherit;
}
selector .elementor-button-text {margin:auto;}

يمكنك تخصيص حجم الرمز عن طريق تغيير قيمة مقتطف CSS (انظر الصورة أدناه).

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

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

الخاتمة

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

العنصر الإضافي Elementor الذي نوصي به بشدة هو JetElements بواسطة Crocoblock. لدى JetElements أكثر من 40 عنصر واجهة مستخدم. ستجد أداة زر تسمح لك بتخصيص حجم أيقونة الزر.

مع القطعة زر من JetElements ، يعد تخصيص حجم رمز الزر أمرًا بسيطًا وسلسًا للغاية.

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...