آیا به دنبال راهی برای تنظیم اندازه سفارشی آیکون دکمه در المنتور هستید؟ المنتور یکی از ویرایشگر های محبوب است، مردم به علت ویژگی ها و ابزارک های بسیار زیادی که در اختیار کاربران قرار می دهد. دوست دارند از این افزونه ی قدرتمند استفاده کنند. هنگام طراحی یک وب سایت، اجزایی وجود دارد که باید از آنها استفاده کنید، دکمه یکی از آنهاست. المنتور آزادی زیادی برای سفارشی کردن دکمه برای متفاوت کردن این ابزارک از سایرین فراهم می کند. در این مقاله، ما به شما آموزش خواهیم داد که چگونه آیکون دکمه را در اندازه دلخواه خود بر روی المنتور تنظیم کنید. (برای استفاده از این ویژگی باید المنتور پرمیوم را نصب و فعال سازی کنید.)
نکته : برای خرید افزونه المنتور پرو اینجا کلیک کنید.
نحوه تنظیم اندازه سفارشی آیکون دکمه در المنتور
به طور پیش فرض، می توانید آیکون دکمه را در المنتور با اندازه های ثابت زیر تغییر دهید:
- بسیار کوچک
- کوچک
- متوسط
- بزرگ
- فوق العاده بزرگ
اندازه آیکون دکمه در المنتور به صورت پیش فرض به این پنج اندازه محدود شده است و همچنین تنظیمات آن با متن دکمه ترکیب شده است. بنابراین وقتی اندازه دکمه را تنظیم می کنید، روی متن دکمه نیز تأثیر می گذارد.
بنابر این بیایید ببینیم چگونه می توانید اندازه سفارشی را روی آیکون دکمه بدون تأثیرگذاری بر سایر ویژگی ها تنظیم کنید. برای تنظیم اندازه سفارشی روی آیکون دکمه، باید چند خط کد (CSS) سفارشی اعمال کنیم. ویژگی (CSS) سفارشی فقط در المنتور پرمیوم در دسترس است. یک صفحه را با ویرایشگر المنتور باز کنید و یک بخش ایجاد کنید. سپس از قسمت داشبورد ابزارک ها، ابزارک دکمه را بکشید و در قسمت ایجاد شده خود رها کنید.
پس از افزودن ابزارک دکمه، می توانید نوع دکمه را به صورت زیر تنظیم کنید:
- پیش فرض
- اطلاعات
- موفقیت
- هشدار
- خطر
سپس می توانید متن دکمه و پیوند را اضافه کنید و تراز دکمه را تنظیم کنید. از گزینه آیکون می توانید آیکون را آپلود یا انتخاب کنید. همچنین می توانید موقعیت آیکون را تغییر دهید و فاصله بین آیکون ها را تنظیم کنید.
در اینجا می بینید که اندازه آیکون و متن یکسان هستند. بنابراین وقتی سعی می کنید اندازه آیکون را تغییر دهید، اندازه متن نیز تغییر می کند.
قسمت (css) سفارشی
اکنون باید ویژگی (CSS) سفارشی را اعمال کنید تا از شر این مشکل خلاص شوید. به قسمت پیشرفته (Advanced) بروید و کد (CSS) زیر را در قسمت (CSS) سفارشی اضافه کنید.
selector .elementor-button-icon { font-size:80px; color: inherit;
}
selector .elementor-button-text {margin:auto;}
این کد کوچک اندازه آیکون دکمه را 60 پیکسل تعیین می کند و رنگ آبی را اضافه می کند. شما می توانید اندازه و رنگ را با توجه به نیاز خود تغییر دهید. به عنوان مثال اندازه فونت را به 100 پیکسل افزایش دهید و رنگ آن را سیاه کنید. بیایید ببینیم اکنون چگونه به نظر می رسد.
تمام شد! شما با انجام این کار می توانید اندازه آکون دکمه را به دلخواه خود تغییر دهید.
