ایجاد Tooltip در Elementor بدون افزونه شما در مقاله درستی هستید؛ اگر به دنبال ایده ای برای ارائه توضیحات اضافی یا شاید راهنمایی در مورد متن خاص بدون ایجاد وقفه در روند کاری کاربر هستید، افزودن یک راهنمای ابزار ممکن است بهترین راه حل باشد.
این مقاله به شما نشان می‌دهد که چگونه می‌توانید یک Tooltip در Elementor بدون کمک هیچ افزودنی ایجاد کنید. راهنمای ابزار را می توان به دو طریق فعال کرد. ماوس را نگه دارید و کلیک کنید. معمولاً راهنمایی‌های ابزاری که توسط شناور ایجاد می‌شوند بیشتر در وب‌سایت‌ها یافت می‌شوند. بنابراین، این مقاله بر روی راهنمای راه‌اندازی شده توسط hover تمرکز می‌کند، به این معنی که وقتی کاربران ماوس را روی متن خاصی می‌برند، یک راهنمای ابزار ظاهر می‌شود.
افزودن tooltip در المنتور با کد
مراحل ایجاد Tooltip در المنتور
مرحله 1: قطعه CSS را اضافه کنید
خوب، ایجاد یک راهنمای ابزار در Elementor بسیار آسان است. ابتدا قطعه ساده CSS را به بلوک Additional CSS در Customizer Theme WordPress اضافه کنید.
دو راه برای دسترسی به CSS اضافی وجود دارد.
از داشبورد وردپرس، به Appearance -> Customize -> Additional CSS بروید.
هنگام پیش نمایش محتوای خود (صفحه/پست)، به نوار منو بروید و روی Customize -> Additional CSS کلیک کنید.
پس از وارد کردن بلوک CSS اضافی، لطفاً قطعه ساده CSS زیر را کپی کرده و آن را در فیلد موجود قرار دهید.
پس از اتمام افزودن قطعه CSS، آن را با کلیک بر روی دکمه PUBLISH اعمال کنید.
مرحله 2: راهنمای ابزار را اضافه کنید
بسیار خوب، اکنون ما راهنمای ابزار را به ویجت ویرایشگر متن شما اضافه می کنیم. همانطور که گفته شد، وقتی کاربران ماوس را روی متن خاصی قرار می‌دهند، یک راهنمای ابزار ظاهر می‌شود.
به ویرایشگر Elementor خود بروید و سپس ویرایشگر متن را در ستون خود وارد کنید. مقداری متن اضافه کنید، ویرایش کنید و به دلخواه استایل دهید.
هنگامی که متن/ها را به ویجت اضافه کردید، کلمه/های خاصی را انتخاب کنید که می خواهید در هنگام شناور کردن، به عنوان محرک راهنمایی تنظیم شود. در این مثال، ما یک راهنمای ابزار به “DESIGN” اضافه می کنیم.
بعد، می خواهیم متن را به صورت HTML ویرایش کنیم. به تنظیمات ویجت بروید و ویرایشگر متن را از حالت Visual به Text تغییر دهید.
ایجاد Tooltip در Elementor بدون افزونه
هنگامی که ویرایشگر متن را به حالت متن تغییر دهید، موارد زیر را به ویرایشگر متن وارد می کنیم:
تگ <span> را با استفاده از کلاس tooltip برای “DESIGN” اضافه کنید. برای تنظیم آن به عنوان یک کلمه با یک راهنمای ابزار، این تگ <span> یک والد خواهد بود.
تگ <span> را دوباره با استفاده از کلاس tooltip-text قبل از بستن تگ قبلی (والد) اضافه کنید، بنابراین این تگ <span> فرزند تگ قبلی خواهد بود.
برای اطلاعات بیشتر که در راهنمای ابزار نشان داده می شود، متنی اضافه کنید.
دو کد را با استفاده از تگ </span></span> ببندید.
Elementor به کاربران وردپرس اجازه می دهد تا وب سایت هایی را با تکنیک کشیدن و رها کردن واکنش گرا ایجاد و ویرایش کنند.
