آموزش طراحی سایت با المنتور

طراحی سایت با المنتور یک روش ساده و کاربردی برای ساخت سایت در وردپرس است. با استفاده از المنتور می توان بدون نیاز به کدنویسی، صفحات زیبا و حرفه ای طراحی کرد. ساخت وب سایت با المنتور به کاربران کمک می کند تا با کشیدن و رها کردن المان ها، بخش های مختلف سایت خود را بسازند و ظاهر آن را به دلخواه تنظیم کنند. این افزونه وردپرس یکی از محبوب ترین ابزارها برای طراحی سایت های وردپرسی است چون کار با آن آسان و نتیجه کار بسیار حرفه ای است. به همین منظور ما در این مطلب قصد داریم شما را با آموزش المنتور برای طراحی سایت آشنا کنیم. همراه نوین وردپرس باشید.

بیشتر بخوانید: افزونه ابزارک های وردپرس

المنتور چیست و چرا برای طراحی سایت استفاده می‌شود؟

المنتور یک افزونه صفحه ساز برای وردپرس است که به شما امکان می دهد بدون نیاز به دانش برنامه نویسی، صفحات سایت خود را به صورت دیداری طراحی کنید. این افزونه با قابلیت کشیدن و رها کردن المان ها، طراحی سایت را بسیار ساده و سریع می کند. المنتور برای طراحی سایت استفاده می شود چون امکانات زیادی مثل ساخت صفحات واکنش گرا، تنظیم ظاهر هر بخش، افزودن فرم، گالری، اسلایدر و بسیاری ابزارهای کاربردی دیگر را در اختیار کاربر قرار می دهد. همچنین با بیشتر قالب ها و افزونه های وردپرس سازگار است و به شما کمک می کند تا ظاهر سایت خود را دقیقاً همان طور که می خواهید بسازید.

• بدون نیاز به کدنویسی: یکی از بزرگ ترین مزایای المنتور این است که برای طراحی سایت نیازی به آشنایی با HTML ،CSS یا JavaScript ندارید. تمام عناصر مانند متن، تصویر، دکمه، فرم و اسلایدر را فقط با کشیدن به صفحه اضافه می‌کنید.
• سرعت بالا در طراحی: المنتور باعث می‌شود طراحی صفحات با سرعت بسیار بالا انجام شود. به جای ساخت قالب وردپرس از صفر، می‌توانید از قالب های آماده یا بلوک های از پیش طراحی شده استفاده کنید.
• انعطاف پذیری بالا: شما می‌توانید هر بخش از سایت را دقیقاً مطابق با سلیقه خود تغییر دهید. تنظیمات پیشرفته برای رنگ، تایپوگرافی، فاصله ها و حاشیه ها به شما کنترل کامل روی ظاهر سایت می‌دهد.
• سازگاری با قالب ها و افزونه های مختلف: المنتور تقریبا با تمام قالب های استاندارد وردپرس و افزونه های پرکاربرد مانند ووکامرس و یواست سئو سازگار است. این ویژگی آن را برای هر نوع سایت فروشگاهی، شرکتی، شخصی یا آموزشی مناسب می‌کند.
• نسخه رایگان و حرفه ای: المنتور دارای نسخه رایگان با امکانات پایه است، اما نسخه حرفه ای قابلیت هایی مانند طراحی هدر و فوتر، فرم ساز پیشرفته، پاپ آپ ساز و ابزارهای ووکامرس را ارائه می‌دهد.
• سئو دوستانه: کدهای خروجی المنتور بهینه و سازگار با موتورهای جستجو هستند. همچنین، کنترل کامل بر تگ های عنوان، تصاویر و ساختار صفحات دارید که به بهبود سئو کمک می‌کند.
• جامعه کاربری و پشتیبانی گسترده: میلیون ها کاربر در سراسر جهان از المنتور استفاده می‌کنند، بنابراین آموزش ها، قالب ها، افزونه های کمکی و انجمن های پشتیبانی بسیار زیادی برای آن وجود دارد.

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

آموزش طراحی صفحات حرفه‌ای با المنتور

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

1- راه اندازی صفحه ساز المنتور

برای طراحی یک صفحه یا نوشته جدید در المنتور به مسیر صفحات/نوشته ها > افزودن جدید بروید. برای باز کردن ویرایشگر المنتور روی گزینه «ویرایش با المنتور» کلیک کنید.

همچنین ممکن است یک صفحه موجود داشته باشید که نیاز به تغییر و بهبود دارد. در این صورت به آن صفحه بروید و برای ویرایش آن را باز کنید. سپس می توانید روی دکمه «ویرایش با المنتور» کلیک کنید.

در سمت راست صفحه، نوار کناری المنتور را مشاهده می کنید. این بخش شامل تمام المان هایی است که می توانید به طراحی خود اضافه کنید، مانند دکمه ها و عنوان ها.

نوار کناری المنتور همچنین شامل بخشی به نام ابزارک های سراسری است. اگر قصد دارید یک ابزارک را در چند طراحی مختلف استفاده کنید، می توانید آن را به عنوان ابزارک سراسری ذخیره کنید. این کار باعث می شود المان سفارشی شما همیشه در دسترس باشد و همچنین یک محل مرکزی برای ویرایش ابزارک ایجاد می کند تا تغییرات به صورت جهانی در تمام سایت اعمال شود.

در سمت چپ، بوم پیش نمایش زنده قرار دارد که می توانید طراحی خود را در آن ایجاد کنید. المنتور تغییرات شما را به صورت زنده نمایش می دهد و با هر ویرایش، نتیجه فوراً به روز می شود.

بیشتر بخوانید: 8 تا از روش های کسب درآمد از برنامه‌ نویسی

2- افزودن ویجت‌ها و ابزارک‌ها در المنتور

ویرایشگر المنتور سه بلوک اصلی برای طراحی در اختیار شما قرار می دهد: بخش ها، ستون ها و ابزارک ها. ما قبلاً به ابزارک های آماده المنتور اشاره کردیم، حالا ببینیم چگونه می توانید آن ها را به طراحی خود اضافه کنید. معمولاً کار خود را با ایجاد یک بخش شروع می کنید. برای این کار روی آیکون + در بوم اصلی کلیک کنید. سپس المنتور از شما می خواهد ساختار مورد نظر خود را انتخاب کنید.

گزینه های ساختار شامل یک یا چند ستون است. در نهایت، ابزارک خود را درون این ستون ها قرار می دهید. ستون ها نقش مهمی در ایجاد طرح بندی های منظم و سازماندهی شده دارند.

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

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

فرض کنید می خواهید تغییرات پیچیده تری انجام دهید. با نگه داشتن کلید کنترل روی دسته آبی کلیک کنید و گزینه «ویرایش بخش» را انتخاب کنید. در این صورت نوار کناری المنتور به‌روزرسانی می شود و تمام تغییرات اضافی که می توانید روی این بخش اعمال کنید، نمایش داده می شود.

همچنین می توانید ابزارک ها را به این بخش اضافه کنید. در نوار کناری المنتور، ابزارک مورد نظر خود را پیدا کنید و آن را به بوم اصلی بکشید.

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

مشاهده کنید: دانلود افزونه های المنتور

3- ویرایش تنظیمات سایت

با استفاده از المنتور می توانید تنظیمات کلی سایت خود را ویرایش کنید. این شامل تغییر فونت پیش فرض و رنگ های HTML می شود. همچنین می توانید حاشیه ها و سایه هایی که وردپرس به المان هایی مانند تصاویر سایت اضافه می کند را تغییر دهید.

با اعمال این تنظیمات در سطح سایت، می توانید ظاهر و حس یکسانی را در تمام صفحات وردپرس خود حفظ کنید. این روش به مراتب سریع تر و آسان تر از اعمال تغییرات به صورت صفحه به صفحه است. برای مشاهده تنظیمات موجود سایت، روی منوی همبرگری در نوار کناری المنتور کلیک کنید.

حال می توانید گزینه های مختلف را بررسی کرده و تغییرات لازم را اعمال کنید. وقتی آماده بودید تا تنظیمات جدید سایت خود را منتشر کنید، روی دکمه «به‌روزرسانی» در پایین نوار کناری المنتور کلیک کنید.

خرید قالب چند فروشندگی وردپرس

4- بررسی تاریخچه ویرایش ها

در این مرحله از آموزش طراحی سایت با المنتور نوبت به بررسی تاریخچه ویرایش ها می رسد. در حین ویرایش طراحی ها، المنتور به صورت خودکار تغییرات شما را ثبت می کند. شما می توانید به راحتی ویرایش های خود را بازگردانید که این ویژگی زمانی که متوجه اشتباه خود می شوید، بسیار مفید است.

لیست تاریخچه المنتور همچنین امکان آزمایش و امتحان تغییرات مختلف را به شما می دهد. می توانید تغییرات مختلف را تست کنید و سپس به سرعت آن ها را حذف کنید. با تشویق به آزمایش، المنتور کیفیت طراحی نهایی شما را بهبود می بخشد.

برای مشاهده تاریخچه المنتور، روی آیکون «تاریخچه» در پایین نوار کناری کلیک کنید. زبانه «عملیات» هر تغییر شما در المنتور را ثبت می کند. این تغییرات می توانند شامل ایجاد بخش جدید یا ویرایش متن موجود باشند.

هر بار که روی «ذخیره» کلیک می کنید، المنتور نسخه فعلی صفحه شما را به عنوان یک بازبینی جدید ثبت می کند. می توانید تمام این نسخه ها را در زبانه «بازبینی ها» مشاهده کنید. اگر می خواهید به یک ذخیره قبلی بازگردید، کافی است آن را در لیست بازبینی ها پیدا کرده و روی آن کلیک کنید.

به یاد داشته باشید، شما می توانید هر تعداد طراحی و سبک دهی که می خواهید انجام دهید، چون المنتور سرعت سایت را کاهش نمی دهد؛ مشکل از هاست ضعیف است. برای حفظ سرعت سایت المنتور خود، از هاست قوی استفاده کنید و چند عملکرد ساده نگهداری را انجام دهید.

چگونه یک صفحه در المنتور بسازیم؟

حالا که با روند اصلی کار با المنتور آشنا شدید، بیایید ببینیم چگونه می توانید از این دانش برای طراحی صفحات جدید استفاده کنید. ابتدا ساخت یک صفحه استاندارد وردپرس با استفاده از افزونه رایگان المنتور را بررسی می کنیم. سپس نحوه ایجاد یک صفحه محصول با تبدیل بالا با استفاده از ووکامرس و المنتور پرو را توضیح خواهیم داد.

برای شروع، یک صفحه جدید بسازید به مسیر صفحات > افزودن جدید > ویرایش با المنتور بروید. سپس با کلیک روی آیکون + یک بخش به طراحی خود اضافه کنید. از آنجا که می خواهیم با عنوان شروع کنیم، بهتر است از یک طرح تک ستونه استفاده کنیم.

در نوار کناری المنتور، ابزارک عنوان (Heading) را پیدا کنید. حالا این ابزارک را به بخش جدید خود بکشید و رها کنید. سپس می توانید متن عنوان خود را در نوار کناری المنتور تایپ کرده و از تنظیمات مختلف برای سبک دهی به عنوان استفاده کنید.

سپس روی آیکون + کلیک کنید تا یک بخش دوم اضافه کنید. ما می خواهیم یک تصویر قرار دهیم و سپس متن پشتیبان ارائه دهیم، بنابراین این بار از یک طرح چند ستونه استفاده می کنیم.

سپس ابزارک ویرایشگر متن (Text Editor) را از نوار کناری المنتور بکشید و در این بخش جدید رها کنید. سپس می توانید متن خود را اضافه کرده و با استفاده از تنظیمات نوار کناری آن را سبک دهی کنید.

وقتی از متن خود راضی بودید، ابزارک تصویر (Image) را پیدا کنید و دوباره با کشیدن و رها کردن آن را به بخش خود اضافه کنید.

در نوار کناری، روی تصویر پیش نمایش کلیک کنید. حالا می توانید از کتابخانه رسانه وردپرس یک تصویر جدید آپلود کنید یا یک تصویر قبلاً آپلود شده را انتخاب کنید. برای مشاهده طراحی خود در عمل، روی آیکون چشم در پایین نوار کناری المنتور کلیک کنید. این کار پیش نمایش طرح صفحه شما را در یک تب جدید نمایش می دهد.

بیشتر بخوانید: بهترین افزونه های کد تخفیف و کوپن ووکامرس 

آموزش طراحی سایت فروشگاهی با المنتور

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

برای طراحی یک صفحه محصول سفارشی ووکامرس، از داشبورد وردپرس گزینه قالب ها (Templates) را انتخاب کنید. سپس روی دکمه «افزودن جدید» کلیک کنید. در پنجره بعدی، اولین منوی کشویی را باز کرده و گزینه “محصول تکی” را انتخاب کنید.

به قالب جدید خود یک نام توصیفی بدهید و روی “ایجاد قالب ” کلیک کنید. با این کار، کتابخانه المنتور با تمام طرح های موجود برای محصول تکی باز می شود.

برای مشاهده دقیق تر یک قالب، ماوس خود را روی آن ببرید و وقتی آیکون ذره‌ بین ظاهر شد، روی آن کلیک کنید. اگر می خواهید این طراحی را در فروشگاه خود اعمال کنید، روی “درج ” کلیک کنید.

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

المنتور پرو مجموعه ای از ابزارک های ووکامرس را ارائه می دهد که می توانید به طراحی خود اضافه کنید. برای مشاهده ابزارک های موجود، به بخش ووکامرس یا محصولات در نوار کناری المنتور بروید.

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

 وقتی از طراحی خود راضی بودید، روی “انتشار ” کلیک کنید. سپس گزینه «افزودن شرط را انتخاب کرده و مناطقی که می خواهید این طراحی در آن ها استفاده شود را مشخص کنید. به عنوان مثال، می توانید این قالب را برای یک دسته محصول خاص اعمال کنید یا در سراسر فروشگاه استفاده کنید.

استفاده از قالب‌های آماده المنتور

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

افزونه رایگان المنتور بیش از ۱۰۰ قالب کامل صفحه و بیش از ۳۰۰ بلوک ارائه می دهد. اگر به المنتور پرو ارتقا دهید، به گزینه های بیشتری دسترسی خواهید داشت.

برای اعمال یک قالب به طراحی فعلی خود، روی آیکون “افزودن قالب ” کلیک کنید. این دکمه در هر بلوک بخش به شکل یک پوشه سفید ظاهر می شود. با کلیک روی آن، کتابخانه المنتور باز می شود.

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

وقتی قالبی را که می خواهید استفاده کنید پیدا کردید، روی “درج” کلیک کنید. اگر قبلاً به کتابخانه قالب های المنتور متصل نشده باشید، یک پنجره پاپ آپ از شما می خواهد این مرحله را تکمیل کنید.

ساخت صفحات Landing Page با المنتور

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

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

المنتور همچنین قالب‌ ها و بلوک ‌های آماده متنوعی برای صفحات فرود ارائه می ‌دهد که باعث می ‌شود طراحی صفحه بسیار سریع تر انجام شود.

اگر با نحوه ساخت لندینگ پیج آشنایی ندراید به شما پیشنهاد می کنم مطلب “ آموزش ساخت لندینگ پیج در وردپرس” را مشاهده نمائید.

نکات سئو در طراحی سایت با المنتور

– انتخاب قالب استاندارد و سبک

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

– استفاده از تگ های HTML مناسب

از تگ های  H1 ،H2 ،H3  و… به صورت منطقی برای سرفصل ها استفاده کنید. المنتور به شما امکان می دهد هر عنوان را با تگ مناسب مشخص کنید که برای گوگل اهمیت دارد.

– بهینه سازی تصاویر

حجم تصاویر را کاهش دهید بدون اینکه کیفیت آنها به طور قابل توجهی افت کند. حتما از متن جایگزین (Alt Text) برای تصاویر استفاده کنید زیرا به سئو و دسترسی کمک می کند.

– طراحی ریسپانسیو

المنتور امکان طراحی صفحات کاملا ریسپانسیو را فراهم می کند. مطمئن شوید که سایت روی موبایل، تبلت و دسکتاپ بدون مشکل نمایش داده می شود.

– لینک سازی داخلی

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

– ایجاد محتوای طولانی و ارزشمند

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

– کاهش نرخ پرش و افزایش تعامل کاربر

طراحی کاربرپسند با المنتور باعث افزایش زمان ماندگاری کاربران در سایت می شود.  المان های تعاملی مثل فرم ها، دکمه های CTA و اسلایدرهای جذاب می توانند نرخ تعامل را افزایش دهند.

خرید قالب فروشگاهی وردپرس

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

استفاده از انیمیشن و افکت ها در صفحات المنتور یکی از قابلیت های جذاب این افزونه است که باعث می شود صفحات وب حرفه ای تر و تعاملی تر به نظر برسند. المنتور امکان اضافه کردن انواع انیمیشن های ورود عناصر، افکت های حرکت هنگام اسکرول، محو شدن، بزرگ شدن یا چرخش المان ها را بدون نیاز به کدنویسی فراهم می کند.

با این ابزارها می توان توجه کاربران را به بخش های مهم صفحه جلب کرد، تجربه کاربری را بهبود بخشید و ظاهر سایت را زنده و پویا نشان داد. علاوه بر انیمیشن ها، المنتور امکاناتی برای افزودن افکت های پس زمینه، شناور شدن المان ها و سایه های حرکتی دارد که به طراحی حرفه ای صفحات کمک می کند.

سرعت و بهینه‌سازی سایت طراحی شده با المنتور

سرعت و بهینه سازی سایت طراحی شده با المنتور یکی از مهم ترین نکاتی است که هنگام استفاده از این صفحه ساز باید مدنظر قرار گیرد. المنتور به طور پیش فرض کدهای بهینه و استاندارد تولید می کند، اما طراحی صفحات پیچیده با تعداد زیاد المان ها و انیمیشن ها می تواند بر سرعت بارگذاری تأثیر بگذارد.

برای بهبود سرعت سایت می توان از روش هایی مانند فعال کردن کش مرورگر، فشرده سازی تصاویر، کاهش استفاده از انیمیشن های سنگین و بهینه سازی افزونه های نصب شده استفاده کرد. المنتور همچنین قابلیت بارگذاری تنبل تصاویر و بخش ها را دارد که باعث می شود فقط محتوای قابل مشاهده کاربر به سرعت بارگذاری شود و بار اضافی روی سرور کاهش یابد.

استفاده از قالب های سبک و بهینه، کاهش تعداد اسکریپت های خارجی و رعایت اصول سئو فنی نیز به افزایش سرعت و بهینه سازی سایت کمک می کند. با رعایت این موارد، صفحات طراحی شده با المنتور می توانند تجربه کاربری سریع، روان و بهینه برای بازدیدکنندگان ارائه دهند.

سوالات متداول

جمع بندی

طراحی سایت با المنتور یک روش ساده و سریع برای ساخت صفحات حرفه ای بدون نیاز به کدنویسی است. با استفاده از این ابزار می توان صفحات زیبا، تعاملی و بهینه ساخت، قالب های آماده را به راحتی شخصی سازی کرد و حتی سایت های فروشگاهی حرفه ای طراحی نمود. المنتور علاوه بر امکانات طراحی، امکانات بهینه سازی و افزایش سرعت سایت را نیز فراهم می کند و تجربه کاربری بهتری برای بازدیدکنندگان ایجاد می نماید.