آیا نیاز به اضافه کردن یک افکت شناور در Elementor از طریق CSS سفارشی دارید؟

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

همچنین بخوانید: نحوه نصب Elementor در وردپرس

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

آیا گزینه دیگری برای افزودن افکت شناور در المنتور وجود دارد؟

بله وجود دارد. می‌توانید افکت شناور را از طریق CSS سفارشی در Elementor اضافه کنید. اما برای اینکه بتوانید CSS سفارشی اضافه کنید، باید از Elementor Pro استفاده کنید زیرا CSS سفارشی فقط در Elementor Pro در دسترس است.

افزودن افکت Hover در Elementor از طریق CSS سفارشی

قبل از شروع، اجازه دهید نگاهی به مثال افکت های شناور ایجاد شده از طریق CSS سفارشی بیندازیم.

برخلاف افکت شناور داخلی المنتور، می توانید از این روش برای افزودن افکت شناور به هر عنصری در المنتور استفاده کنید. چه یک بخش، یک ستون یا یک ویجت (همه ویجت ها).

در این مثال، ما به شما نشان خواهیم داد که چگونه افکت شناور را به یک ستون اضافه کنید.

ابتدا روی دسته ستون کلیک کنید تا به پانل تنظیمات ستون بروید. پس از استفاده از دومی، به برگه دسترسی پیدا کنید پیشرفته و بلوک را باز کنید سفارشی CSS و کد CSS زیر را جایگذاری کنید.

Selector: شناور {گذار: همه .2s سهولت ورود؛ تبدیل: مقیاس (1.1)؛ مکان نما: نقطه؛ z-index: 1؛ }

هورا.

در کد بالا از ویژگی CSS استفاده می کنیم تبدیل () برای اضافه کردن افکت شناور نوع تبدیلی که ما در این مثال استفاده می کنیم مقیاس است، با مدت زمان 1,1 ثانیه.

4 نوع تبدیل دیگر وجود دارد که می توانید از آنها استفاده کنید:transform

  • ماتریس
  • ترجمه کردن
  • چرخاندن
  • سیخ

اگر می خواهید از یک سبک تبدیل متفاوت استفاده کنید، می توانید به سادگی مقدار آن را نادیده بگیرید تبدیل در کد CSS بالا

شما می توانید بخوانید صفحه cette برای کسب اطلاعات بیشتر در مورد تحول CSS.

می توانید همین مسیر را دنبال کنید تا یک افکت شناور به عناصر دیگر اضافه کنید.

برای افزودن افکت شناور به یک بخش، می‌توانید روی دسته بخش کلیک کرده و به تب بروید پیشرفته و بلوک را باز کنید CSS سفارشی.

افکت شناور را در Elementor از طریق CSS سفارشی اضافه کنید

برای افزودن افکت شناور به ویجت، می‌توانید روی دسته ویجت کلیک کرده و دوباره به برگه بروید. پیشرفته ، سپس بلوک را باز کنید CSS سفارشی

سایر افزونه های اضافی وردپرس برتر 

همچنین موارد دیگر را کشف کنید افزونه های وردپرس حق بیمه که عملکرد وبلاگ یا وب سایت وردپرس شما را بهینه می کند.

1. پنجره فروش زنده

پنجره فروش زنده یکی دیگر از موارد است پلاگین وردپرس اعلان با چندین ویژگی که می توانید آنها را به یک مزیت تبدیل کنید. اول از همه، او این امکان را دارد یک پنجره بازشو نمایش دهید وقتی کسی یک سفارش را کامل می کند افزونه فروش پنجره فروش زنده وردپرس

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

با جدیدترین روندهای وب ، می توانید انتظار داشته باشید که پنجره فروش مستقیم در تمام دستگاه ها و مرورگرها به زیبایی نمایش داده شود. در مورد طرح پنجره بازشو ، می توانید آن را تا کوچکترین جزئیات تنظیم کنید.

خوانده شده: چگونه به رفع یک هشدار امنیتی در وبلاگ وردپرس خود را

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

دانلود | نسخه ی نمایشی | میزبانی وب

2. Foodify

غذا دادن سریعترین و آسان ترین راه برای سفارش مشتری برای تهیه مواد غذایی از فروشگاه است. کاملاً پاسخگو و شامل ویژگی های اضافی مانند تصویر ، گزینه جستجو، اطلاعات مربوط به محصول منوی غذایی رستوران Foodlify برای تجارت جهانی

همچنین برای بهبود ، دکمه هایی را به سبد اضافه می کند تجربه کاربر. این افزونه WooCommerce یک راه حل سریع و جامع برای سفارشات است که می تواند به هر وب سایت WooCommerce اضافه شود.

اینجا برای شما پلاگین های WordPress 5 برای بهینه سازی توصیف ها و برچسب های گروه

این مزیت بسیار انعطاف پذیر و سازگار با بسیاری از افزونه های موجود در پوشه وردپرس است.

دانلود | نسخه ی نمایشی | میزبانی وب

3. Mega Zoom & Pan Image Viewer

افزونه Mega Zoom & Pan Image Viewer یک نمایشگر و مرورگر تصویر عالی با طرح بندی کاملاً واکنش گرا برای نمایش تصاویر بزرگ بر روی شما است. وبلاگ وردپرس.

افزونه Mega zoom pan wordpress برای بزرگنمایی

این یک ابزار قدرتمند طراحی شده برای ارائه محصولات است (تصاویر با وضوح بالا. مثال: لباس ، اتومبیل ، نمودار فنی و غیره) ، نمایش نقشه ها و همه تصاویر دیگر ، به لطف بزرگنمایی ، عملکرد آن پانوراما ، کنترلهای ناوبری آن ، نوار پیمایشی آن، و نشانگرها / نقاط دسترسی بسیار قابل تنظیم است.

در اینجا 5 برنامه تلفن هوشمند برای محافظت از تصاویر و فیلم های شما

این افزونه در iOS (iPad ، iPhone) عالی کار می کند، اندروید و ویندوز موبایل و غیره. همچنین در تمام مرورگرهای مدرن و مرورگرهای قدیمی مانند IE7 یا IE8 کار می کند.

دانلود | نسخه ی نمایشی | میزبانی وب

سایر منابع پیشنهادی

ما همچنین از شما دعوت می کنیم تا با منابع زیر مشورت کنید تا بیشتر در کنترل و کنترل وب سایت و وبلاگ خود باشید.

نتیجه

بنابراین ! این همه برای این راهنما است. امیدواریم این مقاله به شما کمک کرده باشد که افکت شناور را در Elementor از طریق CSS سفارشی اضافه کنید. همچنین می توانید مقاله ما را در اینجا بخوانید نحوه رفع انسداد رندر جاوا اسکریپت و CSS در وردپرس.

با این حال، شما همچنین می توانید با ما مشورت کنید ressourcesاگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

اگر دوست یا نظری دارید، لطفاً آن را در بخش بنویسید commentaire. اغلب این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...