قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / مقالات / css/html / دکمه ی بازگشت به بالای صفحه در رنگ های مختلف

دکمه ی بازگشت به بالای صفحه در رنگ های مختلف

دکمه ی بازگشت به بالای صفحه در رنگ های مختلفReviewed by سالار on Apr 23Rating: 5.0

سلام به همه ی همراهان

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

دکمه ی بازگشت به بالا چیست ؟

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

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

 

شروع کار

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

*کل کد در یک خظ نوشته شده است روی کد رفته وبا اسکرولی که در پایین کد می اید کد را چپ و راست کنید یا روی کد کلیک کرده و کل کد را کپی کنید . 

کد قرمز رنگ 

کد ابی رنگ 
کد رنگ بنفش 
کد رنگ سرمه ای
کد رنگ نارنجی 
کد رنگ سبز 
کد رنگ زرد
 

مطلب پیشنهادی

طراحی Loading بدون استفاده از تصویر

طراحی Loading بدون استفاده از تصویرReviewed by سالار on Aug 9Rating: 5.0سلام به همه ی …

پاسخ دهید

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

 
در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید