با توجه به اینکه از Elementor و قالب The7 استفاده می‌کنید (که قبلاً هم اشاره کرده بودید)، دقیقاً همان چیزی که می‌خواهید، یک One Page Navigation (منوی تک‌صفحه‌ای) است. در این حالت با کلیک روی هر آیتم منو، کاربر به بخش مربوطه در همان صفحه اسکرول می‌شود و صفحه جدیدی باز نمی‌شود. این قابلیت هم در Elementor و هم در قالب The7 به‌صورت کامل پشتیبانی می‌شود. (guide.the7.io)

البته من به لینک مدیریتی که فرستادید (wp-admin/post.php?...) دسترسی ندارم، چون صفحه مدیریت سایت شما نیاز به ورود دارد. اما روش ساخت دقیق آن را توضیح می‌دهم.

روش اول (بهترین روش) استفاده از CSS ID

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

• اسلایدر

• معرفی هنرستان

• اخبار

• گالری تصاویر

• افتخارات

• ارتباط با ما

مرحله اول

در Elementor صفحه را باز کنید.

روی اولین Container یا Section (مثلاً معرفی هنرستان) کلیک کنید.

سپس

Advanced
↓
CSS ID

مثلاً بنویسید

about

بخش اخبار

news

گالری

gallery

تماس با ما

contact

به همین ترتیب.

دقت کنید:

• فاصله نداشته باشد.

• فارسی ننویسید.

• ننویسید.

(Elementor)

مرحله دوم

به

نمایش
Appearance

↓

فهرست‌ها (Menus)

بروید.

به جای انتخاب “صفحه”،

روی

پیوند دلخواه
Custom Link

کلیک کنید.

مثلاً

آدرس

#about

متن

درباره ما

بعدی

#news

متن

اخبار

بعدی

#gallery

متن

گالری

بعدی

#contact

متن

ارتباط با ما

سپس منو را ذخیره کنید. (Elementor)

مرحله سوم

در Header که با Elementor ساخته‌اید، همین Menu را انتخاب کنید.

اکنون با کلیک روی

اخبار

به

#news

می‌رود.

اگر منوی کشویی دارید

مثلاً

فعالیت ها
        ↓
      نمایشگاه
      مسابقات
      جشنواره

هر کدام می‌تواند به یک Section اشاره کند.

نمایشگاه
↓

#gallery

مسابقات

↓

#competition

جشنواره

↓

#festival

کاملاً امکان‌پذیر است.

اگر Header ثابت (Sticky) باشد

گاهی وقتی روی منو کلیک می‌کنید، عنوان Section زیر Header مخفی می‌شود.

برای حل این مشکل:

در تنظیمات Section مقدار

CSS Scroll Margin Top

یا در CSS

selector{
scroll-margin-top:100px;
}

را قرار دهید.

یا اگر از Menu Anchor استفاده می‌کنید، Anchor را کمی بالاتر از عنوان قرار دهید. این روش برای هدرهای Sticky رایج است. (Elementor)

روش دوم (استفاده از Menu Anchor)

اگر Elementor Pro دارید:

از ابزار

Menu Anchor

استفاده کنید.

آن را ابتدای هر بخش قرار دهید.

مثلاً

Anchor Name

about

و در منو بنویسید

#about

اما امروزه خود Elementor توصیه می‌کند از CSS ID روی Container یا Section استفاده شود، زیرا ساده‌تر و پایدارتر است. (Elementor)

پیشنهادی برای سایت هنرستان شما

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

خانه
│
├── معرفی هنرستان
│
├── مدیریت
│
├── اخبار
│
├── افتخارات
│
├── نمایشگاه آثار هنری
│
├── هوش مصنوعی
│
├── گالری تصاویر
│
├── ثبت نام
│
└── ارتباط با ما

هر بخش فقط یک CSS ID خواهد داشت و منوی اصلی مستقیماً به همان بخش اسکرول می‌کند.

اگر بخواهید، می‌توانم دقیقاً مطابق قالب The7 + Elementor که روی سایت راه شایستگان نصب است، یک ساختار حرفه‌ای (Wireframe) برای صفحه اصلی طراحی کنم؛ شامل نام Sectionها، CSS ID هر بخش، و نحوه تنظیم منوی کشویی، به‌طوری که فقط آن را در Elementor پیاده‌سازی کنید.