اگه دنبال یه لندینگ‌ پیج (صفحه فرود) معمولی هستی، این مقاله به کارت نمیاد…
ولی اگه می‌خوای یه صفحه‌ بسازی که کاربر با اسکرول اول عاشقش بشه، پس خوش اومدی! 😎🔥

وقتشه با لندینگ‌پیج‌های قدیمی و اسکرول‌های ساده خداحافظی کنیم! ترند جدید دنیای وب، استفاده از اسکرول تمام‌صفحه‌ست — تکنیکی مثل FullPage.js یا Scroll Snap که تجربه‌ی کاربری رو کامل دگرگون می‌کنه.
داستانش هم خیلی ساده‌ست: با هر اسکرول، صفحه دقیقاً روی یک سکشن کامل قفل میشه و محتوا مثل ورق‌زدن یک مجله یا اسلاید، تمیز و چشم‌نواز نمایش داده میشه. همین حرکت منظم باعث میشه کاربر تمام تمرکزش رو روی همون بخش بذاره و سایتت حس حرفه‌ای‌تری پیدا کنه.

پس اگه آماده‌ای این تکنیک خفن و روش ساخت یه لندینگ‌ پیج جذاب رو یاد بگیری، تا آخر این آموزش با من در سایت رایا وردپرس همراه باش و چشم از صفحه برندار! 😎

تو این آموزش از دو تا کتابخانه معروف و کاربردی، یعنی FullPage.js و GSAP استفاده کردیم. هر کدومو به صورت کوتاه و جمع و جور بهت معرفی می‌کنم تا بدونی کارشون چیه، ولی زیاد وارد جزئیاتشون نمی‌شیم، چون هدف اصلی آموزش ساخت لندینگ‌پیجه، نه بررسی کامل این کتابخونه‌هااااااا 😁

این دو کتابخانه، ستون فقرات لندینگ‌ پیج خفن ما هستن! هر کدوم به طور خلاصه این کارا رو انجام میدن:

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

۱. FullPage.js (کتابخانه اسکرول)

• کار اصلی: کنترل کامل اسکرول صفحه و قفل کردن صفحه روی هر بخش.
• توی پروژه ما: باعث میشه لندینگ‌ پیج مثل ورق زدن یه اسلایدشو رفتار کنه و تجربه Scroll Snap واقعی ایجاد بشه. کاربر بین بخش‌ها گیر نمی‌کنه و تمرکزش کامل روی محتوا میمونه. 🖼️

۲. GSAP (GreenSock Animation Platform)

• کار اصلی: ساخت انیمیشن‌های حرفه‌ای، نرم و روان با عملکرد بالا.
• توی پروژه ما: مسئول انیمیشن متن‌، تغییر نرم رنگ پس‌زمینه و هماهنگ کردن ورود و خروج عناصر در اسکروله. این یعنی انیمیشن‌ها سینمایی و بدون لگ نمایش داده میشن. ✨

دیگه توضیحات کافیه! می‌دونم بیشتر از هرچیزی منتظر انجام پروژه و پیاده سازی اون روی سایتت هستی، پس بزن بریم سراغ ساخت این لندینگ‌ پیج جذاب و ببینیم چطور باید این افکت‌ها رو پیاده کنیم.

🌟 نحوه ساخت لندینگ پیج حرفه ای در المنتور

ولین قدم برای ساختن این لندینگ‌پیج خفن اینه که محیط کارمون رو آماده کنیم.

• همون‌طور که می‌دونی، برای کار با صفحه‌سازها و استفاده از کدهای سفارشی، المنتور بهترین گزینه است.
• توصیه ما اینه که حتماً نسخه پرو (Pro) المنتور رو روی سایتت نصب کنی. اینجوری هیچ محدودیتی برای استفاده از تمام امکانات المنتور و وارد کردن کدهای سفارشی CSS و JS نخواهی داشت.

پس، لطفاً آخرین نسخه المنتور پرو رو از لینک زیر دانلود و روی سایتت نصب کن تا بریم سراغ ادامه کار!

1- گام اول: افزودن کانتینر اصلی به صفحه

یک برگه جدید ایجاد کن و روی دکمه “ویرایش با المنتور” کلیک کن.

حالا در وسط صفحه روی نماد + بزن و یک کانتینر (Container) به صورت فلکس باکس و با چیدمان (طبق تصویر) به صفحه ات اضافه کن.

نکـتـــــه

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

• این کار رو از طریق پنل “ساختار” (Navigator) که در نوار ابزار بالای المنتور قرار داره، انجام بده.
• کافیه دو بار روی نام کانتینر کلیک کنی تا بتونی اسم جدید رو جایگزین کنی.

ما نام کانتینر اصلی که الان ساختیم رو به Main container تغییر میدیم.

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

2- گام دوم: ایجاد ساختار سکشن اول (Hero)

حالا وقتشه اولین سکشن (اسلاید) تمام‌صفحه رو بسازیم که قراره به نوعی اسلاید اول لندینگ ما باشه:

• داخل Main container که در گام قبل ساختیم، یک کانتینر فلکس‌باکس جدید اضافه کن.
• اسم این کانتینر رو در پنل “ساختار” (Navigator) به Hero 1 تغییر بده. (چون این سکشن اصلی ماست)

تنظیمات کانتینر Hero رو به صورت زیر انجام بده:

این تنظیمات برای درست کار کردن افکت Full-Page Scroll ضروری هستن:

• عرض (Width): روی 100% تنظیمش کن تا تمام عرض صفحه رو بگیره.
• ارتفاع (Height): روی 100vh تنظیمش کن. بسیار مهم: این کار باعث میشه کانتینر دقیقاً به‌اندازه ارتفاع مرورگر کاربر باشه (تمام‌صفحه).
• تراز محتوا (Justify Content): روی وسط (Center) تنظیمش کن تا محتویات داخلش (مثل متن) دقیقاً در وسط صفحه قرار بگیرن.

نکته: با تنظیم ارتفاع روی 100vh، مطمئن میشیم که این بخش با هر اسکرول، به‌صورت کامل در دید کاربر قفل میشه و آماده‌ی اجرای افکت Scroll Snap هست.

3- گام سوم: استایل‌دهی به سکشن (Hero)

حالا که ساختار رو چیدیم، وقتشه بریم سراغ بخش جذاب استایل‌دهی تا بیس کارمون رو برای ورود انیمیشن‌ها آماده کنیم:

• به تب “استایل” (Style) کانتینر Hero 1 برو.
• در قسمت پس‌زمینه (Background)، نوع پس‌زمینه رو روی گزینه گرادینت (Gradient) قرار بده.
• یه ترکیب رنگی جذاب و ترجیحا تیره ( چون جذاب تره) برای پس‌زمینه انتخاب کن. مثلاً:
  • رنگ اول: #691A1A (یک قرمز تیره و خاص)
  • موقعیت رنگ اول: 0%
  • رنگ دوم: #0E0C0C (مشکی عمیق)
  • موقعیت رنگ دوم: 100%

عالیه! حالا که رنگ‌ها رو انتخاب کردیم، برای جذاب‌تر شدن این بک‌گراند، باید نوع و جهت گرادینت رو هم مشخص کنیم:

• نوع (Type) گرادینت رو روی دایره‌ای (Radial) قرار بده.
• موقعیت (Position) گرادینت رو هم روی پایین چپ (Bottom Left) تنظیم کن.

💡 پیشنهاد: من این تنظیمات رو پیشنهاد دادم تا خروجی نهایی آموزش ما یکسان و شبیه به افکتی باشه که قراره بسازیم. البته بعداً می‌تونی طبق سلیقه خودت نوع گرادینت (خطی/دایره‌ای) و موقعیتش رو تغییر بدی و خلاقیت به خرج بدی!

نکته: این گرادینت تیره، پس‌زمینه مناسبی برای نمایش انیمیشن‌های روشن و جذاب متن GSAP در ادامه خواهد بود. این استایل بیس اولیه سکشن اول ماست!

برای جذابیت بیشتر، در تب “استایل” کانتینر Hero یک روکش پس‌زمینه (Background Overlay) اضافه کن و می‌تونی از پترن زیر استفاده کنی.

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗   ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║   ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

4- گام چهارم: افزودن کانتینر Slide (داخل کانتینر Hero 1)

حالا وقتشه بستر اصلی برای قرار دادن متن‌ها و المان‌هایی که قراره انیمیت بشن رو فراهم کنیم:

• داخل کانتینر Hero 1 که در مراحل قبل ساختیم، یک کانتینر فلکس‌باکس جدید اضافه کن.
• این کانتینر قراره محتوای اسلاید ما رو نگهداری کنه.
• نام این کانتینر جدید رو در پنل “ساختار” (Navigator) به Slide تغییر بده.

چرا این کار رو می‌کنیم؟

• ما نمی‌خوایم المان‌های متنی و انیمیشنی مستقیماً داخل کانتینر Hero باشن.
• این کانتینر Slide یک لایه اضافی ایجاد می‌کنه که کنترل دقیق‌تری روی چیدمان و انیمیشن المان‌های داخلی (متن، خط جداکننده و…) بهمون میده و کار رو در GSAP تمیزتر می‌کنه.

نکته! محتوای کانتینر Slide رو از قسمت تنظیماتش به صورت مرکز وسط چین کن.

5- گام پنجم: افزودن المان‌های محتوایی به کانتینر Slide

حالا که بستر اصلی (Hero) و نگهدارنده محتوا (Slide) آماده‌ است، وقتشه المان‌های اصلی رو به کانتینر Slide اضافه کنیم:

• به ترتیب، این سه المان رو به کانتینر Slide اضافه کن:
  1. تیتر (Heading): برای متن اصلی و بزرگ که قراره انیمیشن کاراکتر به کاراکتر GSAP روش اعمال بشه.
  2. ویرایشگر متن (Text Editor): برای متن توضیحات و زیرعنوان.
  3. دکمه (Button): برای فراخوانی کاربر به اقدام (CTA).

تغییر متن‌ها، انتخاب فونت، سایز و استایل کلی این المان‌ها (تیتر، متن و دکمه) رو کاملاً به سلیقه حرفه‌ای خودت می‌سپارم. چون کار ساده ای هست و سخت نیست از طریق تب استایل هر ویجت میتونی تغییرات دلخواهت رو اعمال کنی

فقط یادت باشه، برای اینکه متن ها به خوبی دیده بشن، بهتره رنگ متن‌ها رو با رنگ پس‌زمینه تیره کانتینر Hero تضاد داشته باشه (مثلاً رنگ سفید یا روشن انتخاب کنی).

در گام بعدی میریم سراغ مهم‌ترین مرحله: تنظیم کلاس‌های CSS برای آماده‌سازی انیمیشن!

🎨 نکته : دو رنگ کردن تیتر (با تگ <span>)

توجه کن! برای اینکه تیتر اصلی شما دو رنگ باشه و جذابیت بصری بیشتری پیدا کنه، کافیه بخشی از متن رو داخل یک تگ <span> قرار بدی و از استایل اینلاین (Inline Style) برای تغییر رنگ استفاده کنی. به فیلد محتوای ویجت تیترت برو و متن رو دقیقاً شبیه کد زیر بنویس:

ما از <span style="color:red;">آینده</span> می آییم!

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

توضیح کد بالا: با اضافه کردن style="color: red;" داخل تگ <span>، ما به مرورگر می‌گیم که فقط اون قسمت از متن (بین تگ‌های <span>) باید با رنگ جدید نمایش داده بشه. یادت باشه رنگ رو متناسب با پس‌زمینه سایتت انتخاب کنی!

برای اینکه دکمه ها هم استایل جذاب تری داشته باشن میتونی کد CSS زیرو اضافه کنی

🔒

محتوای ویــــژه

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

عضو ویژه شوید 🙂

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗   ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║   ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

برای ساخت سایر اسلایدها، کافیه در پنل “ساختار” (Navigator)، روی کانتینر Hero1 (اسلاید اول) کلیک راست کنی و هر چند بار که نیاز داری اونو تکثیر کنی تا دیگر نیازی به طراحی مجدد از پایه نباشه. من برای این آموزش، دو کپی دیگه از کانتینر Hero 1 می‌گیرم.

تنها کاری که باید بکنی این است که متن‌های هر اسلاید را تغییر بدی و استایل‌های اونا (رنگ متن) را سفارشی‌سازی کنی و حتماً رنگ پس‌زمینه گرادینتی هر سکشن Hero را نیز متفاوت قرار بده تا خوشگل تر و جذاب تر بشه اسلایدهات.

💙 برای اسلاید دوم (دومین کانتینر Hero که تکثیر کردیم)، من برای پس‌زمینه گرادینتی از یک ترکیب رنگی با پایه رنگ آبی تیره (مثلاً کد #191355) استفاده کردم.

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

6- گام ششم: اختصاص کلاس‌ها و شناسه‌های CSS

حالا می‌رسیم به مهم‌ترین بخش برای فعال‌سازی FullPage.js! باید به کانتینرهای اصلی، کلاس‌ها و شناسه‌های (ID) مخصوصی بدیم تا اسکریپت بتونه ساختار صفحه رو بشناسه و اسکرول تمام‌صفحه رو اعمال کنه.

این کلاس‌ها و شناسه‌ها رو باید از قسمت “پیشرفته” (Advanced) هر کانتینر وارد کنی:

• کانتینر Main container:
  • کلاس CSS؛ fullpage

• اولین اسلاید (کانتینر Hero):
  • کلاس CSS؛ section
  • شناسه CSS (CSS ID)؛ section1

• دومین اسلاید (Hero کپی شده):
  • کلاس CSS؛ section
  • شناسه CSS (CSS ID)؛ section2

• سومین اسلاید (Hero کپی شده):
  • کلاس CSS؛ section
  • شناسه CSS (CSS ID)؛ section3

7- گام هفتم: افزودن اسکریپت‌های لازم برای کنترل و انیمیشن Scroll Snap

زیر کانتینر Hero 3 (یا آخرین اسلاید)، یک کانتینر جدید اضافه کن و دو ویجت HTML رو داخلش قرار بده. بعد کدهای مشخص زیر رو داخل ویجت ها قرار بده .

ویجت اول:

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗   ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║   ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

ویجت دوم:

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗   ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║   ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

🥳 کارمون تموم شد!

خب، دیگه کارمون تمومه! ببینید چه لندینگ پیج حرفه‌ای و خفنی ساختیم. واقعاً عالی شده!

من فایل (درون‌ ریز المنتوری اش) نهایی پروژه رو همین پایین برات گذاشتم که اگه خواستی راحت استفاده کنی.

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

صفحه تشکر از خرید ووکامرس را بدون افزونه‌ سفارشی کنید

مطالعه

انیمیشن هایلایت متن هنگام اسکرول با المنتور

مطالعه

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

مطالعه