اضافه کردن عناوین گرادیانتی (طیف رنگی) در المنتور
ایجاد عناوین و متون با طیف رنگی یا متن گرادیانتی در المنتور کار سختی نیست، به شرطی که از افزونه‌های کمکی المنتور استفاده کنید. اما اگر نمی خواهید برای هر کار کوچکی افزونه نصب کنید، این آموزش المنتور برای شماست.
در حقیقت اضافه کردن طیف رنگی (Gradient) به متون به جای یک رنگ ثابت در المنتور بسیار آسان است و با چند خط کد css قابل انجام است و شما دیگر نیازی به افزونه‌های المنتور برای این کار ندارید. خب، فقط مراحل زیر را دنبال کنید، و می‌توانید افزونه‌های اضافی را از لیست خود حذف کرده و سایت المنتوری خود را سبک و سریع نگه دارید.
مرحله ۱: افزودن متن
برای شروع، ویجت عنوان و یا ویجت متن را به صفحه خود اضافه کنید. این روش افزودن متن gradient در المنتور برای تمام ویجت ها یکسان است.
مرحله ۲: کپی و پیست کد CSS
کد CSS زیر را کپی کرده و در وب‌سایت المنتوری خود پیست کنید. پیشنهاد می‌کنیم این کد CSS را در بخش سفارشی‌سازی وب‌سایتتان قرار دهید که با رفتن به داشبورد، نمایش > سفارشی‌سازی > CSS اضافی قابل دسترسی است.
.g-text-1 h1, .g-text-1 h2, .g-text-1 h3, .g-text-1 h4, .g-text-1 h5, .g-text-1 h6, .g-text-1 p, .g-text-1 a {
background: -webkit-linear-gradient(120deg, #ffffe1, #08d5cf);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
همچنین می‌توانید کد CSS را در ادیتور المنتور قرار بدهید، از بخش تنظیمات سایت > CSS سفارشی.
مرحله ۳: انتخاب طیف رنگ
در این مرحله، باید رنگ‌های خود را برای gradient متن گرادیانتی در المنتور انتخاب کنید. می توانید از رنگ‌های برند وب‌سایتتان استفاده کنید و یا هر رنگی که به نظرتان جداب است.
در مراحل بعدی به شما نشان می‌دهیم که چگونه کد CSS را ویرایش کرده و رنگ‌هایی که میخواهید استفاده کنید را تغییر دهید.
استفاده از یک ابزار تولید کننده گرادیانت (Gradient Generator)
ساده ترین راه انتخاب رنگ استفاده از یک وب‌سایت تولید کننده گرادیانت CSS مانند CSS Gradient – Generator، Maker، and Background است، زیرا می‌توانید یک نمای خوب از نحوه دیده شدن گرادیانت را بدست آورید. این کار همچنین باعث صرفه‌جویی در زمان می شود و کل فرآیند را آسان‌تر می‌کند.
اطمینان حاصل کنید که تنها دو رنگ را انتخاب کنید. به طور پیش‌فرض، تولیدکننده با سه رنگ شروع می‌کند، کافی است یکی از رنگ‌ها را حذف کنید، سپس خلاقیت به خرج دهید و چیزی جذاب را انتخاب کنید.
مرحله 4: تغییر رنگ‌ها و زاویه طیف رنگ در کد css
تغییر رنگ های گرادیانت
پس از انتخاب رنگ‌های خود در تولید کننده گرادیانت،کد Hex رنگ ها را کپی و آن‌ها را در CSS جایگذاری کنید. تنها کاری که باید انجام دهید جایگزین کردن کد رنگ های فعلی است. اطمینان حاصل کنید که دونقطه ها یا ویرگول‌ها را حذف نکنید.
تغییر زاویه گرادیانت
ما می‌توانیم چرخش گرادیانت ها را کنترل کنیم. این به معنای این است که می‌توانیم گرادیانت را از بالا به پایین، از چپ به راست، یا با زاویه‌ای مشخص تنظیم کنیم.
در کد CSS عبارت ‘120deg’ را مشاهده می‌کنید. این به معنای 120 درجه است. شما می‌توانید درجه را با تغییر 120 به هر عددی از 1 تا 360 تنظیم کنید. اطمینان حاصل کنید که فقط عدد را ویرایش کنید و هیچ فاصله‌ای بین عدد و ‘deg’ نگذارید.
مرحله 5: افزودن کلاس CSS به عناوین و متون
تقریباً همه چیز آماده است. هنوز هیچ تغییری نخواهید دید، اما بزودی خواهید دید! کافی است کلاس CSS را به ویجت‌های عنوان و متن المنتور خود اضافه کنید.
در ویجت عنوان یا متن خود، به بخش پیشرفته بروید، سپس g-text-1 را در بخش کلاس‌های CSS اضافه کنید. این کلاس CSS شماست، و می‌توانید آن را به هر تعدادی که میخواهید در سایت خود استفاده کنید! هر زمان که میخواهید یک عنوان یا متن گرادیانتی ایجاد کنید، فقط این کلاس CSS را به ویجت خود اضافه کنید.
نکته: اطمینان حاصل کنید که نقطه (.) را در کلاس‌های CSS المنتور اضافه نکنید، تنها g-text-1
مرحله 6: افزودن چند استایل گرادیانت
افزودن چند استایل گرادیانت به متن های المنتور بسیار آسان است. برای انجام این کار،یک کد CSS دیگر مانند کد قبلی به بخش css سفارشی سایت اضافه کنید. در کد دوم، عدد ۱ را با ۲ جایگزین کرده و یک کلاس جدید به نام ‘g-text-2’ ایجاد کنید.
سپس، در ‘g-text-2’ به سادگی کد hex رنگ‌ها و چرخش را تغییر دهید. وقتی استایل دوم شما آماده است، تنها کافی است کلاس جدید ‘g-text-2’ را به هر ویجت عنوان یا متنی که میخواهید اضافه کنید.
به پایان مقاله رسیدیم، امیدوارم که این آموزش به شما کمک کرده باشد تا عناوین و متون گرادیانتی (Gradient) زیبا و جذاب در وب‌سایت خود ایجاد کنید. با دنبال کردن مراحل ساده‌ای که در اینجا ارائه شد، می‌توانید بدون نیاز به اضافه کردن افزونه‌های المنتور، طراحی‌های جذاب و حرفه‌ای را به سایت خود اضافه کنید. همچنین، با استفاده از ترکیب رنگ‌های مختلف و چرخش‌های متفاوت، می‌توانید استایل‌های متنوع و منحصر به فردی را ایجاد کنید. حالا کافی است که خلاقیت خود را به کار گیرید و با اعمال این تکنیک‌ها، وب‌سایت خود را به یک ظاهر متفاوت و جذاب تبدیل کنید.
