نحوه ایجاد دکمه گرادیان چند رنگ در المنتور

آیا می خواهید یک دکمه گرادینت چند رنگی ایجاد کنید Elementor ?

به صورت پیش فرض Elementor دارای یک ویژگی برای ایجاد رنگ گرادیان برای دکمه شما است، اما فقط به دو رنگ محدود می شود. این مقاله به شما نشان می دهد که چگونه یک دکمه گرادیان چند رنگ ایجاد کنید Elementor بدون کمک افزونه، فقط با استفاده از CSS سفارشی Elementor.

افزودن یک گرادینت چند رنگ به دکمه شما می تواند دکمه شما را جذاب کند و حس طبیعی داشته باشد. ممکن است از خود بپرسید: «آیا امکان ایجاد یک دکمه گرادیانت چند رنگی وجود دارد؟ سایت اینترنتی? ". خوب، همه چیز با Elementor امکان پذیر است و می توانید به راحتی یک دکمه گرادیان چند رنگ ایجاد کنید.

نحوه ایجاد دکمه گرادیان چند رنگ در المنتور

قبل از شروع آموزش، می خواهیم به شما اطلاع دهیم که این آموزش با CSS سفارشی کار می کند. ویژگی CSS سفارشی فقط در دسترس است Elementor Pro; پس حتما به نسخه حرفه ای ارتقا دهید.

اکنون به ویرایشگر Elementor خود بروید. ما از ابتدا شروع می کنیم، بنابراین یک بخش فقط با یک ستون ایجاد کنید. سپس، لطفاً ویجت دکمه را در پنل ویجت انتخاب کنید، سپس آن را بکشید و به قسمت ویرایش Elementor رها کنید. هنگامی که ویجت دکمه را اضافه کردید، می توانید ویجت را با توجه به اولویت های خود ویرایش و استایل دهید.

در تنظیمات ویجت، به برگه بروید پیشرفته -> CSS سفارشی. قطعه CSS را در زیر کپی کنید، سپس آن را در قسمت CSS سفارشی قرار دهید.

selector .elementor-button {
  background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;
}

اگر از گرادیان چند رنگی که اعمال شده است (مانند تصویر بالا) راضی هستید، می توانید آن را به همین شکل نگه دارید و در صورت تمایل پروژه خود را ذخیره کنید. اما، اگر می‌خواهید آن را سفارشی کنید، می‌توانید این کار را با تغییر قطعه CSS به‌طور خاص در بلوک اعلان CSS انجام دهید.

بلوک اعلان CSS با یک پرانتز شروع می شود ( {'' ) و با بستن پرانتز سمت راست ختم می شود(''} ).

برای بدست آوردن بلوک اعلان، می توانید با استفاده از یک گرادیان ایجاد کنید ابزار شیب آنلاین css . ICI Cliquez برای دیدن برخی ابزار از گرادیان CSS. پس از ایجاد گرادینت، CSS را کپی کنید و با چسباندن CSS، بلوک اعلان موجود را با بلوک جدید جایگزین کنید.

Remarque: شما هم می توانید عنوان گرادیان را در Elementor ایجاد کنید .

اکنون Elementor Pro را دریافت کنید!!!

نتیجه

این مقاله نشان می‌دهد که چگونه می‌توانید یک دکمه گرادیان چند رنگی را در Elementor ایجاد کنید. اگر از Elementor به عنوان صفحه ساز برای خود استفاده می کنید سایت اینترنتی وردپرس و شما می خواهید یک دکمه خیره کننده با گرادیان چند رنگ ایجاد کنید، این مقاله می تواند راه حل شما باشد.

دکمه های تک رنگ یا دو رنگ می توانند ساده و خسته کننده به نظر برسند. اما مراقب ایجاد شیب های رنگارنگ روی دکمه های خود باشید. لطفاً به ترکیب تن و رنگی که استفاده می کنید توجه کنید تا دکمه های شما عجیب و خسته کننده به نظر نرسند.

اینجا ! این برای این مقاله است که به شما نشان می دهد چگونه ایجاد دکمه گرادینت چند رنگ در Elementor. اگر در مورد نحوه رسیدن به آنجا نگرانی دارید، به ما اطلاع دهید نظر.

با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...