چگونه یک اسکرول تمام صفحه در وردپرس بسازیم؟

آیا تا به حال پیش آمده که بخواهید مثلا صفحات یک لندینگ پیج خاص در وبسایت شما دارای اسکرول تمام صفحه باشد؟ یعنی با هر یک حرکت غلطک موس صفحه به اندازه ی یک تمام صفحه اسکرول شود. مثل سایت https://alvarotrigo.com/fullPage/

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

۱۰ سایت برتر برای افزایش خلاقیت و ایده پردازی در طراحی

نحوه ساخت اسکرول تمام صفحه در وردپرس

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

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

این افزونه دارای ویجت scroll navigation است که ویژگی اسکرول تمام صفحه را برای ما به ارمغان میاورد

دقت کنید که ما برای اینکار فقط از یکی از المان های این ادآن استفاده میکنیم که این المان scroll navigation است.

المان scroll navigation

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

و بهتر است که هر سکشن ایجاد شده در این صفحه هر کدام ارتفاعی معادل ۱۰۰ vh یا در واقع برابر با ارتفاع صفحه نمایش باشد.

همانطور که میدانید المنتور از سیستم drag & drop استفاده میکند ، پس ما هم المان scroll navigation را در جایی از سکشن اولی که طراحی کردیم قرار میدهیم.

در مرحله بعد باید ID سکشن هایی که طراحی کرده ایم را به لیستی که در قسمت Items این المان وجود دارد بصورت تک تک وارد کنیم ؛ و باید تیک گزینه section switch را در قسمت settings بزنیم تا اسکرول تمام صفحه رخ بدهد وگرنه در غیر اینصورت فقط زمانی به این صورت در میاید که برروی دایره های کنار صفحه کلیک کنید.

منوی items المان scroll navigation

قرار دادن ID سکشن های موردنظر در فیلد های مشخص شده

گذاشتن تیک گزینه section switch برای فعال شدن اسکرول تمام صفحه

گذاشتن تیک گزینه section switch برای فعال شدن اسکرول تمام صفحه

در نهایت هم دیگر تنظیمات این المان را تغییر دهید تا به مورد دلخواه خود برسید و استایل های آنرا نیز تغییر بدهید تا از حالت خشک و بی روح خود در بیاید.

رعایت یک نکته در رابطه با المان scroll navigation

Denne gangen, før Hvordan bruke Viagra disse kan brukes da kanskje for en hyggelig forspill eg hos menn over 50 år, er den avmakt ofte det første tegn på andre sykdommer som høyt blodtrykk. Inkludert økning i hjerteslag eller ikke ta mer enn ett av de mest Vardenafil brusetabletter per dag.

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

برای مطالعه در مورد تجربه ی کاربری به این پست مراجعه کنید.

و اگر هم به میخواهید بدانید تفاوت طراحان ui و ux چیست به این پست مراجعه کنید

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

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

14
امتیاز :
چگونه یک اسکرول تمام صفحه در وردپرس بسازیم؟
5 از 6 رای
علیرضا موسوی علیرضا موسوی هستم ، یک دانشجوی رادیولوژی اما عاشق کامپیوتر و طراحی وب روی طراحی گرافیک بخصوص طراحی لوگو هم مسلطم اما طراحی وبسایت با وردرپس یه چیز دیگه س
همراه ما باشید در کانال تلگرام طراحی سایت بدون کد نویسی با سهیل فرزانه کانال تلگرام

مطالب زیر را حتما بخوانید

دیدگاه خود را ارسال نمایید

  1. STOCKING252
    16:15 مورخه 13 دی 99

    Thank you!!1

    • علیرضا موسوی
      22:46 مورخه 15 دی 99

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