ورود یا ثبت‌نام
وبمستران طلایی

آموزش اضافه کردن آیکون زنده در وردپرس با Livicons

نمایش آیکون زنده در وردپرس با افزونه LivIcons Evolution

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

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

نمایش آیکون زنده در وردپرس با LivIcons

هدف اصلی این اسکریپت اینه که شخصیت و تعامل بیشتری را با سایت های مشتریان داشته باشیم و باعث شود با هم رقابت کنند و مشتریان بتوانند نظرسنجی کنند. همچنین این افزونه دارای انیمیشن دو بعدی است که یک آیکون می تواند زمانی که اولین بار ظاهر می شود “کشیده شود” و البته، انیمیشنهای خاص خودش را دارد. همچنین یک آیکون می‌تواند با استفاده از API جاوا اسکریپت حذف شود.

امکانات افزونه Livicons

  • 375 آیکون متحرک منحصر به فرد
  • شامل ابزار پیکربندی آنلاین
  • پشتیبانی از ویژوال کامپوزر
  • تنظیمات بسیار انعطاف پذیر
  • هر آیکون دارای (5) استایل طراحی است
  • رسپانسیو
  • دارای هاور
  • قابلیت autoPlay
  • API جاوا اسکریپت و HTML قدرتمند
  • بر اساس jQuery و پلتفرم انیمیشن GSAP
  • کاملا از ابتدا بازسازی شده است
  • در رنگ و اندازه های مختلف
  • متحرک و استاتیک
  • نمایش به صورت رتینا
  • تمام مرورگرهای مدرن

ظاهری متفاوت با Liv Icon

ظاهر سایت ما تاثیر زیادی بر روی نظر کاربران نسبت به سایت دارد. ظاهرسازی سایت ما باید به گونه‌‌ای باشد که کاربران ما در زمان ورود به سایت از دیدن سایت ما لذت ببرند و ترغیب به ماندن و دیدن از صفحات مختلف سایت شوند.

معمولا بسیاری از سایت‌‌ها به محتوا و دیگر مسائل توجه می‌‌کنند و از اهمیت بالای ظاهر سایت خودشون بی اطلاع هستند و به سادگی از این موضوع می‌‌گذرند. در راستای اینکه ما یک سایت زیبا رو به کاربر ارائه بدیم راهکارهای فراوانی وجود دارد که یکی از این راهکارها آیکون‌‌های متحرک و یا زنده هستند که ظاهری متفاوت به سایت ما می‌‌دهند.

داشتن آیکون‌‌های جذاب و زیبا از جمله مواردی است که می‌‌تونه در این زمینه بسیار مؤثر باشد. اینکه ما سایت خودمون رو از حالت یکنواختی خارج کنیم نه تنها دردسر زیادی ندارد بلکه باعث بیشتر شدن کاربران سایت نیز می‌‌شود. که در نتیجه این موضوع منجر به رونق سایت ما می‌‌شود.

افزونه Liv Icon یک افزونه‌‌ی حرفه‌‌ای در زمینه آیکون‌‌های زنده هست که به ما این قابلیت رو می‌‌ده که به سایت خودمون آیکون‌‌های زیبا و متحرک اضافه کنیم. کاربران پس از خرید این افزونه می‌‌تونند به دو روش در سایت خود آیکون‌‌های متجرک قرار دهند. کاربر می‌‌تونه با برنامه‌‌نویسی آیکون‌‌های دلخواه خودش رو در سایت قرار دهد و یا اینکه با استفاده از ویرایشگر وردپرس در بخش‌‌های مختلف سایت آیکون‌‌های متنوع و جذاب را قرار دهند.

آیکون‌‌های خود را سفارشی‌‌سازی کنیم

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

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

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

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

کاملا واکنش‌‌گرا و رسپانسیو

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

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

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

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

یکی دیگه از امکانات این افزونه که از نظر مدیران سایت‌‌های مختلف بسیار کاربردی است این است که ما می‌‌تونیم در این افزونه آیکون‌‌ها را به صورت آنلاین تغییر دهیم و تغییرات آن را ببینیم و پس از آن یکی از آیکون‌‌هایی که متناسب با سایت ما هست رو انتخاب کنیم. این موضوع در انتخاب سریع و تصمیم‌‌گیری بهتر ما تاثیر به سزایی دارد.

دیگر ویژگی‌‌های این افزونه

سازگاری این افزونه با یکی از قدرتمندترین‌‌های وردپرس یکی دیگه از ویژگی‌‌های افزونه Liv Icon است. این افزونه از ویژوال کامپوزر به صورت کامل پشتیبانی می‌‌کند. ویژوال کامپوزر یک افزونه حرفه‌‌ای صفحه‌‌ساز است که در ظاهر سازی سایت ما تاثیر فراوانی دارد و به ما کمک می‌‌کند که صفحات جذاب و متعددی رو برای سایت خودمون طراحی کنیم.

در واقع این افزونه ما را در هیچ‌‌ زمینه‌‌ای محدود نمی‌‌کند و در تلاش است تا ما یک سایت با ظاهر شگفت‌‌انگیز به کاربران خود ارائه دهیم و از مدیریت آن نهایت لذت رو ببریم. تنظیمات Liv Icon بسیار انعطاف‌‌پذیر است و ما به واسطه‌‌ی این انعطاف‌‌پذیری امکان هرگونه سفارشی‌‌سازی رو داریم علاوه بر این Liv Icon با تمامی مرورگرها سازگاری دارد و نیازی به نگرانی ما در این خصوص ندارد.

این افزونه دارای صدها آیکون زیبا و جذاب است که همگی آن‌‌ها به ما در داشتن یک سایت حرفه‌‌ای‌‌تر کمک بسیار زیاد می‌‌کنند. البته ویژگی‌‌های امکانات این افزونه در اینجا به پایان نمی‌‌رسد و طراحان این افزونه هر روز به‌‌دنبال به‌‌روز کردن این افزونه و افزایش آیکون‌‌ها و امکانات دیگر هستند تا نیازهای سایت ما را در این باره برطرف کنند و به ما تجربه داشتن یک سایت حرفه‌‌ای را دهند.

اضافه کردن آیکون زنده در وردپرس

اضافه کردن آیکون زنده در وردپرس : افزونه livicons یک افزونه عالی برای نمایش آیکون های وبسایت بصورت زنده می باشد.
با استفاده از این افزونه می توانید آیکون های زنده را بصورت کدنویسی یا بدون کدنویسی به سایت وردپرسی خود اضافه کنید.
در این فیلم آموزشی نحوه اضافه کردن آیکون زنده با استفاده از افزونه livicons را آموزش خواهم داد.

این افزونه را می‌توانید از سایت CodeCanyon.net بصورت مستقیم از سازنده خریداری کنید.

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

پیشنهادات آموزشی ما

همه پکیج های آموزشی
6 نظر ارسال شده. شخص بعدی شما باشید.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. sattaralmasi20 ۲۷ دی ۱۳۹۷

    با سلام و احترام
    چطوری میتونم داخل کد های قالبم در html و css ایکون هارو اضافه کنم و ازشون استفاده کنم
    منظورم بدون نصب افزونه هست چون قالبم هنوز وردپرسی نیست و میخوام از کد html ایکون ها استفاده کنم

    پاسخ دادن
    • رضا حسینی راد ۲۷ دی ۱۳۹۷

      درود برای اضافه کردن به HTML باید کدهای css و js این افزونه رو خروجی بگیرید و توی سایتتون استفاده کنید.

      پاسخ دادن
  2. shahinsafari ۱۷ فروردین ۱۳۹۷

    لطفا افزونه های که خریداری میشه را امکان دانلود بگذارید

    پاسخ دادن
    • محمد مقدم ۱۸ فروردین ۱۳۹۷

      همه ی محصولات خریداری شده امکان دانلود دارند!

      پاسخ دادن
  3. naser ۰۵ دی ۱۳۹۶

    سلام
    اگر آیکونی را در استایل قالب بخوایم قرار بدیم راه کار به چه صورت هست؟
    در استایل من اینطور تعریف شده:
    #matn-single ul li:before {
    font: normal normal normal 20px/1 FontAwesome;
    content: “\f205”;
    }
    دقیقاً متن من مثل شماست اینگونه:
    لیست امکانات قالب:
    .
    .
    .
    .
    .

    پاسخ دادن
    • محمد قاسمی ۰۵ دی ۱۳۹۶

      درود.
      خیر، اینکار با استفاده از Javascript بوده است.

      پاسخ دادن