اگر برای طراحی سایت خودتون از قالب وودمارت استفاده میکنید حتما میدونید که این قالب امکان ساخت رنگ گرادینت برای دکمه رو نداره. فقط از بخش تنظیمات قالب> استایل و رنگها میتونید یه رنگ ساده (solid) انتخاب کنید. اما اگر بخواهید به یه دکمه یا هر عنصر دیگه رنگ گرادینت اضافه کنید، چه باید کرد؟ با ادامه مقاله همراه باشید.
طراحی دکمه گرادینت در قالب وودمارت
اول از همه باید عنصری که قصد دارید رنگ رو به گردینت تغییر بدید رو انتخاب کنید. برای اینکار روی اون دکمه کلیک راست کنید و inspect element رو بزنید. مثلا من قصد دارم که رنگ دکمه مربوط به بخش کامنتها رو به gradient تغییر بدم.
توی قدم بعدی باید اسم کلاس مربوط به اون دکمه رو پیدا کنیم.
کلاسی که من باهاش کار دارم .comment-form .submit هست. حالا باید از داشبورد وردپرس برم سراغ تنظیمات قالب> استایل css سفارشی. توی این قسمت کافیه که فقط کد زیر رو وارد کنم تا رنگ مربوط به دکمه ثبت کامنت تمام صفحات به گرادینت تبدیل بشه:
.comment-form .submit {
background-image: linear-gradient(to left, blue, white);
}
به جای رنگ blue و white میتونید هر رنگ دیگهای که دلخواهتون بود رو قرار بدید یا از کد رنگ مخصوصش استفاده کنید. من از پالت رنگ سایت خودم استفاده کردم و نتیجه به این شکل هست:
سایر خدمات: طراحی سایت در قم