المنتور به شما کمک می‌کند صفحه‌های وردپرسی را با چیدمان دیداری بسازید، اما نتیجه خوب فقط با کشیدن چند ابزارک روی بوم به دست نمی‌آید. باید ابتدا هدف صفحه، ترتیب محتوا و رفتار آن در موبایل را مشخص کنید. در این آموزش المنتور، یک صفحه معرفی ساده برای یک خدمت فرضی می‌سازیم و با کانتینر و ویجت‌ها یاد می‌گیریم چطور چیدمان را قابل‌فهم و قابل‌ویرایش نگه داریم.
این راهنما برای شروع کار با المنتور است. اگر هنوز وردپرس را نصب نکرده‌اید یا فرق نقش قالب و افزونه برایتان روشن نیست، ابتدا آموزش ساخت سایت با وردپرس از نصب تا انتشار را بخوانید. هدف این مقاله ساخت فروشگاه، پنل کاربری یا افکت‌های پیشرفته نیست؛ آن‌ها به تصمیم‌های جداگانه و آزمون بیشتر نیاز دارند.
قبل از باز کردن ویرایشگر، در یک جمله بنویسید بازدیدکننده پس از دیدن صفحه چه چیزی را بفهمد یا چه کاری را انجام دهد. برای مثال، صفحه فرضی ما برای یک کارگاه تعمیر دوچرخه است و باید سه چیز را روشن کند: چه خدماتی ارائه می‌شود، چرا مراجعه‌کننده می‌تواند اعتماد کند و از چه راهی تماس بگیرد.
برای این صفحه فقط این مواد را آماده کنید: یک عنوان روشن، یک تصویر با حق استفاده مشخص، توضیح کوتاه خدمات، سه مزیت واقعی و یک راه تماس که پیش از انتشار آزموده‌اید. چنین فهرستی از پرشدن صفحه با متن و تصویر بی‌هدف جلوگیری می‌کند. اگر صفحه بخشی از پروژه مشتری است، موارد بریف و معیار پذیرش را پیش از آغاز اجرا مکتوب کنید.
کانتینر جعبه‌ای برای نگه‌داشتن ویجت‌ها و در صورت نیاز کانتینرهای دیگر است. با آن می‌توانید ساختار صفحه را به بخش‌های مشخص تقسیم کنید: یک بخش آغازین، یک بخش خدمات، یک بخش مزیت‌ها و یک بخش تماس. در اسناد Elementor، کانتینر بر پایه Flexbox معرفی می‌شود و می‌تواند فرزندان خود را در جهت افقی یا عمودی بچیند.
در عمل، کانتینر والد مانند یک قفسه است و ویجت‌ها یا کانتینرهای فرزند، آیتم‌های آن هستند. اول ساختار را با کانتینر بسازید و بعد متن، تصویر و دکمه را داخل آن قرار دهید. این ترتیب باعث می‌شود بعداً تغییر فاصله، پس‌زمینه یا آرایش موبایل یک بخش، عناصر نامرتبط را جابه‌جا نکند.
برای هر بخش از صفحه، یک مسئولیت مشخص در نظر بگیرید. کانتینر آغازین قرار نیست هم‌زمان معرفی، نمونه‌کار، پرسش‌های متداول و فرم تماس را نگه دارد. تعداد کانتینرها را تا حدی نگه دارید که ساختار صفحه را واضح کند؛ لایه‌های تو در توی بی‌دلیل، ویرایش و عیب‌یابی را سخت می‌کند.
ویجت‌ها اجزای محتوایی صفحه‌اند. Heading برای عنوان، Text Editor برای توضیح، Image برای تصویر و Button برای فراخوان عمل، چهار ویجتی هستند که برای صفحه نمونه کافی‌اند. پس از قرار دادن هر ویجت، معمولاً تب‌های Content، Style و Advanced را می‌بینید. متن و پیوند را در Content وارد کنید، ظاهر را در Style تنظیم کنید و فاصله و رفتارهای عمومی را در Advanced با احتیاط تغییر دهید.
از ویجت فقط به دلیل جذابیت ظاهری استفاده نکنید. هر دکمه باید مقصد مشخص داشته باشد و هر تصویر باید متن جایگزین مفیدی داشته باشد. برای نمونه، alt مناسب برای تصویر تعمیرکار در کارگاه می‌تواند «تعمیرکار در حال تنظیم چرخ دوچرخه» باشد، نه «تصویر ۱» و نه تکرار فشرده چند کلمه کلیدی.
در پیشخوان وردپرس یک برگه تازه بسازید، نامی آزمایشی مانند «تعمیر دوچرخه در محل» بگذارید و آن را با Elementor باز کنید. تا زمانی که محتوا و فرم را بررسی نکرده‌اید، برگه را منتشر نکنید. مراحل زیر، یک ساختار کوچک اما واقعی می‌سازند.
یک کانتینر والد اضافه کنید و جهت آن را در دسکتاپ Row بگذارید. سپس دو کانتینر فرزند داخلش قرار دهید: یکی برای متن و دیگری برای تصویر. در کانتینر متن، یک Heading، یک Text Editor و یک Button بگذارید. عنوان می‌تواند «تعمیر دوچرخه در محل، با زمان‌بندی هماهنگ» باشد. متن باید به پرسش اولیه کاربر پاسخ دهد، نه اینکه چند بار نام خدمت را تکرار کند.
دکمه را به بخش تماس همین برگه یا یک راه ارتباط واقعی متصل کنید. اگر هنوز مقصد دکمه آماده نیست، متن آن را موقتاً «درخواست زمان‌بندی» بگذارید و پیش از انتشار پیوند را کامل کنید. در کانتینر تصویر، یک تصویر سبک با alt توصیفی قرار دهید؛ عکس را طوری برش دهید که موضوع اصلی در نمایش موبایل هم قابل تشخیص بماند.
زیر بخش آغازین، یک کانتینر عمودی برای عنوان بخش بسازید. سپس درون آن یک کانتینر ردیفی قرار دهید و سه کانتینر فرزند برای کارت‌ها اضافه کنید. در هر کارت، یک Heading کوتاه و یک Text Editor کافی است: «تنظیم ترمز»، «تعویض زنجیر» و «بازبینی ایمنی». اگر در موبایل کارت‌ها فشرده می‌شوند، در نمای واکنش‌گرا جهت کانتینر ردیفی را Column کنید یا اجازه Wrap بدهید.
کارت‌ها جای کپی‌کردن پاراگراف‌های بلند نیستند. هر کارت باید به یک نیاز مشخص پاسخ دهد و در صورت نیاز به توضیح بیشتر، به صفحه یا بخش مرتبط لینک دهد. در پروژه‌های تجاری، ساختار محتوا و تجربه کاربر باید با نوع خدمت هماهنگ باشد؛ برای دیدن نمونه‌ای از محدوده خدمات، صفحه خدمات طراحی سایت را بررسی کنید.
یک بخش کوتاه با سه مورد قابل اثبات اضافه کنید؛ برای مثال «اعلام بازه زمانی پیش از مراجعه»، «تأیید هزینه پیش از شروع کار» و «ثبت راه تماس». از نوشتن ادعاهایی مانند «بهترین»، «سریع‌ترین» یا «تضمینی» بدون مدرک پرهیز کنید. در پایان، یک کانتینر تماس با عنوان روشن و دکمه یا فرم آزمایش‌شده بسازید.
در Elementor حالت واکنش‌گرا را باز کنید و هر بخش را جداگانه ببینید. در صفحه نمونه، کانتینر آغازین باید از Row به Column تبدیل شود تا متن و تصویر روی هم قرار بگیرند. سپس ترتیب عناصر را بررسی کنید: معمولاً عنوان، توضیح، دکمه و بعد تصویر ترتیب خواناتری دارد. متن دکمه نباید از کادر بیرون بزند و فاصله‌ها هم نباید آن‌قدر کم شوند که اجزا به هم بچسبند.
صرف کوچک کردن فونت، مشکل موبایل را حل نمی‌کند. اول عرض، جهت، فاصله و ترتیب را بررسی کنید. اگر برای هر دستگاه عناصر تکراری و مخفی می‌سازید، نگهداری صفحه دشوار می‌شود. تنظیم ترتیب و اندازه کانتینرها در هر breakpoint معمولاً راه تمیزتری برای حفظ یک ساختار واحد است.
پس از ساخت یک صفحه کوچک، همان پروژه را با متن و تصویر متفاوت تکرار کنید تا تنظیم‌های کانتینر برایتان قابل پیش‌بینی شود. سپس سراغ فرم، قالب‌های بخش‌ها و بهینه‌سازی تصویر بروید. اگر هدف شما پیاده‌سازی یک سایت واقعی وردپرسی است، در صفحه طراحی سایت با وردپرس درباره مسیر اجرای پروژه و انتخاب راهکار مناسب اطلاعات بیشتری می‌خوانید.
برای تمرین تخصصی‌ترِ افکت‌ها، آموزش افکت هاور فلکس‌باکس در کانتینر المنتور مکمل خوبی است. آن مطلب را به‌عنوان تمرین بعدی ببینید، نه جایگزین ساختار پایه‌ای که در این صفحه یاد گرفتید.
