صفحه اصلی یک سایت چندصفحه‌ای باید در همان نگاه اول بگوید کسب‌وکار چه کاری انجام می‌دهد و برای هر نیاز، راه بعدی را نشان بدهد. کسی که دنبال دیدن کارهای قبلی است باید مستقیم به نمونه‌کار برسد. کسی که آماده گفت‌وگوست باید بدون گشتن در منو راه تماس را پیدا کند. در این راهنما، ساخت صفحه اصلی سایت با المنتور را برای یک استودیوی فرضی بازسازی آپارتمان، از طرح اولیه تا تنظیم برگه خانه در وردپرس، دنبال می‌کنیم.
برای استودیوی نمونه، هدف اصلی گرفتن درخواست بازدید است. دو مسیر دیگر هم لازم داریم: دیدن پروژه‌ها و بررسی خدمات. ابتدا مقصد هر دکمه را مشخص کنید. «درخواست بازدید» به فرم تماس می‌رود، «مشاهده پروژه‌ها» به فهرست پروژه‌ها و کارت هر خدمت به برگه همان خدمت. اگر فرم یا برگه‌ای هنوز آماده نیست، پیش از انتشار آن مسیر را کامل کنید. الگوی بریف طراحی سایت برای ثبت مخاطب، محتوای لازم و مقصد دکمه‌ها به کار می‌آید.
برای سایت نمونه، ترتیب زیر را روی کاغذ بکشید:
این ساختار برای سایتی است که هر خدمت و پروژه برگه خودش را دارد. اگر همه اطلاعات کسب‌وکار در یک نشانی ارائه می‌شود، ساختار و ناوبری آن را با راهنمای طراحی سایت تک‌صفحه‌ای بررسی کنید.
در وردپرس یک برگه «خانه» به‌صورت پیش‌نویس بسازید و آن را با المنتور باز کنید. در سایتی که از قبل صفحه اصلی دارد، برگه تازه را تا پایان آزمون جایگزین صفحه فعال نکنید. برای شروع کار با ابزارک عنوان، تصویر و دکمه، به آموزش المنتور و کار با کانتینرها و ویجت‌ها مراجعه کنید.
اگر قالب فعلی چیدمان مناسبی برای بدنه دارد، گزینه پیش‌فرض برگه را نگه دارید. برای داشتن بدنه تمام‌عرض در کنار سربرگ و پابرگ، گزینه Elementor Full Width را امتحان کنید. Elementor Canvas سربرگ و پابرگ را حذف می‌کند. در صفحه اصلی یک سایت چندصفحه‌ای، بعد از تغییر چیدمان مطمئن شوید منو و راه تماس همچنان در دسترس‌اند. اگر عنوان «خانه» جداگانه بالای عنوان معرفی دیده می‌شود، تنظیم نمایش عنوان و خروجی H1 قالب را بررسی کنید.
یک کانتینر برای بخش آغازین و دو کانتینر فرزند برای متن و عکس بسازید. جهت کانتینر والد را در دسکتاپ روی ردیفی قرار دهید. در نمونه فارسی، عنوان، توضیح کوتاه و دکمه در سمت راست و عکس بازسازی در سمت چپ دیده می‌شوند. در ساختار صفحه، متن و اقدام اصلی را پیش از تصویر قرار دهید تا ترتیب خواندن در نمایش باریک هم طبیعی بماند. عنوان «طراحی و بازسازی آپارتمان» را با تگ H1 بگذارید و دکمه «درخواست بازدید» را به مقصد واقعی وصل کنید.
برای بخش‌هایی که رنگ پس‌زمینه تا دو طرف نمایشگر امتداد دارد، می‌توانید کانتینر بیرونی را تمام‌عرض و محتوای داخل آن را محدود کنید. عرض محتوای بخش‌ها را هماهنگ نگه دارید تا لبه عنوان‌ها، کارت‌ها و دکمه‌ها در دسکتاپ هم‌راستا باشند. فاصلهٔ بین اجزای یک کانتینر را با Gap و فاصلهٔ محتوا از لبه‌ها را با Padding تنظیم کنید.
برای هر بخش یک عنوان H2 بگذارید و سه کارت را در کانتینر جداگانه قرار دهید. «جزئیات بازسازی آشپزخانه» از «بیشتر بخوانید» روشن‌تر است. در کارت نمونه‌کار، عنوان پروژه و توضیح یک‌خطی را کنار تصویر بگذارید تا کاربر پیش از کلیک بتواند پروژه‌ها را مقایسه کند. اگر هنوز نمونه‌کار قابل انتشار ندارید، مسیر همکاری و نوع خروجی‌ای را که مشتری دریافت می‌کند توضیح بدهید.
بخش پایانی می‌تواند با این پیام تمام شود: «برای هماهنگی بازدید، نوع فضا و راه تماس را بفرستید.» دکمه پایانی و دکمه ابتدای صفحه را به یک مقصد وصل کنید. اگر فرم در همین صفحه است، مقصد دکمه را به شناسه بخش فرم تنظیم کنید و در موبایل بررسی کنید سربرگ چسبان، عنوان فرم را نپوشاند. اگر فرم در برگه تماس است، آن برگه را باز کنید و یک ارسال آزمایشی تا دریافت پیام تأیید و اعلان انجام دهید.
در نمای موبایل المنتور، جهت کانتینر بخش آغازین را ستونی کنید و ترتیب «عنوان، توضیح، دکمه، تصویر» را ببینید. اگر جابه‌جایی لازم شد، اول ساختار اصلی را بررسی کنید تا ترتیب پیمایش با صفحه‌کلید و ترتیب دیداری از هم فاصله نگیرند. در کارت‌های خدمات هم اجازه دهید متن بدون بیرون‌زدگی در عرض صفحه جا بگیرد. تبلت را جداگانه بررسی کنید، چون یک ردیف سه‌کارتی که در دسکتاپ مناسب است ممکن است در تبلت متن را بیش از حد فشرده کند.
پیش‌نمایش ویرایشگر را با آزمون روی گوشی تکمیل کنید. یک بار از منوی موبایل به خدمات بروید، یک پروژه را باز کنید و از صفحه اصلی مسیر درخواست بازدید را طی کنید. عنوان فارسی باید خوانا بماند، تصویر کشیده نشود، اسکرول افقی ایجاد نشود و دکمه‌ها با لمس راحت عمل کنند. برای آزمون دقیق‌تر از معیارهای طراحی واکنش‌گرا برای موبایل استفاده کنید.
پس از بازبینی، برگه «خانه» را منتشر کنید. در وردپرس به «تنظیمات ← خواندن» بروید، در بخش نمایش صفحه نخست «یک برگه یکتا» را انتخاب کنید و «خانه» را به‌عنوان صفحه نخست قرار دهید. اگر وبلاگ دارید، یک برگه جداگانه برای نوشته‌ها انتخاب کنید. در قالب‌های بلوکی، اگر پس از ذخیره هنوز طرح قدیمی می‌بینید، الگوی Front Page را در ویرایشگر سایت بررسی کنید. این الگو می‌تواند تعیین کند که نشانی اصلی سایت چه طرحی نشان دهد.
نشانی اصلی دامنه را در حالت خروج از حساب باز کنید. پیوند «خانه» در منو، H1، دکمه‌ها و مسیرهای خدمات و نمونه‌کارها را از همان نشانی دوباره امتحان کنید. در سایت فعال، برگه قبلی را تا پایان آزمون نگه دارید تا در صورت نیاز بتوانید انتخاب صفحه نخست را برگردانید. چک‌لیست پیش از انتشار سایت به بررسی فرم‌ها، تصاویر و دسترسی عمومی کمک می‌کند.
اگر اجرای صفحه اصلی بخشی از بازطراحی کامل است، فهرست برگه‌ها و مقصد دکمه‌ها را در شرح کار بیاورید تا بتوانید پیشنهادهای طراحی سایت با وردپرس را بر اساس خروجی مشخص مقایسه کنید.
