Elementor در وردپرس چیست: مروری کامل

4 پاسخ

1. فرق px و % و em و rem و vw در المنتور چیست؟

   پاسخ

   1. ۱. px (پیکسل): این واحد اندازه گیری ثابتi و بدون توجه به اندازه پنجره مرورگر یا دستگاه تغییر نمی کنi. معمولاً برای تعیین ابعاد دقیق عناصری مانند اندازه قلم، بالشتک و حاشیه استفاده می شi.

      ۲. % (درصد): این واحد اندازه گیری بر اساس درصدی از اندازه عنصر اصلیi. به عنوان مثال، تنظیم اندازه فونت بر روی ۱۵۰٪ اون را ۱.۵ برابر بزرگتر از اندازه قلم عنصر اصلی می کنه.

      ۳. em: این واحد اندازه گیری هم نسبت به اندازه قلم عنصر والده، اما محاسبه متفاوتی نسبت به %age داره. ۱em برابر با اندازه قلم عنصر فعلیه که می تونه کنترل مقیاس متن رو آسان تر کنه.

      ۴. rem: مشابه em، مقیاس rem هم نسبت به اندازه فونت عنصر ریشه (معمولا عنصر بدنه) هست. این امر کنترل طراحی ریسپانسیو رو آسون تر می کنه و از مقیاس پذیری در سراسر وب سایت اطمینان حاصل می کنه.

      ۵. vw (عرض viewport): این واحد اندازه گیری بر اساس درصدی از عرض viewport هست که عرض پنجره مرورگره. معمولاً برای ایجاد طرح‌بندی‌های واکنش‌گرا که بر اساس اندازه ویوپورت تنظیم می‌شن، استفاده می‌شه.

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

      پاسخ

2. چند Hotspot و یک تکست باکس در المنتور دارم و می خوام زمانی که موس رو روی هر کدام از Hotspot ها می برم، متنی متفاوت در تکست باکس نمایش داده شود. برای این منظور چکار می تونم بکنم ؟

   پاسخ

   1. یکی از راه های رسیدن به این هدف استفاده از CSS و جاوا اسکریپت سفارشیه. به این صورت که:

      ۱. Hotspot و یک Text Box رو در Elementor اضافه کنید:
      – ابتدا نقاط کانونی خودتون رو با محتوایی که می خواید زمانی که ماوس روی آنها قرار می گیره نمایش بدهید ایجاد کنید.
      – در مرحله بعد، ویجت Text Box رو اضافه کنید که در آن می‌خواید متنی رو که هنگام قرار گرفتن روی Hotspots تغییر می‌کنه، نمایش بدهید.

      ۲. CSS سفارشی اضافه کنید:
      – روی قسمت حاوی Hotspots و Text Box کلیک کنید و به خصوصیات آنها برید.
      – به تب Advanced برید و یه کلاس CSS سفارشی رو به بخش اضافه کنید (به عنوان مثال، “hotspot-section”).

      ۳. جاوا اسکریپت سفارشی بنویسید:
      – به داشبورد وردپرس خودتون برید و به Appearance > Theme Editor برید.
      – فایل جاوا اسکریپت موضوع فعلی خودتون رو (که معمولاً “functions.js” یا مشابه نام داره) پیدا و ویرایش کنید.
      – کد جاوا اسکریپت زیر رو برای مدیریت رویداد موس برای هر هات اسپات اضافه کنید و محتوای Text Box رو متناسب با آن به روز کنید:

      “`
      jQuery(document).ready(function($) {
      $(‘.hotspot’).on(‘mouseover’, function() {
      var hotspotId = $(this).data(‘hotspot-id’); // شناسه Hotspot رو دریافت کنید
      var newText = $(this).data(‘hotspot-text’); // متن رو برای Hotspot دریافت کنید
      $(‘.text-box’).text(newText); // محتوای جعبه متن رو به روز کنید
      })؛
      })؛
      “`

      ۴. Hotspot و Text Box رو به روز کنید:
      – برای هر نقطه اتصال، یه ویژگی سفارشی (به عنوان مثال، “data-hotspot-id”) با یه شناسه منحصر به فرد و یک ویژگی سفارشی دیگه (به عنوان مثال، “data-hotspot-text”) با متنی که می خواید در کادر متن نمایش داده بشه اضافه کنید. هنگامی که ماوس رو روی آن نقطه اتصال قرار میدید.
      – کلاس CSS سفارشی رو که قبلاً ایجاد کردید اضافه کنید تا به Hotspots و Text Box در صورت نیاز استایل بدهید.

      با این مراحل، شما قاعدتا باید بتونید متن های مختلفی رو در Text Box نمایش بدهید، زمانی که ماوس رو روی هر یک از Hotspot ها قرار میدید. مطمئن بشید که عملکرد رو آزمایش کنید تا مطمئن بشید که مطابق انتظار در وب سایت شما کار می کنه.

      پاسخ