طراحی سایت با المنتور مسیری است که بین نیاز به طراحی حرفه ای و پرهیز از درگیری با کدنویسی تعادل ایجاد می کند. با تسلط بر این ابزار، می توان ساختار صفحات، چیدمان محتوا و تجربه کاربری را در سطحی قابل قبول و حرفه ای مدیریت کرد، بدون آن که وارد جزئیات فنی کد شد.
المنتور یک صفحه ساز دیداری برای وردپرس است که بر پایه کشیدن و رها کردن المان ها عمل می کند. طراح می تواند مستقیما روی بوم صفحه کار کند، عناصر مختلف را اضافه و جابجا کند و نتیجه را همان لحظه مشاهده کند.
مزیت های اصلی این رویکرد:
کاهش وابستگی به کدنویسی برای پیاده سازی ساختار و ظاهر صفحات.
امکان طراحی از صفر و همچنین استفاده از قالب ها و بلوک های آماده.
هماهنگی با سیستم مدیریت محتوای وردپرس و بسیاری از افزونه های رایج.
وقتی امکانات نسخه حرفه ای تر یعنی افزونه المنتور پرو هم به این مجموعه افزوده می شود، کنترل طراح بر روی جزئیات قالب، فرم ها، پاپ آپ ها و صفحات فروشگاهی بسیار بیشتر خواهد شد.
(توضیح گرافیست: تصویر آموزشی با چند آیکون که نماینده تیتر، متن، تصویر و دکمه هستند این آیکون ها روی یک بوم ساده قرار گرفته اند تا مفهوم «کشیدن و رها کردن» را منتقل کنند.)
آغاز کار با المنتور نیازمند دانش برنامه نویسی نیست، اما چند آشنایی اولیه روند یادگیری را بسیار روان تر می کند:
آشنایی پایه با وردپرس: ایجاد برگه و نوشته، نصب افزونه، مدیریت منو و رسانه.
شناخت ساختار کلی وب سایت: تفاوت صفحه اصلی، صفحه فرود، وبلاگ، فروشگاه، صفحه تماس و درباره ما.
درک ساده از اصول طراحی: ترکیب رنگ ها، خوانایی متن، استفاده مناسب از فضای خالی و تعداد محدود فونت.
با داشتن این پیش زمینه، تمرکز فرد به جای درگیری با محیط، بیشتر بر روی تصمیم های طراحی و ساختار محتوا قرار می گیرد.
پس از کلیک روی «ویرایش با المنتور»، رابط کاربری صفحه ساز در سه بخش اصلی قابل تشخیص است:
بوم طراحی در وسط: نمای واقعی صفحه که تمام سکشن ها، ستون ها و ویجت ها در آن قرار می گیرند.
پنل کناری: فهرست ویجت ها و تنظیمات ظاهری و پیشرفته هر المان.
نوار پایینی: شامل دکمه های ذخیره، پیش نمایش، تاریخچه و انتخاب حالت نمایش دسکتاپ، تبلت و موبایل.
شناخت این سه بخش از همان ابتدا باعث می شود طراح بداند برای افزودن المان، تنظیم ظاهر یا مدیریت نسخه های مختلف صفحه باید به کدام قسمت مراجعه کند.
در طراحی سایت با المنتور، ساختار هر صفحه بر پایه سه لایه اصلی شکل می گیرد:
سکشن: ردیف های افقی که بخش های کلان صفحه را تشکیل می دهند؛ مانند بخش معرفی، خدمات، نمونه کارها و تماس.
ستون: ستون های عمودی داخل هر سکشن که برای تقسیم محتوا و چیدمان عناصر استفاده می شوند.
ویجت: واحدهای محتوایی و تعاملی مانند عنوان، متن، تصویر، دکمه، فرم، اسلایدر و سایر المان ها.
برای مثال، در یک بخش معرفی ساده می توان:
یک سکشن تمام عرض ایجاد کرد.
دو ستون در آن قرار داد.
در ستون اول عنوان و متن توضیحی، و در ستون دوم تصویر اصلی صفحه را قرار داد.
این منطق را می توان در تمام بخش های صفحه به کار گرفت و به تدریج چیدمان های پیچیده تر ساخت.
اگرچه المنتور مجموعه گسترده ای از ویجت ها را ارائه می کند، در ابتدای مسیر تمرکز بر ویجت های زیر کاربردی تر است:
Heading: برای ساخت تیترهای اصلی و فرعی.
Text Editor: برای متن های توضیحی، پاراگراف ها و لیست ها.
Image: برای نمایش تصاویر محصولات، اعضای تیم، نمونه کارها یا بنرهای گرافیکی.
Video: برای قرار دادن ویدیوهای آموزشی، معرفی برند یا محصول.
Button: برای ایجاد دکمه های فراخوان به اقدام مانند ثبت نام، خرید، دانلود یا تماس.
Icon Box: برای معرفی مزایا و ویژگی ها همراه با آیکون و توضیح کوتاه.
Form: برای ساخت فرم تماس، عضویت، ثبت نام، درخواست مشاوره و فرم های چندمرحله ای.
Price Table و Price List: برای نمایش پلن های قیمتی و خدمات.
Testimonial: برای نمایش نظرات و تجربیات مشتریان.
طبیعی است که در شروع کار، مجموعه ای از سوالات تکراری مطرح شود. پرداختن به این موارد باعث می شود فرایند یادگیری هدفمندتر و با دغدغه کمتر پیش برود.
یکی از موارد متداول، باز نشدن ویرایشگر یا نمایش صفحه سفید است. این وضعیت معمولا به چند عامل برمی گردد:
محدودیت منابع سرور مانند حافظه.
تداخل برخی افزونه ها، به ویژه افزونه های کش، امنیت یا بهینه سازی.
استفاده از نسخه های قدیمی یا ناسازگار با هم.
به روز رسانی وردپرس، المنتور و سایر افزونه ها.
غیرفعال کردن موقت افزونه ها برای یافتن مورد ناسازگار.
بررسی تنظیمات هاست و در صورت نیاز افزایش محدودیت حافظه با کمک پشتیبانی.
طراحی فقط بر اساس نمایش دسکتاپ باعث می شود صفحه در موبایل منظم نمایش داده نشود. المنتور امکان تنظیم جداگانه برای دستگاه های مختلف را فراهم می کند.
از حالت نمایش موبایل در نوار پایین استفاده و تک تک سکشن ها را در این حالت بررسی کن.
اندازه فونت، فاصله ها و ترتیب ستون ها را برای موبایل بازتنظیم کن.
در صورت نیاز، برخی بخش ها را برای موبایل مخفی و نسخه ساده تری از آن ها را جایگزین کن.
برخی قالب ها با المنتور هماهنگی کامل ندارند و نتیجه آن به هم ریختن چیدمان یا محدود شدن کنترل روی عرض و حاشیه صفحه است. نشانه های این ناسازگاری معمولا شامل موارد زیر است:
عدم نمایش صحیح سکشن ها و ستون ها.
اعمال ناخواسته استایل های قالب بر روی المان های المنتور.
محدودیت در انتخاب حالت تمام عرض یا بدون حاشیه.
راهکار معمول، انتخاب قالب هایی است که برای کار با المنتور بهینه شده اند یا استفاده از قالب های ساده که کنترل طراحی را به عهده خود صفحه ساز می گذارند.
در آغاز کار، بسیاری از طراحان تازه کار با ناهمخوانی فونت ها، شلوغی رنگ ها و نبود نظم در تیترها مواجه می شوند. رعایت چند اصل ساده این مشکل را تا حد زیادی رفع می کند:
انتخاب حداکثر دو فونت اصلی برای کل سایت.
تعیین یک رنگ پایه، یک رنگ مکمل و یک رنگ تاکید برای اجزای مهم مانند دکمه ها.
رعایت سلسله مراتب تیترها؛ تیتر اصلی بزرگ ترین، تیتر بخش ها کوچک تر و تیترهای فرعی در سطح بعدی.
استفاده هدفمند از فضای خالی برای افزایش خوانایی و تمرکز.
(توضیح گرافیست: تصویر مقایسه ای دو نسخه از یک بخش نسخه اول با چند فونت و رنگ متعدد و فاصله کم، نسخه دوم با دو فونت، سه رنگ کنترل شده و فاصله های مناسب. زیر هر نسخه برچسب «نامنظم» و «منظم» درج شود.)
مدت زمان لازم برای یادگیری طراحی سایت با المنتور به هدف فرد بستگی دارد. برای ساخت صفحات ساده شخصی، چند روز تمرین می تواند کافی باشد، اما برای رسیدن به سطحی که امکان اجرای پروژه های مشتری را فراهم کند، نیاز به:
تمرین مستمر در بازه چند هفته ای.
اجرای چند پروژه کامل (حتی در ابتدا برای خود یا اطرافیان).
مواجهه با مسائل واقعی مانند سرعت، خطاهای رایج و سازگاری افزونه ها.
وجود مسیر آموزشی منظم، این زمان را به شکل قابل توجهی بهینه می کند.
بخش قابل توجهی از مشکلات تازه کارها در المنتور، فنی نیست؛ ریشه آن در تصمیم های اشتباه در سطح استراتژی طراحی است.
چند خطای رایج در این زمینه:
تمرکز بیش از حد بر ظاهر و غفلت از هدف صفحه
بسیاری از صفحات با انیمیشن ها، پس زمینه های سنگین و افکت های متعدد طراحی می شوند، بدون آن که هدف مشخصی برای کاربر تعریف شده باشد. صفحه باید پاسخ یک نیاز مشخص را بدهد؛ معرفی، ثبت نام، فروش یا دریافت درخواست. اگر این هدف از ابتدا تعیین نشود، حتی طراحی چشمگیر هم در عمل کارایی کمی خواهد داشت.
استفاده افراطی از ویجت ها و افزونه های جانبی
اضافه کردن تعداد زیادی ویجت و افزونه صرفا برای «کامل تر» به نظر رسیدن سایت، باعث پیچیدگی، کاهش سرعت و دشوارتر شدن نگهداری پروژه می شود. انتخاب محدود اما دقیق ویجت ها، هم کیفیت تجربه کاربری را بهتر می کند، هم مدیریت پروژه را ساده تر.
نداشتن ساختار ثابت برای صفحات
در برخی پروژه ها، هر صفحه با منطق و فرم متفاوتی طراحی می شود. کاربر در این وضعیت، حس یکپارچگی و اعتماد را از دست می دهد. داشتن الگوی ثابت برای بخش هایی مانند هدر، فوتر، نوع نمایش تیترها و نحوه استفاده از دکمه ها، ساختار سایت را منسجم تر می کند.
طراحی بدون توجه به محتوا
گاهی ابتدا طرحی سنگین و چند بخشی ایجاد می شود و سپس تلاش می شود محتوا با آن تطبیق داده شود، در حالی که بهتر است ابتدا محتوا و پیام صفحه مشخص شود و سپس ساختار و طرح متناسب با آن شکل بگیرد.
چشم پوشی از نسخه موبایل تا لحظه آخر
توجه نکردن به نسخه موبایل تا مراحل پایانی پروژه، در بسیاری از موارد منجر به بازطراحی بخش های مهم می شود. بررسی و تنظیم همزمان نسخه موبایل در طول طراحی، از تکرار کار و کاهش کیفیت جلوگیری می کند.
خود المنتور به تنهایی جایگزین سئو نیست، اما نحوه استفاده از آن می تواند روند بهینه سازی سایت برای موتورهای جستجو را آسان تر یا دشوارتر کند.
ساختاردهی منظم به تیترها
امکان تعریف Heading در سطوح مختلف، در صورتی که درست استفاده شود، به ایجاد ساختار منطقی برای محتوا کمک می کند؛ یک H1 برای عنوان اصلی صفحه، هدینگ های H2 برای بخش های اصلی و H3 برای زیر بخش ها. این موضوع هم برای کاربر و هم برای موتورهای جستجو، درک بهتر موضوع صفحه را به همراه دارد.
کنترل چیدمان محتوا و تجربه کاربری
المنتور اجازه می دهد بخش های اصلی محتوا مانند معرفی، مزایا، اثبات اجتماعی (نظرات مشتریان) و فراخوان به اقدام در جای مناسب قرار داده شوند. این موضوع بر زمان ماندگاری کاربر، نرخ تعامل و در نهایت سیگنال های رفتاری موثر بر سئو تاثیر مثبت می گذارد.
توجه به سرعت و بهینه سازی
استفاده بیش از حد از انیمیشن ها، تصاویر حجیم و ویجت های متعدد، سرعت صفحات را کاهش می دهد. با انتخاب آگاهانه المان ها، استفاده از تصاویر بهینه و بهره گیری از کش و بهینه سازی مناسب، می توان در عین حفظ ظاهر حرفه ای، سرعت خوبی برای صفحات ایجاد کرد.
سازگاری با افزونه های سئو
در سایت های وردپرسی، معمولا افزونه های سئو برای مدیریت متا تگ ها، نقشه سایت و سایر موارد به کار می روند. المنتور در کنار این افزونه ها، امکان طراحی صفحات فرود و صفحات محتوایی را فراهم می کند که هم از نظر ظاهری قابل مدیریت باشند و هم از منظر سئو، ساختار مناسبی داشته باشند.
برای روشن تر شدن کاربرد عملی المنتور، می توان سناریوی یک پروژه واقعی را در نظر گرفت؛ به عنوان مثال، طراحی سایت یک مدرس که قصد معرفی خود، دوره ها و جذب ثبت نام دارد.
در این سناریو، اهداف اصلی می تواند شامل موارد زیر باشد:
معرفی مدرس و تخصص او.
نمایش دوره ها و خدمات آموزشی.
ارائه نمونه محتوا یا بخش رایگان برای آشنایی اولیه.
ایجاد مسیرهای واضح برای ثبت نام، تماس یا عضویت در خبرنامه.
بر اساس این اهداف، ساختار پیشنهادی سایت:
صفحه اصلی.
صفحه معرفی مدرس (درباره).
صفحه لیست دوره ها.
صفحات جزئیات هر دوره.
صفحه تماس و پشتیبانی.
در صفحه اصلی، می توان از المنتور برای ساخت بخش های زیر استفاده کرد:
هدر با لوگو و منو اصلی.
بخش اول با تصویر مدرس، یک عنوان واضح و دکمه فراخوان (مثل مشاهده دوره ها یا شروع یادگیری).
بخش معرفی کوتاه مدرس و تجربه او.
بخش نمایش چند دوره منتخب با کارت های دوره، تصویر، عنوان و دکمه مشاهده جزئیات.
بخش نظرات فراگیران یا مشتریان.
بخش تماس یا ثبت نام در خبرنامه.
برای هر بخش، یک سکشن مستقل و در صورت نیاز چند ستون تعریف می شود و از ویجت هایی مانند Heading، Text Editor، Image، Button و در نسخه حرفه ای، Form و Testimonial استفاده می شود.
صفحه جزئیات هر دوره در این سناریو مهم ترین صفحه برای تبدیل بازدیدکننده به دانشجو است. در المنتور می توان بخش های زیر را ایجاد کرد:
عنوان دوره و توضیح کوتاه در ابتدای صفحه.
تصویر یا ویدیوی معرفی دوره.
فهرست سرفصل ها و محتوای دوره به صورت ساختار یافته.
توضیح درباره سطح دوره، پیش نیازها و مخاطبان هدف.
نمایش مدرس دوره و سوابق او.
بخش پرسش های متداول درباره دوره.
دکمه یا فرم ثبت نام در چند نقطه از صفحه.
در نسخه حرفه ای المنتور، می توان قالب واحدی برای همه صفحات دوره طراحی کرد و بر اساس آن، اطلاعات هر دوره را به صورت پویا نمایش داد.
(توضیح گرافیست: تصویر آموزشی از یک صفحه دوره؛ در بالا عنوان و تصویر، وسط فهرست سرفصل ها و باکس معرفی مدرس، پایین بخش سوالات متداول و دکمه ثبت نام.)
در این پروژه، المنتور به طراح کمک می کند که مسیر کاربر را از صفحه اصلی تا صفحه دوره و در نهایت ثبت نام به صورت شفاف و بدون سردرگمی طراحی کند. به عنوان نمونه:
کاربر در صفحه اصلی با بخش دوره های منتخب روبه رو می شود.
با کلیک بر روی کارت یک دوره، به صفحه جزئیات آن منتقل می شود.
در صفحه دوره، با خواندن توضیحات، مشاهده سرفصل ها و نظرات، اعتماد پیدا می کند.
در نهایت از طریق دکمه یا فرم ثبت نام، اقدام مورد نظر انجام می شود.
با استفاده از المنتور، می توان در هر مرحله، چیدمان و فراخوان ها را به گونه ای تنظیم کرد که این مسیر به صورت طبیعی و روان طی شود و نرخ تبدیل بازدیدکننده به ثبت نام کننده افزایش یابد.
ترکیب وردپرس، افزونه فروشگاهی و المنتور، امکان طراحی فروشگاه های اینترنتی با ظاهر کاملا سفارشی را فراهم می کند. در این حوزه، سه نوع صفحه اهمیت ویژه ای دارند:
صفحه محصول: طراحی محل تصویر اصلی و گالری، عنوان، قیمت، توضیحات، ویژگی ها، دکمه خرید و نظرات کاربران.
صفحه آرشیو محصولات: چیدمان کارت های محصول، نمایش دسته بندی ها، فیلترها و جستجو.
صفحات فرود کمپین: ایجاد صفحات مستقل برای معرفی تخفیف های ویژه، محصول جدید یا رویداد خاص.
در نسخه های پیشرفته، ویجت های اختصاصی فروشگاهی امکان کنترل دقیق بخش های مختلف صفحه محصول و لیست محصولات را می دهند.
نسخه رایگان المنتور برای شروع و انجام بسیاری از کارها مناسب است، اما در پروژه های جدی تر، نیاز به امکاناتی فراتر از نسخه پایه به سرعت احساس می شود. در این مرحله استفاده از افزونه المنتور پرو منطقی است.
قابلیت های مهم نسخه حرفه ای:
قالب ساز (Theme Builder): طراحی هدر، فوتر، صفحه آرشیو، صفحه تکی نوشته ها، صفحه محصول و سایر بخش های سیستمی سایت در محیط المنتور.
پاپ آپ ساز: ایجاد پاپ آپ های هدفمند برای عضویت، اطلاع رسانی، تخفیف و رفتارهای خاص کاربر.
فرم ساز پیشرفته: ساخت فرم های چندمرحله ای، اتصال به سرویس های ایمیل مارکتینگ و تعریف رفتارهای مختلف پس از ارسال فرم.
ویجت های اختصاصی وبلاگ و فروشگاه: کنترل دقیق نحوه نمایش نوشته ها و محصولات.
استفاده از نسخه حرفه ای، فاصله بین «طراحی صفحات جداگانه» و «طراحی کامل ساختار قالب سایت» را پر می کند و برای افرادی که قصد فعالیت جدی در حوزه طراحی سایت دارند، عملا به یک ضرورت تبدیل می شود.
برای آشنایی اولیه با المنتور، استفاده از مقالات، ویدیوها و منابع پراکنده مفید است و می تواند دید کلی نسبت به ابزار ایجاد کند. با این حال، زمانی که هدف، رسیدن به سطحی است که امکان پذیرش پروژه و ورود به بازار کار را فراهم کند، یادگیری نیازمند ساختار دقیق تری است.
در این مرحله، تفاوت اصلی میان دو مسیر نمایان می شود:
مسیر خودخوان:
انعطاف بالایی دارد اما ممکن است پراکنده، زمان بر و بدون بازخورد مستقیم باشد.
مسیر پروژه محور:
محتوا به صورت مرحله ای ارائه می شود، هر مرحله با یک خروجی مشخص همراه است و فرد در طول مسیر بازخورد دریافت می کند.
برای طراحانی که قصد دارند از طراحی سایت با المنتور به عنوان مهارت اصلی شغلی استفاده کنند، حضور در دوره ای که بر مبنای پروژه های واقعی، تمرین عملی، رفع اشکال و آماده سازی نمونه کار طراحی شده باشد، تصمیم منطقی تری است.
(توضیح گرافیست: تصویر مسیر یادگیری به شکل یک خط زمانی ابتدا «آشنایی اولیه»، سپس «تمرین و پروژه آموزشی»، و در انتها «پروژه واقعی و ورود به بازار کار». در هر نقطه از یک آیکون ساده استفاده شود.)
برای تبدیل شدن به یک طراح مسلط در زمینه طراحی سایت با المنتور، می توان مسیر را به صورت واقع بینانه این گونه ترسیم کرد:
تسلط بر محیط المنتور، منطق سکشن، ستون و ویجت و تنظیمات اصلی هر کدام.
تمرین طراحی چند صفحه کلیدی مانند صفحه اصلی، صفحه فرود، درباره ما، وبلاگ و یک صفحه محصول.
آشنایی و کار عملی با نسخه حرفه ای و امکاناتی مانند قالب ساز، فرم ساز و پاپ آپ ساز.
اجرای چند پروژه واقعی، حتی در مقیاس کوچک، برای روبه رو شدن با چالش های سرعت، خطاها و خواسته های واقعی کارفرما.
استفاده از یک دوره ساختارمند و پروژه محور برای دریافت بازخورد، تکمیل مهارت ها و ایجاد مجموعه ای از نمونه کارهای قابل ارائه.
در نهایت، زمانی که فرد به دنبال یادگیری عمیق تر، پروژه های عملی و دریافت مدرک معتبر است، ثبت نام در یک دوره طراحی سایت با المنتور که بر پایه پروژه های واقعی و مسیر مشخص آموزشی طراحی شده باشد، می تواند شتاب دهنده اصلی مسیر حرفه ای او باشد. برای شروع یادگیری حرفه ای طراحی سایت با المنتور میتوانید در دوره تلپورت راست چین آکادمی شرکت کنید و از مدرک پایان دوره و بیش از 20 ساعت دوره آموزشی ضبط شده بهره مند شود همچنین با شرکت در این دوره از مزایای زیر هم بهره مند شوید .
