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

كيفية تعيين حجم لأيقونة الزر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. إذا كانت لديك أية مخاوف بشأن كيفية الوصول ، فأخبرنا بذلك تعليقات.

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

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

...