می خواهید یاد بگیرید که چگونه افکت شناور را به موارد موجود در ویجت پست اضافه کنیدElementor?
اگر کاربر وردپرس هستید با استفاده از Elementor برای ایجاد خود وب سایت، باید با ویژگی افکت شناور آشنا باشید. شما می توانید این ویژگی را عمدتا در هر تنظیمات ویجت پیدا کنید Elementor.
افکت شناور می تواند عناصر شما را جذاب کند، بنابراین راهی موثر برای بهبود تجربه کاربری در شماست سایت اینترنتی.
خوب، در مورد اثر شناور صحبت می کنیم، این مقاله به شما نشان می دهد که چگونه دومی را به عناصر پست جداگانه در ویجت اضافه کنید. Elementor پست هایی با استفاده از CSS سفارشی Elementor، به طور خاص، جلوه شناور بزرگنمایی.
دو دلیل وجود دارد که چرا ما این آموزش را برای شما درست می کنیم:
- به‌طور پیش‌فرض، می‌توانید افکت شناور را از ویجت Elementor posts به یک پست اضافه کنید. اما، اثر شناور بسیار اساسی/استاندارد خواهد بود.
- به‌طور پیش‌فرض، Elementor به شما امکان می‌دهد یک افکت زیپ به ویجت Posts (برگه پیشرفته -> تبدیل کننده -> مقیاس). اما افکت شناور روی همه عناصر ویجت پست‌ها (نه تکی) تأثیر می‌گذارد.
مراحل افزودن افکت شناور به پست‌های جداگانه از ویجت پست‌های Elementor
قبل از شروع آموزش، می خواهیم به شما اطلاع دهیم که این آموزش از ویژگی Custom CSS Elementor استفاده می کند. این ویژگی فقط در دسترس است Elementor Pro; مطمئن شوید که نسخه خود را ارتقا داده اید.
مرحله 1: ویجت پست ها را اضافه کنید
به ویرایشگر Elementor خود بروید و ما همه چیز را از ابتدا شروع می کنیم، بنابراین یک بخش با یک ستون ایجاد کنید.
دفعات بازدید: نحوه ادغام MailChimp با Elementor
سپس، ویجت Posts را از پنل ویجت انتخاب کنید، سپس آن را بکشید و در قسمت ویرایش رها کنید. هنگامی که ویجت Posts را اضافه کردید، می‌توانید ویجت را مطابق با اولویت‌های خود ویرایش و استایل دهید.
Remarque: لطفاً مطمئن شوید که قبلاً مقالاتی را در سایت خود منتشر کرده اید سایت اینترنتی.
مرحله 2: قطعه CSS را اضافه کنید
هنگامی که ویجت Posts را ویرایش و استایل دادید، در مرحله بعد با افزودن قطعه ساده CSS، یک افکت شناور در یک پست جداگانه اضافه می کنیم. در تنظیمات ویجت Posts، به Tab بروید پیشرفته -> CSS سفارشی. لطفاً قطعه CSS زیر را کپی کنید و سپس آن را در فیلد جای‌گذاری کنید CSS سفارشی.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
کد بالا با استفاده از انتخابگر، عنصر پست فردی را در ویجت Posts انتخاب می کند .élémentor-post و تبدیل CSS را اعمال کنید.
اگر از افکت شناور استفاده شده راضی هستید، می توانید آن را به همین شکل نگه دارید و در صورت تمایل پروژه خود را ذخیره کنید. اما، اگر می‌خواهید سرعت انتقال و مقدار مقیاس تبدیل را سفارشی کنید، می‌توانید مقدار را در قطعه CSS تغییر دهید.
Remarque: Transform/zoom in یک افکت رایج و محبوب است که در وب سایت ها استفاده می شود. اگر می خواهید در مورد روش های دیگر تبدیل افکت هاور بیشتر بدانید، می توانید از این مطلب دیدن کنید با ما.
همچنین کشف کنید: همه انتخابگرهای ویجت Elementor در مقاله زیر
اکنون Elementor Pro را دریافت کنید!!!
نتیجه
این مقاله به شما نشان می‌دهد که چقدر آسان است که با استفاده از CSS سفارشی، یک افکت شناور به عناصر پست جداگانه در ویجت پست‌های Elementor اضافه کنید.
تکنیکی که ما برای این افکت استفاده کردیم (بزرگنمایی) است که شامل دو بعدی و برخی عناصر شبه تبدیل شده است. سفارشی کنید و با تمام سبک های افکت هاور بازی کنید تا زمانی که بهترین افکت شناور را برای وب سایت خود پیدا کنید.
اینجاست! ما به تازگی بهترین ابزارها را به شما معرفی کرده ایم بازار یابی از طریق ایمیل برای Elementor. اگر در مورد نحوه استفاده از آنها نگرانی دارید به ما اطلاع دهید نظر.
با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
