آیا می خواهید یک دکمه شناور با شاخص Z در Elementor ایجاد کنید؟
در دنیای طراحی وب، دید و دسترسی برای به حداکثر رساندن تعامل کاربر بسیار مهم است. دکمه شناور قابلیتی است که توجه را به خود جلب می کند و تعامل در سایت شما را تسهیل می کند.
با استفاده از شاخص Z در Elementor، می توانید کاری کنید که این دکمه همیشه در بالای عناصر دیگر باقی بماند و اطمینان حاصل شود که بدون توجه به پیمایش صفحه، به راحتی برای بازدیدکنندگان شما قابل دسترسی است.
این مقاله شما را در فرآیند ایجاد یک دکمه شناور با شاخص Z در المنتور راهنمایی می کند. ما مراحل مورد نیاز برای افزودن یک دکمه را پوشش می دهیم، آن را به درستی قرار می دهیم و شاخص Z آن را به گونه ای پیکربندی می کنیم که همیشه قابل مشاهده باشد.
چه بخواهید دکمه فراخوانی، دکمه بازگشت به بالا یا هر عنصر تعاملی دیگری را اضافه کنید، این روش به شما این امکان را می دهد که بدون نیاز به کدنویسی آن را به طور موثر یکپارچه کنید.
اگر می خواهید آنچه را که امروز می خواهیم به شما نشان دهیم را ببینید، ویدیوی زیر را تماشا کنید
فهرست مطالب
چرا یک دکمه شناور ایجاد کنیم؟
1. دید تعلق می گیرد : دکمه های شناور طوری طراحی شده اند که بدون در نظر گرفتن پیمایش صفحه قابل مشاهده باشند. با استفاده از یک دکمه شناور، اطمینان حاصل می کنید که فراخوانی برای اقدام، اشکال جزئیات تماس یا گزینه های مهم ناوبری همیشه در دسترس بازدیدکنندگان شما هستند. این احتمال را افزایش می دهد که آنها با وب سایت شما در مناسب ترین زمان تعامل داشته باشند.
2. بهبود تجربه کاربری : یک دکمه شناور با ارائه دسترسی سریع به ویژگیهای ضروری، بدون نیاز به جستجو یا پیمایش صفحه به پایین، تجربه کاربر را بهبود میبخشد. این ممکن است شامل دکمههای تماس، دکمههای بازگشت به بالا یا پیشنهادات ویژه باشد. با تسهیل ناوبری، سایت خود را بصری تر و استفاده از آن لذت بخش تر می کنید.
3. افزایش نرخ تبدیل : دکمه های شناور توجه را به خود جلب می کنند و بازدیدکنندگان را تشویق می کنند تا اقداماتی مانند پر کردن فرم یا خرید یک محصول انجام دهند. با قرار دادن استراتژیک دکمه هایی با شاخص Z بالا، آنها را به حداکثر می رسانید دید و اثربخشی آنها، که می تواند منجر به افزایش قابل توجهی در نرخ تبدیل شما شود.
4. انعطاف پذیری موقعیت : دکمه های شناور از نظر موقعیت یابی انعطاف پذیری زیادی را ارائه می دهند. میتوانید آنها را در هر کجای صفحه که میخواهید قرار دهید، خواه گوشه پایین سمت راست برای دکمه چت زنده یا گوشه بالا برای دکمه بازگشت به بالا باشد. این سازگاری به شما اجازه می دهد تا نیازهای خاص سایت و مخاطبان خود را برآورده کنید.
5. سازگاری با نیازهای بازاریابی : با استفاده از دکمه های شناور، می توانید به راحتی عناصر بازاریابی مانند تبلیغات یا ثبت نام در خبرنامه را مستقیماً در تجربه کاربر ادغام کنید. دکمه های شناور توجه بازدیدکنندگان را بدون وقفه در مسیریابی آنها جلب می کند، که برای تبلیغ پیشنهادات ویژه یا جمع آوری اطلاعات تماس ایده آل است.
6. بهبود دسترسی : دکمه های شناور ویژگی های مهم را حتی زمانی که در انتهای صفحه قرار دارند در دسترس کاربران قرار می دهند. این به ویژه برای سایتهایی با صفحات طولانی محتوا مفید است، جایی که کاربر ممکن است نیاز داشته باشد به صفحه بالا برگردد یا به اطلاعات دسترسی سریع داشته باشد.
7. ایجاد یک طرح منسجم : با ادغام دکمه های شناور در طراحی خود، می توانید ثبات بصری و عملکردی را در تمام صفحات سایت خود حفظ کنید. استفاده از دکمه های شناور مشابه با سبک های ثابت به تقویت هویت برند شما و بهبود تجربه کلی کاربر کمک می کند.
به طور خلاصه، ایجاد یک دکمه شناور یک راه عالی برای اطمینان از اینکه عناصر کلیدی وب سایت شما قابل مشاهده و در دسترس باقی می مانند.
اما ابتدا بفهمید: نحوه نصب Elementor در وردپرس
نحوه ایجاد دکمه شناور با شاخص Z در المنتور
ایجاد یک دکمه شناور با شاخص Z در Elementor یک راه ساده و موثر برای اطمینان از این است که برخی از عناصر وب سایت شما همیشه برای کاربران قابل مشاهده و در دسترس باقی می مانند، حتی زمانی که آنها صفحه را به پایین حرکت می کنند.
در اینجا یک روش گام به گام برای اضافه کردن یک دکمه شناور با استفاده از تنظیمات شاخص Z برای نشان دادن آن بالاتر از سایر عناصر وجود دارد.
مرحله 1: یک دکمه جدید اضافه کنید
1. المنتور را باز کنید
- به صفحه یا پستی که میخواهید دکمه شناور را اضافه کنید بروید.
- برای باز کردن "ویرایش با Elementor" کلیک کنیدویرایشگر بصری از المنتور
2. ویجت دکمه را اضافه کنید
- در پانل ویجت در سمت چپ، ویجت "دکمه" را پیدا کنید.
- این ویجت را به قسمت دلخواه صفحه خود بکشید.
3. دکمه را سفارشی کنید
- در پانل سمت چپ، متن دکمه را سفارشی کنید، مانند « Contactez-عقل "یا" یک نسخه نمایشی دریافت کنید"
- تغییر رنگ، تایپوگرافی و حاشیه در " سبک » به طوری که دکمه کاملاً در طرح شما قرار می گیرد.
همچنین ببینید: المنتور: معرفی بهترین صفحه ساز وردپرس
مرحله 2: از موقعیت شناور استفاده کنید
1. موقعیت یابی را پیکربندی کنید
- به تب "Advanced" در پانل سمت چپ بروید.
- در قسمت «موقعیت»، بسته به جلوه مورد نظر، «ثابت» یا «مطلق» را انتخاب کنید. موقعیت "ثابت" اغلب برای دکمه های شناور استفاده می شود، زیرا آنها را حتی در هنگام پایین کشیدن صفحه در جای خود نگه می دارد.
2. تنظیم موقعیت
- از گزینه های موقعیت یابی برای قرار دادن دکمه در محل مورد نظر در صفحه استفاده کنید. به عنوان مثال، می توانید آن را در پایین سمت راست با تنظیمات زیر قرار دهید:
- پایین - افست : 20px
- Droite - شکاف : 20px
- در صورت نیاز این تنظیمات را طوری تنظیم کنید که دکمه به وضوح قابل مشاهده باشد.
مرحله 3: Z Index را پیکربندی کنید
1. درک شاخص Z
- شاخص Z یک ویژگی CSS است که تعیین می کند کدام عنصر در بالای عناصر دیگر نمایش داده شود. هر چه مقدار بالاتر باشد، عنصر بیشتر از بقیه متمایز خواهد شد.
2. Z Index را روی دکمه اعمال کنید
- هنوز در تب "پیشرفته"، بخش "CSS سفارشی" را پیدا کنید.
- کد CSS زیر را برای تنظیم یک کد Z بالا اضافه کنید: cssCopy
z-index: 9999;
- این مقدار تضمین می کند که دکمه شناور شما همیشه بالای سایر عناصر صفحه قابل مشاهده باشد.
مرحله 4: تست و تنظیم کنید
1. عملکرد را بررسی کنید
- صفحه خود را پیش نمایش کنید تا مطمئن شوید که دکمه شناور به درستی کار می کند و در حین پیمایش قابل مشاهده است.
- دکمه را روی دستگاه های مختلف تست کنید تا مطمئن شوید که به درستی قرار گرفته و در همه صفحه ها قابل مشاهده است.
2. در صورت لزوم تنظیم کنید
- اگر مشاهده یا استفاده از دکمه دشوار است، به تنظیمات سبک و موقعیت یابی برگردید.
- رنگ، حاشیهها یا شاخص Z را برای بهبود دید و دسترسی دکمه تنظیم کنید.
3. در صورت لزوم دکمه آن را بچرخانید
گاهی اوقات لازم است دکمه شناور خود را بچرخانید تا کاملاً در طراحی شما قرار گیرد.
- زیر زبانه پیشرفته، دسترسی کلاس های css از بلوک چیدمان, سپس بنویس
rotate
داخل.
همچنین ببینید: المنتور: معرفی بهترین صفحه ساز وردپرس
- به بلوک دسترسی پیدا کنید CSS سفارشی ، سپس کد زیر را در فیلد قرار دهید:
.rotate.rotate
{transform: rotate(90deg);}
Remarque : اگر بلوک را نمی بینید CSS سفارشی، پس از یک نسخه رایگان استفاده می کنید. شما باید ادامه دهید نسخه پرو Elementor تا از این ویژگی بهره ببرند.
دفعات بازدید: Elementor: چگونه یک وب سایت وردپرس را مهاجرت کنیم
اگر افست وجود دارد، به موقعیت یابی بروید و افست ها را تغییر دهید تا با آنچه می خواهید مطابقت داشته باشد.
همچنین ممکن است بخواهید این دکمه را در حالت شناور متحرک کنید. بنابراین
- در برگه پیشرفته برو به بلوک تبدیل کننده
- روی دکمه On Hover کلیک کنید
- با کلیک بر روی مداد، Offset را تغییر دهید
- افست را تغییر دهید
دکمه به صورت دلخواه به حالت شناور حرکت می کند.
چندین گزینه برای دستیابی به یک چیز خاص در المنتور وجود دارد. وقتی نوبت به دکمه شناور می رسد، دو گزینه وجود دارد که می توانید استفاده کنید. در اینجا ما فقط یک روش را پوشش داده ایم، روش دیگر یک آموزش دیگر خواهد بود.
دفعات بازدید: Elementor: چگونه یک وب سایت وردپرس را مهاجرت کنیم
اگر میخواهید گزینههای استایل بیشتری داشته باشید، ایجاد یک دکمه اکشن شناور با استفاده از سازنده Popup جایگزین بهتری خواهد بود زیرا گزینههایی برای سفارشی کردن دکمه و همچنین رفتار خواهید داشت، مانند زمان بسته شدن دکمه، مدت زمان، انیمیشن ورود یا خروج و غیره. .
شما به تازگی این کار را به راحتی انجام داده اید. فقط پیش نمایش کار تبلت و تلفن هوشمند خود را مشاهده کنید، سعی کنید حاشیه ها را برای مطابقت با هر دستگاه تغییر دهید.
سوالات متداول
چرا دکمه شناور من در بالای عناصر دیگر ظاهر نمی شود؟
بررسی کنید که شاخص Z به درستی پیکربندی شده است و مطمئن شوید که هیچ عنصر دیگری در صفحه دارای شاخص Z بالاتر نیست.
آیا دکمه شناور با دستگاه های تلفن همراه سازگار است؟
بله، دکمههای شناور در دستگاههای تلفن همراه به خوبی کار میکنند، اگر موقعیت و استایل را برای نمایشگرهای کوچکتر تنظیم کنید.
آیا می توانم از انیمیشن ها روی دکمه شناور خود استفاده کنم؟
کاملا. برای جذابتر کردن دکمه، میتوانید انیمیشنها را از طریق گزینههای استایل Elementor اضافه کنید.
چگونه می توانم دکمه شناور را طوری تنظیم کنم که با محتوا تداخل نداشته باشد؟
از گزینههای حاشیه و padding در Elementor استفاده کنید تا فضای اطراف دکمه را طوری تنظیم کنید که محتوای مهم را پوشش ندهد.
اکنون Elementor Pro را دریافت کنید!
نتیجه
ایجاد یک دکمه شناور با شاخص Z در Elementor می تواند تعامل کاربر را در وب سایت شما تغییر دهد. این نوع دکمه، که بدون توجه به پیمایش صفحه قابل مشاهده است، برای جلب توجه به فراخوانهای عملی بسیار ایدهآل است. اشکال اطلاعات تماس یا سایر عناصر مهم با استفاده از ویژگی های Elementor، می توانید به راحتی موقعیت شناور را پیکربندی کنید و شاخص Z را تنظیم کنید تا مطمئن شوید که دکمه شما بالاتر از سایر محتواها قرار دارد.
با دنبال کردن مراحل ذکر شده، می توانید یک دکمه شناور موثر را بدون نیاز به مهارت های برنامه نویسی اجرا کنید. مطمئن شوید که دکمه خود را بر روی دستگاه های مختلف تست کنید تا دید و تاثیر آن را بررسی کنید. با یک دکمه شناور که به خوبی طراحی شده است، تجربه کاربری را بهینه کرده و تعاملات را در سایت خود افزایش خواهید داد.
برای بهبود تعامل در وب سایت خود دیگر منتظر نمانید. اکنون یک دکمه شناور با Elementor ایجاد کنید و ببینید که چگونه می تواند تعامل بازدیدکنندگان شما را افزایش دهد.
اگر این مقاله برای شما مفید بود، در به اشتراک گذاشتن آن با همکاران خود و ارائه نظرات خود دریغ نکنید! اما شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.