ورود با اکانت گوگل
یا
آقای متریال

برای جستجو کلمه مورد نظر خود را وارد کنید

معرفی افزونه Floating Top Link برای وردپرس بهمراه آموزش !

emmet


اطلاعات نویسنده
emmet

emmet

  • Exclusive Author
  • Iran (Islamic Republic of)
نمونه کارها
پشتیبانی
برای دیدن اطلاعات تماس تهیه کننده این محصول باید محصول رو خریداری کرده باشید

به نام خدا افزونه Floating Top Link

افزونه Floating Top Link

افزونه متریال دیزاین بالابر برای وردپرس (Floating Top Link) بسیار ساده و کم حجم است.

قابلیت های این افزونه: افزونه Floating Top Link

  • متریال دیزاین بودن!
  • کم حجم و سبک (۷ کیلوبایت)
  • قابل شخصی سازی (تغییر رنگ و افکت دادن)
  • رابط کاربری روان و جذاب
  • سازگار با وردپرس نسخه ۴٫۶ جدید!
  • رسپانسیو (واکنش گرا بودن برای تمامی دستگاه ها)

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

  • آموزش تغییر رنگ دکمه بالابر:

۱٫رنگ پیش فرض:

وارد CSS افزونه شوید و کد زیر را در آن پیدا کنید:

  border-radius: 50px;
  background: #424242;

در بخشی که کد HEX رنگ (#۴۲۴۲۴۲) مشخص شده،کد رنگ مورد نظر خودتون رو وارد کنید.

اگر می خواهید از رنگ متریال دیزاین استفاده کنید از «پالت رنگ آقای متریال» استفاده کنید.

بااینکار شما رنگ دکمه رو عوض کردید.

 

۲٫رنگ هنگام آمدن موس رو دکمه:

در همان فایل  CSS در پایین فایل (خط  ۲۳) کد (مثل زیر) کد HEX رنگ سیاه کمرنگ (#۶۱۶۱۶۱) وجود دارد.

  color: #fff;
  background: #616161;

هنگامی که شما کد این رنگ رو عوض کنید،وقتی با موس روی دکمه می روید،رنگ دکمه به رنگ مورد نظر شما در می آید.

 

  • آموزش دادن ریپل افکت دکمه بالابر:

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

وارد فایل PHP افزونه بشید و کد زیر رو در اون پیدا کنید.

<a href="#page">

و کد زیر رو به قبلش اضافه کنید تا نهایت مثل کد دوم بشه.

class="waves-effect waves-light"

کد نهایی:

<a class="waves-effect waves-light" href="#page">

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

آموزش ریپل افکت برای وب

اگر همه این آموزش ها را دقیق انجام داده باشید،باید دکمه شما مثل دکمه زیر بشود:(روی لینک برای تست کلیک کنید.)

البته در تست و دمو علامت روی دکمه عوض شده است اما در وردپرس این چنین نیست.

مشاهده نتیجه

 

 

 

شما هم دیدگاهی برای این مطلب ارسال کنید

مطالب مرتبط

مطالب تصادفی

لوگوی دوستان

هایپر تمپ | HyperTemp