آیا می خواهید یک دکمه شناور با شاخص Z ایجاد کنید Elementor ?
ما مطمئن هستیم که شما با دکمه ای که در جلوی تمام محتوای صفحه نمایش داده می شود و معمولا با شکل دایره ای و نمادی در مرکز آن ظاهر می شود آشنا هستید. خوب، این دکمه اکشن شناور است.
دکمه اکشن شناور می تواند یک عمل را آغاز کند یا شما را به جایی بفرستد. مانند محرک های ایمیل، شبکه های اجتماعی، جهت گیری آخرین بازدید برای عضویت در یک کانال و بسیاری دیگر.
Dans Elementor، دو روش برای ایجاد دکمه اکشن شناور وجود دارد که به شرح زیر است:
- با تنظیم Z-Index
- با ایجاد یک پنجره بازشو -Popup-
در این آموزش ما فقط به شما نشان می دهیم که چگونه با تنظیم شاخص Z یک دکمه اکشن شناور ایجاد کنید و از نسخه حرفه ای برای تحقق آن استفاده خواهیم کرد.
اما ابتدا بفهمید: نحوه نصب Elementor در وردپرس
نحوه ایجاد دکمه اکشن شناور در المنتور
می توانید از نسخه رایگان استفاده کنیدElementor برای ایجاد دکمه اکشن شناور با این روش. اما، باید دکمه ای را که طراحی کرده اید در هر صفحه ای که می خواهید دکمه روی صفحه نمایش داده شود، بچسبانید سایت اینترنتی.
با Elementor Pro، همچنین می توانید به این ویژگی دسترسی داشته باشید CSS سفارشی، که در این آموزش از آن استفاده خواهیم کرد.
به ویرایشگر Elementor خود بروید. می توانید محتوای موجود خود را تغییر دهید (صفحات، مقالات، و غیره...) یا یک محتوای جدید ایجاد کنید. در این آموزش قصد داریم یک صفحه را اصلاح کنیم.
ابتدا یک بخش جدید با یک ستون ایجاد کنید. ویجت دکمه را انتخاب کنید و آن را بکشید و از پنل ویجت به قسمت ویرایش رها کنید. سپس دکمه را تغییر دهید متن و ارتباط دادن.
در این آموزش، از دکمه به عنوان یک ماشه برای فشار دادن استفاده می کنیم آخرین بازدید برای پیمایش در وب سایت المنتور. سپس، روی گزینه هم ترازی، آن را روی راست et, در نهایت، تغییر دهید اندازه از دکمه روشن خیلی بزرگه.
همانطور که در GIF بالا مشاهده می کنید، این دکمه در قسمت ثابت است. در مرحله بعد، در حالی که آن را در همان موقعیت نگه می داریم، آن را حرکت می دهیم.
برو به برگه پیشرفته. در پارامتر چیدمان، عرض را تنظیم کنید در خط (ماشین)، را تعریف کنید موقعیت در ثابت، تنظیم جهت افقی بر راست و آن را تنظیم کنید میشود décalage همانطور که می خواهید
در ادامه به تعریف موارد ضروری در این روش می پردازیم. در میدان فهرست الفبایی، عدد 9999 را وارد کنید ; این باعث می شود که دکمه همیشه در جلو (شناور) باشد.
حالا نوبت چرخاندن دکمه اکشن شناور است. همیشه زیر زبانه پیشرفته، دسترسی کلاس های css از بلوک چیدمان, سپس بنویس rotate داخل.
همچنین ببینید: المنتور: معرفی بهترین صفحه ساز وردپرس
پس از آن به بلوک بروید CSS سفارشی ، سپس کد زیر را در فیلد قرار دهید:
.rotate.rotate
{transform: rotate(90deg);}می بینید که دستگیره به تازگی چرخیده است، اما یک شکاف عجیب بین کناره صفحه نمایش وجود دارد. بنابراین، بیایید با تنظیم آن، آن را برطرف کنیم میشود décalage در -92
در نهایت، آخرین لمس کوچک را برای این دکمه اکشن شناور انجام می دهیم. دسترسی به بلوک تبدیل کننده، آن را انتخاب کنید بررسی اجمالی، به گزینه دسترسی داشته باشید انحراف و هر گزینه را روی 7.
چندین گزینه برای دستیابی به یک چیز خاص در المنتور وجود دارد. وقتی نوبت به دکمه شناور می رسد، دو گزینه وجود دارد که می توانید استفاده کنید. در اینجا ما فقط یک روش را پوشش داده ایم، روش دیگر یک آموزش دیگر خواهد بود.
دفعات بازدید: Elementor: چگونه یک وب سایت وردپرس را مهاجرت کنیم
اگر می‌خواهید گزینه‌های استایل بیشتری داشته باشید، ایجاد یک دکمه اکشن شناور با استفاده از سازنده Popup جایگزین بهتری خواهد بود زیرا گزینه‌هایی برای سفارشی کردن دکمه و همچنین رفتار خواهید داشت، مانند زمان بسته شدن دکمه، مدت زمان، انیمیشن ورود یا خروج و غیره. .
شما به تازگی این کار را به راحتی انجام داده اید. فقط پیش نمایش کار تبلت و تلفن هوشمند خود را مشاهده کنید، سعی کنید حاشیه ها را برای مطابقت با هر دستگاه تغییر دهید.
اکنون Elementor Pro را دریافت کنید!
نتیجه
بنابراین ! این برای این مقاله است که به شما نشان می دهد چگونه جلوه زوم را روی کارت پروفایل اعمال کنید. اگر در مورد نحوه رسیدن به آنجا نگرانی دارید، به ما اطلاع دهید نظر.
با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
