جدول محتوایی
آیا می خواهید یک بکگراند متحرک برای وب سایت وردپرس خود داشته باشید؟
بکگراند متحرک می تواند جذابیت بصری را به وب سایت شما اضافه کند. این نوع طراحی سایت شما را جذاب‌تر و خاطره‌انگیزتر می‌کند و تأثیر ماندگاری بر بازدیدکنندگان شما می‌گذارد.
در این آموزش، ما به شما نشان خواهیم داد که چگونه با استفاده از particle.js، یک کتابخانه انیمیشن جاوا اسکریپت، این کار را انجام دهید.
چرا باید یک بکگراند متحرک در وردپرس اضافه کنیم؟
شخصی سازی پس زمینه وب سایت شما ممکن است بی اهمیت به نظر برسد. گفته می شود، در واقع می تواند اولین برداشت بازدیدکنندگان از برند شما را شکل دهد و بر تجربه آنها در سایت شما تأثیر بگذارد.
یک پس‌زمینه متحرک می‌تواند جذابیت بصری وب‌سایت شما را افزایش دهد و آن را برای بازدیدکنندگان تعاملی‌تر و چشم‌نوازتر کند. این تصور را ایجاد می کند که سایت وردپرس شما از طراحی با کیفیت و خلاقانه استفاده می کند.
بسیاری از وب سایت ها نیز زمانی که می خواهند یک مناسبت خاص را جشن بگیرند از جلوه های متحرک استفاده می کنند.
به عنوان مثال، ممکن است فروشگاه‌های تجارت الکترونیک را ببینید که دانه‌های برف متحرک یا درختان کریسمس در حال سقوط را در صفحات وب خود اضافه می‌کنند تا فضایی جشن برای فصل تعطیلات ایجاد کنند.
برخی از وب سایت ها نیز از یک انیمیشن پس زمینه پیش بارگذاری کننده در وب سایت خود استفاده می کنند.
با این کار، بازدیدکنندگان می توانند این حس را داشته باشند که سایت در حال بارگذاری است و این باعث می شود که آنها با صبر و حوصله منتظر ظاهر شدن عناصر صفحه وب باشند. در این مقاله آموزشی، نحوه اضافه کردن پس‌زمینه متحرک با استفاده از particle.js را به شما نشان خواهیم داد. اگر می خواهید بدانید که چیست، کافیست در ادامه با ما همراه باشید.
particle.js چیست؟
particle.js یک کتابخانه جاوا اسکریپت است که به شما امکان می دهد جلوه های بصری خیره کننده ای را با المان هایی ایجاد کنید، که عناصر کوچک، گرافیکی و متحرک هستند.
این المان ها را می توان بر اساس اندازه، رنگ، شکل و حرکت سفارشی کرد. آنها همچنین به تعاملات کاربر، مانند حرکات ماوس یا کلیک ها، پاسخ می دهند تا لایه ای از تعامل را به وب سایت شما اضافه کنند.
اکنون که می دانید particle.js چیست، بیایید ببینیم چگونه می توانید از آن برای اضافه کردن بکگراند در وردپرس استفاده کنید.
استفاده از افزونه Particle Background WP
ابتدا لازم است افزونه Particle Background WP را نصب و فعال نمایید. پس از فعال شدن افزونه، از داشبورد وردپرس به قسمت Particle Background بروید. در اینجا چندین بخش را مشاهده خواهید کرد.
یکی از بخش ها Deploy است. اگر می‌خواهید بعداً آن را به صفحات یا پست‌های خود اضافه کنید، شامل یک کد کوتاه برای بکگراند متحرک است.
همچنین میتوانید کادرهای «Add to front page» و یا «Add to blog page» را علامت بزنید تا پس‌زمینه به‌طور خودکار در آن صفحه اصلی و بلاگ اعمال شود.
با اسکرول کردن به پایین، بخش Content را مشاهده خواهید کرد که کمی شبیه به ویرایشگر کلاسیک است. اینجاست که میتوانید متنی را در بالای پس‌زمینه خود اضافه کنید.
اگر HTML بلد هستید، می توانید مقداری کد HTML برای سفارشی کردن متن اضافه کنید. همچنین، میتوانید روی ‘Add Media’ کلیک کنید تا تصاویر یا فایل‌هایی را از کتابخانه رسانه وردپرس وارد کنید.
در زیر تنظیمات انیمیشن پس‌زمینه وردپرس آمده است. میتوانید تراکم المان ها را تنظیم کنید، که میزان نزدیک و دور بودن ذرات، رنگ نقطه ذره و رنگ پس‌زمینه را کنترل می‌کند. همچنین می توان پس زمینه را شفاف کرد.
یکی از نکات منفی این افزونه وردپرس این است که شما نمی توانید شکل ذرات را به همان روشی که با افزونه SeedProd انجام می دهید، تنظیم کنید. بنابراین، اگر به دنبال استفاده از این افزونه هستید، باید ای نکته را در نظر بگیرید.
مراحل به پایان رسید میتوانید تصویر زیر را بعنوان یک نمونه بکگراند متحرک ببینید.
آیا بکگراند های متحرک سرعت سایت را کاهش می‌دهد؟
اگر به درستی انجام نشود، پس زمینه های متحرک می توانند سرعت وب سایت شما را کاهش دهند. اما راه هایی برای جلوگیری از این امر وجود دارد.
برای پس‌زمینه، تعداد ذرات و سرعت حرکت آنها می‌تواند بر سرعت بارگیری صفحه شما تأثیر بگذارد. ذرات بیشتر و حرکت سریعتر به قدرت پردازش بیشتری نیاز دارند که می تواند سرعت را کاهش دهد.
برای رفع این مشکل، میتوانید تنظیمات مختلفی را برای تراکم ذرات و سرعت امتحان کنید تا بهترین عملکرد را برای وب‌سایت خود پیدا کنید. در طی این فرآیند، می توانید تست های سرعت وردپرس را اجرا کنید تا اثرات آن را ببینید.
همچنین ایده خوبی است که از پس‌زمینه‌های متحرک فقط در صفحاتی استفاده کنید که بیشترین اهمیت را دارند. شما در همه جا به آنها نیاز ندارید، یا ممکن است خسته کننده شوند.
امیدوارم این آموزش به شما در افزودن بکگراند متحرک در وردپرس کمک کرده باشد.