نحوه محو کردن تصاویر روی Mouseover در وردپرس (ساده و آسان)
انتشار: فروردین 08، 1402
بروزرسانی: 28 خرداد 1404

نحوه محو کردن تصاویر روی Mouseover در وردپرس (ساده و آسان)

پس از آن، به بخش «درج» بروید، اما این بار «کد کوتاه» را انتخاب کنید.

در ویرایشگر SeedProd، به سادگی روی محتوایی که می خواهید متحرک سازی کنید کلیک کنید و سپس برگه Advanced را در منوی سمت چپ انتخاب کنید.

افزودن انیمیشن های محو با استفاده از SeedProd

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

اگر هر یک از این اعداد را تغییر دادید، مطمئن شوید که آنها را در تمام ویژگی ها (webkit، moz، ms و o) تغییر داده اید، بنابراین افکت محو شدن در هر مرورگر یکسان به نظر می رسد.

img.wp-post-image:hover{opacity:0.6;filter:alpha(opacity=60); /* For IE8 and earlier */-webkit-transition: all 2s ease;-moz-transition: all 2s ease;-ms-transition: all 2s ease;-o-transition: all 2s ease;transition: all 2s ease;}
پس از آن، به سادگی یک انیمیشن را از منوی کشویی «انیمیشن ورودی» انتخاب کنید، که شامل طیف گسترده ای از جلوه های محو مختلف است.

افزودن انیمیشن به وردپرس با استفاده از SeedProd

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



منبع

جلوه های محو یک راه سرگرم کننده برای جذاب تر کردن تصاویر است، اما راه های زیادی برای استفاده از انیمیشن ها در وردپرس وجود دارد. به عنوان مثال، ممکن است از انیمیشن های فلیپ باکس برای نشان دادن متن هنگامی که بازدیدکننده روی یک تصویر قرار می گیرد، استفاده کنید، یا از جلوه های زوم استفاده کنید تا کاربران بتوانند عکس را با جزئیات بیشتری کاوش کنند.

اولین کاری که باید انجام دهید این است که افزونه رایگان WPCode را نصب و فعال کنید. برای جزئیات بیشتر، راهنمای گام به گام ما در مورد نحوه نصب افزونه وردپرس را ببینید.

برای اطلاعات بیشتر، لطفاً راهنمای ما در مورد نحوه ایجاد صفحه فرود با وردپرس را ببینید.

این یک کد کوتاه ایجاد می کند که می توانید آن را به هر صفحه، پست یا منطقه آماده برای ویجت اضافه کنید.

ایجاد یک کد کوتاه در WPCode

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

نحوه محو کردن تصاویر روی ماوس در وردپرس

چرا تصاویر را روی Mouseover در وردپرس محو کنید؟

برای انجام این کار، به سادگی یک قطعه کد سفارشی ایجاد کنید و کد انیمیشن محو را طبق همان فرآیندی که در بالا توضیح داده شد، اضافه کنید. سپس، روی دکمه «ذخیره قطعه» کلیک کنید.

محو کردن تصاویر روی ماوس در وردپرس با استفاده از کد سفارشی

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

افزودن Image Fade در Mouseover به تمام تصاویر وردپرس

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

در نهایت بر روی "ذخیره قطعه" کلیک کنید تا قطعه CSS زنده شود.

افزودن افکت محو شدن به تصاویر با استفاده از CSS

در ویرایشگر کد، قطعه کد زیر را اضافه کنید:

آیا می خواهید تصاویر را روی ماوس در وردپرس محو کنید؟

این قطعه کد زمانی که کاربر ماوس خود را روی آن قرار می دهد، هر تصویر را به مدت 2 ثانیه محو می کند. برای اینکه تصویر آهسته تر محو شود، کافی است «2s ease» را با عدد بالاتر جایگزین کنید. اگر می خواهید عکس را سریعتر محو کنید، از «1s ease» یا کوچکتر استفاده کنید.

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

خبر خوب این است که WPCode به شما امکان می دهد کدهای کوتاه سفارشی ایجاد کنید. شما می توانید این کد کوتاه را در هر صفحه ای قرار دهید و وردپرس فقط در آن صفحه افکت های محو را نشان می دهد.

با WPCode، حتی مبتدیان می توانند کد وب سایت خود را بدون خطر اشتباهات و اشتباهات تایپی ویرایش کنند که می تواند باعث بسیاری از خطاهای رایج وردپرس شود.

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

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

اما این بار کد زیر را به ویرایشگر اضافه کنید:

سپس می توانید ادامه دهید و برای گسترش بخش «افکت های انیمیشن» کلیک کنید.

وقتی ظاهر شد، روی "Use Snippet" کلیک کنید.

ایجاد یک قطعه CSS سفارشی در وب سایت وردپرس شما

برای افزودن یک افکت محو شدن به تمام تصاویر خود، روی «درج خودکار» کلیک کنید. سپس، منوی کشویی "Location" را باز کرده و "Site Wide Header" را انتخاب کنید.

درج CSS سفارشی در وب سایت وردپرس شما
.post img:hover{opacity:0.6;filter:alpha(opacity=60); /* For IE8 and earlier */-webkit-transition: all 2s ease;-moz-transition: all 2s ease;-ms-transition: all 2s ease;-o-transition: all 2s ease;transition: all 2s ease;}

پس از آن، ادامه دهید و قطعه را با همان فرآیندی که در بالا توضیح داده شد، زنده کنید.

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

امتیاز: متحرک کردن هر تصویر، متن، دکمه و موارد دیگر

اکنون، می توانید ماوس را روی هر تصویر مشخصی ببرید تا انیمیشن محو را در عمل ببینید.

وقتی از قطعه راضی بودید، به بخش «درج» بروید. WPCode می تواند کد شما را به مکان های مختلف اضافه کند، مانند بعد از هر پست، فقط frontend یا فقط مدیر.

ما باید CSS سفارشی را به وردپرس اضافه کنیم، بنابراین منوی کشویی "Code Type" را باز کرده و "CSS Snippet" را انتخاب کنید.

با استفاده از WPCode، یک انیمیشن محو روی ماوس را به تصاویر اضافه کنید

اکنون می توانید به هر صفحه، پست یا منطقه آماده برای ابزارک بروید و یک بلوک جدید «کد کوتاه» ایجاد کنید. سپس، به سادگی کد کوتاه WPCode را در آن بلوک قرار دهید.

نحوه ایجاد انیمیشن های محو برای تصاویر با استفاده از کد کوتاه
انیمیشن ها راه آسانی برای جذاب تر کردن وب سایت شما هستند و حتی می توانند توجه بازدیدکنندگان را به مهم ترین محتوای صفحه تان، مانند لوگوی وب سایت یا دعوت به عمل، جلب کنند.

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

در اینجا، به سادگی ماوس خود را روی «Add Your Custom Code» قرار دهید.

برای اطلاعات بیشتر در مورد نحوه قرار دادن کد کوتاه، لطفاً راهنمای ما در مورد نحوه اضافه کردن کد کوتاه در وردپرس را ببینید.

استفاده از افکت محو شدن برای هر تصویر می تواند حواس تان را پرت کند، به خصوص اگر یک وب سایت عکاسی، یک فروشگاه عکس استوک یا هر سایت دیگری که تصاویر زیادی دارد راه اندازی می کنید.

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

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

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

پس از آن، شما آماده اسکرول به بالای صفحه هستید و روی دکمه "غیر فعال" کلیک کنید، بنابراین به "فعال" تغییر می کند.

ساده ترین راه برای افزودن افکت محو شدن به تمام تصاویر خود استفاده از WPCode است. این افزونه رایگان به شما این امکان را می دهد که به راحتی کدهای سفارشی را در وردپرس بدون نیاز به ویرایش فایل های تم خود اضافه کنید.

راه های مختلفی برای استفاده از انیمیشن های CSS در وردپرس وجود دارد، اما افزودن افکت شناور به تصاویر بسیار موثر است. انیمیشن محو به این معنی است که تصاویر شما به آرامی ظاهر می شوند یا زمانی که بازدیدکنندگان روی آنها قرار می گیرند ناپدید می شوند.

اضافه کردن یک انیمیشن محو به وردپرس
پس از انجام این کار، روی دکمه "به روز رسانی" یا "انتشار" کلیک کنید تا کد کوتاه فعال شود. سپس می توانید از آن صفحه، صفحه یا منطقه آماده ابزارک دیدن کنید تا اثر محو شدن روی ماوس را ببینید.

افزودن انیمیشن محو شدن تصویر به تصاویر ویژه

پس از آن، به کادر «درج» بروید و «درج خودکار» را انتخاب کنید. سپس، منوی کشویی "Location" را باز کرده و "Site Wide Header" را انتخاب کنید.

افزودن یک انیمیشن به تصاویر روی ماوس

پس از فعال سازی، به قطعه کد » افزودن قطعه.

اضافه کردن کد سفارشی به وب سایت وردپرس خود با WPCode

برخلاف برخی انیمیشن های دیگر، تصویر محو شده روی افکت ماوس ظریف است، بنابراین تأثیر منفی بر تجربه خواندن بازدیدکننده یا هر بهینه سازی تصویری که انجام داده اید، نخواهد داشت.

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

پس از آن، می توانید ادامه دهید و با استفاده از همان فرآیندی که در بالا توضیح داده شد، قطعه کد را زنده کنید.

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

همچنین می توانید با تغییر دادن مقدار «Opacity» را بیشتر یا کمتر کنید opacity:0.6 خط

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