نیاز به ایجاد دکمه با افکت شناور با Elementor ?
اگر چنین است، در این اتوبوس باشکوه بنشینید، زیرا آنچه امروز به آن خواهیم رسید در ویدیوی زیر است:
بیایید یک صفحه ایجاد کنیم سپس آن را با آن تغییر دهیم Elementor، سپس یک ساختار 2 ستونی را انتخاب کنید. در پنل، بخش جدید ایجاد شده را با انتخاب تغییر می دهیم حداقل ارتفاع در این زمینه ارتفاع و بلافاصله حداقل ارتفاع بیایید کلیک کنیم VH سپس مکان نما را روی 100.
در برگه سبک بیایید رنگ پس زمینه را به # 070e39 تغییر دهیم.
در ستون اول، بیایید یک ویجت Button را رها کنیم، متن آن را با تایپ کردن تغییر دهیم دیدن جزئیات و بیایید آن را به سمت راست تراز کنیم
در برگه سبک بیایید آن را اصلاح کنیم فن چاپ با تغییر اندازه در 15, دگرگونی سور بزرگ et فاصله بین حروف سور 1.1
در برگه پیشرفته، همه را اصلاح کنید حاشیه سور 20 و در بخش CSS سفارشی، بیایید کد زیر را بچسبانیم که یک گرادینت به دکمه اضافه می کند:
انتخابگر {
-Btn-width: 180px.
-Btn-height: 50px.
–Btn-background: # 0e1538;
– گرادیان چپ: # F803F8;
– گرادیان راست: # 03F2FD؛
}
انتخابگر یک {
موقعیت: نسبی؛
عرض: var (–btn-width)؛
ارتفاع: var (–btn-height)؛
}
انتخابگر a: قبل،
انتخابگر a: بعد از {
خوشحال: "؛
موقعیت: مطلق؛
ورودی: 0;
انتقال: 0.5 ثانیه؛
}
انتخابگر a: فرزند nامین (1): قبل،
انتخابگر a: nth-child (1): بعد از {
پس‌زمینه: گرادیان خطی (45 درجه، var (- گرادیان چپ)، var (-btn-پس‌زمینه)، var (-btn-پس‌زمینه)، var (-gradient-راست)).
}
انتخابگر a: شناور: قبل از {
ورودی: -3 پیکسل
}
انتخابگر a: شناور: بعد از {
ورودی: -3 پیکسل
فیلتر: تاری (10 پیکسل)؛
}
انتخاب کننده یک دهانه {
موقعیت: مطلق؛
بالا: 0؛
سمت چپ: 0؛
عرض: 100٪
قد: 100٪
پس زمینه: var (–btn-background)؛
z-index: 10؛
نمایش: flex؛
justify-content: center;
تراز وسایل: مرکز؛
سرریز: پنهان
}
حالا اگر ماوس را روی دکمه نگه دارید، جلوه های باشکوهی را خواهید دید.
برای افزودن یک افکت شیشه ای براق روی دکمه، کد زیر را نیز بچسبانیم:
/ * جلوه شیشه ای براق * /
انتخاب کننده یک فاصله :: قبل از {
خوشحال: "؛
موقعیت: مطلق؛
بالا: 0؛
سمت چپ: -50%;
عرض: 100٪
قد: 100٪
پس زمینه: rgba (255,255,255,0.075);
تبدیل: کج (160 درجه)؛
}
شما یک افکت جدید را مشاهده می کنید که نور بیشتری را به دکمه می آورد.
دفعات بازدید: نحوه ایجاد بخش اعضای تیم با المنتور
حالا بیایید این دکمه را کپی کرده و در ستون دوم پیست کنیم. بیایید تراز دکمه را به چپ و متن را به تغییر دهید اطلاعات بیشتر.
حالا فقط باید انتشار کار شما یا پیش نمایش آن
در اینجا 2 دکمه زیبا ایجاد شده است.
اکنون Elementor Pro را دریافت کنید!
نتیجه
بنابراین ! این برای این آموزش است که به شما نشان می دهد که چگونه یک دکمه با افکت شناور ایجاد کنید سازنده صفحه Elementor. اگر در مورد نحوه رسیدن به آنجا نگرانی دارید، به ما اطلاع دهید نظر.
با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
