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

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

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

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

نمادک سایت

نامک سایت را می توانیم از بخش تنظیمات قالب یا در بعضی از قالب ها در بخش نمایش/ سفارشی سازی تغییر بدهیم. ( آیکون کنار برگه در مرورگر) 512 در 512

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

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

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

ساخت انواع قالب در طراحی سایت با المنتور

• قالب هدر:  کاری که ما قرار است انجام بدهیم این است که یک قالب یا قالب هایی را از نوع هدر، برای هدر با المنتور بسازیم و آن را در برگه ها و هر جایی که مد نظرمان هست فراخوانی کنیم تا نمایش داده شود لازم به ذکر است که می توانیم از قالب های پیش فرض هم استفاده کنیم و یا آن را تغییر بدهیم و بعد استفاده کنیم. روش اجرایی ساخت هدر با المنتور: برای ساخت هدر می توانیم از دو قسمت وارد شویم یک) قالب ها / سازنده تم دو) قالب ها / قالب های ذخیره شده / افزودن جدید. فرقی ندارد که از کدام قسمت بسازیم. اگر از قسمت قالب ها اقدام کنیم / بعد از افزودن، نوع قالب را هدر انتخاب می کنیم و یک نام هم برای آن در نظر میگیریم. بعد از ایجاد میتوانیم از دموهای آماده استفاده کنیم. در غیر این صورت می توانیم متناسب با سلیقه خود هدر را ایجاد کنیم. هدر میتواند شامل موارد روبرو باشد: نوار بالا  / بخش میانی اصلی / بخش پایین. البته بستگی به سلیقه افراد دارد. در هدر می توانید مواردی همچون لوگو، فهرست یا منو سایت، فیلد جستجو،ورود و عضویت و……قرار بگیرد. فهرست خوب در سئو تاثیر زیادی دارد. قبل از ساخت هدر باید فهرست هدر را بسازیم. اگر قالب شما امکان ساخت هدر را داشته باشد می توانید از آن استفاده کنید. اکنون در اینجا می توانیم از صفحه ساز استفاده کنیم و هدر خود را طراحی کنیم.برای ساخت هدر دو پیش نیاز داریم الف) لوگو ب) فهرست. لوگو را باید در قسمت منوی همبرگری و تنظیمات سایت و قسمت هویت سایت وارد کنیم تا به صورت اتوماتیک در هدر وارد بشود. لوگو هدر به صورت PNG و ارتفاع آن حداکثر 100 پیکسل ولی عرض آن میواند بیشتر هم باشد. در صورت نیاز می توانید در فتوشاپ تغییرات را انجام دهید. فهرست را باید از قسمت نمایش و قسمت فهرست ها بسازیم.   در هدر می توانیم از المان لوگو، عنوان سایت، فهرست منو، دکمه حساب کاربری و ….. استفاده کنیم. بعد از طراحی انتشار /  بعد کاندیشن را برای تمام سایت در نظر میگیریم.
  • ساخت فهرست هدر  ابتدا منو یا فهرست را می سازیم / نمایش / فهرست ها / نام فهرست را فهرست اصلی میزاریم / ایجاد فهرست /  می توانیم از قسمت برگه ها، برگه مد نظر را انتخاب و به فهرست خود اضافه کنیم. زیر منو در فهرست هدر : تمام فهرست هایی که ایجاد کردیم را می توانیم جابجا کنیم و برای ایجاد زیر منو میتوانیم یک فهرست را کمی جلوتر رها کنیم تا زیر مجموعه فهرست بالایی قرار بگیرد. برای ایجاد یک زیر منوی خیلی بزرگ می توانیم از افزونه هم استفاده کنیم. اضافه کردن آیکون به فهرست هدر: در سایت / icone / fontawesome.com / بعد از انتخاب آیکون، در قسمت بالا یک کدی وجود دارد که ان را کپی می کنیم / و در فهرست خودمان مثلا صفحه اصلی /  پشت صفحه اصلی این کد را قرار میدهیم و یک space می زنیم. برای تمام آیتم های فهرست می توانیم آیکون در نظر بگیریم مثلا برای ((درباره ما)) about رو سرچ می کنیم یا برای محصولات cart را سرچ می کنیم.
  • ساخت هدر چسبنده: کل هدر را میخواهیم چسبنده کنیم / وارد ویرایش با المنتور / روی تنظیمات ردیف / پیشرفته /  موشن افکت / چسبان بالا. می توانیم کل هدر  یا قسمت پایین آن را چسبنده کنیم.
  • ساخت هدر شفاف: در قسمت هدرهای سایت می توانیم از هدرهای آماده استفاده کنیم یا همان هدری که داریم را تبدیل کنیم به هدر شفاف. برای این کار کافی است تا دکمه سربرگ شفاف را بزنیم. ما می توانیم در اینجا هدر های متفاوتی را ایجاد کنیم. اکنون در برگه ای که انتشار دادیم می توانیم انتخاب کنیم که کدام هدر فعال شود. می توانیم در برگه مد نظر تصویری را قرار دهیم یا اینکه از اسلایدر ها استفاده کنیم. در اینجا باید در تنظیمات به اندازه ی مشخصی مارجین بالا بدهیم ( مثلا 50- یا 100- پیکسل) تا اسلایدر ما زیر هدر بیافتد. اکنون میتوانیم در بخش رنگ هدر، ترنسپرنت را صفر کنیم تا هدر شفاف نمایان شود.
  • نکته بسیار مهم در ساخت هدر: هم چنین می توانید برای اعمال تغییرات در برخی از قسمت ها که قالب و صفحه ساز این امکان را ندارند، از افزونه مداد زرد کمک بگیرید. البته نباید زیاده روی کنید چون ممکن است ریسپانسیو سایت خود را دچار مشکل کنید.
  •  ریسپانسیو بودن هدر یعنی اینکه در device های دیگه هم طراحی ما به خوبی نمایش داده بشود. برای دیدن طراحی در حالت موبایل می توانید Inspect را بزنید و طراحی را به صورت موبایل بررسی کنید. برای اینکه المان در موبایل باشد ولی در دسکتاب نباشد می توانیم در تنظیمات و در بخش ریسپانسیو گزینه نمایش برای دسکتاپ را غیر فعال کنیم.
  •  اضافه کردن نام فرد ثبت نام شده در هدر: در بخش هدر / المان html / آنگاه شورت کد مد نظر را در آن قرار می دهیم مثلا  [user_display_name]، برای دیدن مابقی شورت کدها می توانید در گوگل سرچ کنید all user shortcodes in wordpress یا از آدرس زیر استفاده کنید. :

https://profilegrid.co/wordpress-user-profiles-shortcodes-list/

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

• محتوای میانی: در مرحله بعدی برای قسمت محتوا هر آنچه که نیاز داریم را طراحی و استفاده میکنیم در این قسمت متناسب با ذوق و سلیقه خود می توانیم از المان های مختلفی استفاده کنیم. مثلا می توانیم ویدیو، عکس، آیکون، نوشته و …….. را قرار دهیم. هم چنین در بخش محتوا می توانیم از موارد تکرار شونده هم استفاده کنیم مثل: فهرست دسته بندی محصولات که برای این کار باید قالب آن را از نوع بخش با المنتور بسازیم و در صفحه اصلی با المان مد نظر آن را فراخوانی کنیم. علت دیگری که باعث می شود تا ما فهرست دسته بندی را در قسمت محتوا به صورت بخش بسازیم و آن را فراخوانی کنیم این است که فهرست بزرگ باعث کندی سایت می شود و بهتر این است که ما آن را از جایی فراخوانی کنیم.
• قالب فوتر: در مرحله بعدی یک قالب یا قالب هایی برای فوتر از نوع فوتر با المنتور طراحی می کنیم و آن را در هر جایی که دوست داریم استفاده میکنیم. روش های ساخت فوتر: فوتر را می توانیم از روش های مختلفی بسازیم مثل: الف) ساخت فوتر با افزونه المنتور در صورتی که قالب شما با المنتور سازگاری داشته باشد، ب) ساخت فوتر از طریق بخش نمایش و ابزارک ها، ج) ساخت فوتر با صفحه ساز خود قالب در صورت وجود (چون فوتر قالب وودمارت بلوک html دارد می توانیم از همین قسمت درست کنیم )، د) ساخت فوتر با افزونه. نکته: فوتر لینک ندارد. فوتر را می توانیم در تنظیمات قالب برای برگه ها، نوشته ها و … در نظر بگیریم. اگر خواستید برای یک برگه فوتر خاصی استفاده کنید در ویرایش برگه می توانید برای این برگه یک فوتر انتخاب کنید. به خاطره مسائل امنیتی و جلوگیری از خرابکاری ربات ها سعی کنید فرم تماس با ما و ثبت نام را در فوتر قرار ندهید. نکته: سایدبار و فوتر و …. از بخش های تکرار شونده هستند و به همین دلیل است که ما قالب آن را  میسازیم و بعد آن را فراخوانی میکنیم. روش اجرایی ساخت فوتر با المنتور: دقیقا مثل هدر یک قالب ایجاد میکنیم ولی این بار به جای هدر، فوتر را انتخاب میکنیم.سپس طراحی خود را انجام می دهیم و بعد در قسمت کاندیشن آن را می توانیم برای تمام سایت در نظر بگیریم. نکته: آیتم های فوتر می تواند شامل موارد زیر باشد : درباره فروشگاه، تلفن، آدرس، لینک های مهم ( ارتباط با ما، درباره ما، شرایط خرید، قوانین و مقررات، حسابی کاربری)، محصولات ( برای هرکدام هم میتونیم یک لینک در نظر بگیریم )، مجوز ها ( اگر enamad دارید میتوانید المان html رو قرار بدید و کد ای نماد را در آن قرار دهید )، شبکه های اجتماعی. قسمت پایین فوتر : در تنظیمات قالب / فوتر / اون پایین / متن کپی رایت / و متن کنار کپی رایت / در اینجا میتونید عوض کنید. برای عکس ها لینک را تغییر بدهید و برای نوشته میتوانید عنوان تمامی حقوقو این سایت…… را قرار بدهید.
• قالب برای نوشته ها: در ادامه برای نوشته ها یا مقالات خود باید یک قالب از نوع صفحه با المنتور طراحی کنیم تا از این به بعد مقالات ما به شکل قالبی که طراحی کردیم انتشار داده شود. به این علت این کار را انجام میدهیم که وقتی خواستیم یک تغییری را در ظاهر مقاله ها ایجاد کنیم مجبور نباشیم تک به تک ویرایش کنیم. هدر و فوتر قالب نوشته ها می تواند همانند صفحه اصلی باشد یا اینکه به صورت جداگانه برای آن هدر و فوتر در نظر بگیریم. روش اجرایی ساخت قالب: قالب ها / افزودن جدید / نوع قالب را میزاریم (( پست تکی )) /  نام را میزاریم مثلا قالب مقالات / در المنتور پرو کلی قالب هم وجود دارد که می توانیم انتخاب کنیم / اکنون می توانیم از کانتینرها استفاده کنیم به این صورت که یک کانتینر اصلی و دو عدد کانتینر در درونش که یکی برای مقاله است و دیگری برای سایدبار. برای سایر موارد مورد نیاز هم می توانیم کانتینر ها را اضافه کنیم. / حالا میتوانیم از این المان ها در نوشته های خود استفاده کنیم. المان عنوان نوشته را قرار میدیم و تگ H1 را براش در نظر میگیریم . /  سپس المان اطلاعات پست را قرار میدهیم (شامل نام نویسنده ، تاریخ…) / المان دکمه های اشتراک گذاری، المان جعبه نویسنده، المان محتوای نوشته،المان ارسال نظرات و …… را اضافه می کنیم./ اکنون بعد از انتشار در قسمت کاندیشن گزینه تکی را انتخاب میکنیم یعنی برای تمام پست ها. برای استفاده از المان مسیر راهنما حتما باید افزونه سئو نصب باشد. برای نوشته ها می توانیم متناسب با سلیقه خود طراحی های متفاوتی داشته باشیم. در نوشته ها معمولا  از سایدبار استفاده میکنند. پس ما قبلا ساید بار را ساختیم و آن را در قالب نوشته ها فراخوانی میکنیم. نکته: اگر بخواهیم به صورت پیش فرض تمام نوشته های ما در یک قالب مشخص انتشار بیابند / باید بعد از ساخت قالب/ در تنظیمات پوسته / طرح بندی صفحات / در قسمت نوشته ها / قالب مد نظر را انتخاب کنیم.( البته این مسیر ممکن است در قالب های مختلف متفاوت باشد). به صورت جداگانه هم می توانیم برای هر نوشته مشخص کنیم که با چه قالبی انتشار پیدا کند. اکنون بعد از اینکه در قسمت افزودن نوشته، نوشته ی خود را ایجاد کردیم و انتشار را زدیم، این محتوا در قالب مد نظر ما انتشار داده می شود. نکته بسیار مهم : هر محتوایی که ایجاد کردید حتما در گوگل کنسول به گوگل اطلاع رسانی کنید چون ممکن است خزنده های گوگل چندین روز طول بکشد تا سایت شما را بررسی کنند و در این مدت افراد سود جو می توانند مقاله شما را کپی و در وب سایت خودشان قرار دهند و حتی ممکن است سایت آنها زودتر بررسی شود. در این صورت محتوای آنها اصلی و محتوای شما کپی می شود. هم چنین ما می توانیم برای نوشته های خودمان هدر و فوتر جداگانه در نظر بگیریم. به صورت پیش فرض هدر و فوتری که قبلا طراحی کردیم برای نوشته ها استفاده میشود. نمایش مطالب مرتبط: برای این کار از المان پیمایشگر استفاده میکنیم. اگر نوشته های ما دارای دسته بندی باشند می توانیم مشخص کنیم که برای این نوشته، نوشته هایی که در دسته بندی مدنظر ما قرار دارند به عنوان مطالب مرتبط نمایش داده بشوند.آموزش جامع طراحی سایت را در دوره آموزشی شغل من به صورت عملی یاد بگیرید.
• قالب سایدبار: در نوشته ها ما ساید بار را می توانیم داشته باشیم. ساید بار هم از جمله موارد تکرار شونده است که باید از نوع بخش با المنتور برای آن یک قالب بسازیم تا بتوانیم در هر جایی که دوست داریم با المان خودش از آن استفاده کنیم. معمولا از ساید بار در صفحه اصلی استفاده نمیکنند و بیشتر در مقالات استفاده میکنند. در سایدبار می توانیم هر آنچه که نیاز داریم را بسازیم. طراحی این قسمت بستگی به ذوق و سلیقه شما دارد. برای ساخت سایدبار یک قالب جدید اضافه میکنیم و نوع آن را (بخش) انتخاب میکنیم. و بعد از طراحی آن را در قالب مقاله ها یا همان قالب محتوا فراخوانی می کنیم. برای چسباندن سایدبار از قسمت پیشرفته و موشن افکت عمل میکنیم و برای اینکه هنگام اسکرول سایدبار زیر هدر نرود و حتی روی فوتر قرار نگیرد باز هم می توانیم از آنجا تنظیمات را انجام دهیم. به این صورت که در کل قالب از قسمت موشن، حالت چسبان بالا را انتخاب و مقداری انحراف در نظر میگیریم و گزینه ماندن در ستون را میزنیم. نکته: بهتر است برای طراحی صفحات مقاله ها و محصولات از صفحه ساز استفاده نکنیم چون ممکن است در آینده بخواهیم از صفحه ساز دیگری استفاده کنیم. البته ما در اینجا برای راحتی بیشتر با صفحه ساز می سازیم. نکته مهم: بعضی از قالب ها امکان ساخت هدر، فوتر، سایدبار، قالب ها و …… را دارند ولی ما در اینجا برای راحتی و درک بهتر، تمام موارد را با صفحه ساز المنتور میسازیم. چون ممکن است شما از قالب های متفاوتی استفاده کنید و این باعث سردرگمی می شود.پس ما از المنتور استفاده میکنیم.
• قالب برای برچسب ها تعداد استاندارد برچسب برای هر نوشته بین 2 تا 5 عدد می باشد. برچسب ها را برخلاف دسته بندی ها به صورت جدا نمیسازیم. برچسب ها نسبت به دسته بندی ها جزئی تر هستند. هر عنوانی را که در دسته بندی ها نتوانیم قرار دهیم در برچسب ها قرار می دهیم. ما میتوانیم در نوشته خود از سمت چپ برچسب ها را اضافه کنیم. با اضافه کردن برچسب در نوشته ها به صورت اتوماتیک این برچسب ها در پیشخوان/ و برچسب اضافه میشوند. اکنون در برگه دیگر می توانیم از برچسب جدید یا از برچسب هایی که قبلا ساختیم استفاده کنیم. اگر از یک برچسب در دو نوشته استفاده کرده باشیم،با کلیک کردن روی برچسب هر دو نوشته را می توانیم ببینیم. روش اجرایی: دقیقا همانند ساخت قالب برای دسته بندی ها عمل می کنیم. حتی می توانیم از قالب دسته بندی یک کپی بگیریم و نام آن را به قالب برچسب ها تغییر دهیم. اگر خواستیم یک قالب جدید در نظر بگیریم همانند قالب دسته بندی ها از قسمت پیشخوان / قالب محتوا / باید یک قالب ایجاد کنید.
• قالب محصول قبل از ساخت قالب برای محصول ابتدا یک محصول را با تمام جزئیات از قسمت پیشخوان / محصول /  افزودن محصول جدید ایجاد کنید و بعد اقدام به ساخت قالب کنید تا عملکرد بهتری داشته باشید. روش اجرایی ساخت قالب محصول : اگر بخواهید با المنتور بسازید می توانید از قسمت پیشخوان / قالب های ذخیره شده / افزودن قالب جدید را کلیک کنید و در نوع قالب گزینه محصول تکی را انتخاب کنید. یک سری تم ها به ما نشان می دهد که می توانیم از آنها استفاده کنیم ولی مادر اینجا قرار است خودمان ایجاد کنیم./ پس نوع طرح(( محصول تکی)) و نام طرح را ایجاد میکنیم / و ایجاد طرح را کلیک میکنیم. سپس با المنتور قالب خود را طراحی میکنیم. اگر در این قسمت ویرایش گر المنتور را نداشتیم میرویم از تنظیمات المنتور را اضافه می کنیم / حالا ویرایش روی طرحی که ایجاد کردیم را میزنیم / و در آن صفحه ویرایش با المنتور را کلیک میکنیم. از اینجا به بعد با توجه به سلیقه خودمان طراحی را انجام میدهیم و از المان هایی مثل مسیرپیمایش،گالری محصول،آیکون باکس، توضیحات کوتاه محصول، قیمت محصول، افزودن به سبد خرید و ……می توانیم استفاده کنیم.
• قالب فهرست دسته بندی محصولات  قبل از ساخت فهرست دسته بندی باید دسته بندی را ایجاد کنیم. هر دسته بندی محتوای 1000 تا 2000 کلمه ای داشته باشد. هم چنین می توانیم برای ساخت دسته بندی از قسمت محصولات /  دسته بندی ها / دسته و زیر دسته های خود را ایجاد و از آن استفاده کنیم. برای طراحی فهرست دسته بندی از بخش استفاده میکنیم. طراحی بخش سلیقه ای است. می توانیم در اینجا از آیکون ها هم استفاده کنیم. مثلا برای سمت راست فهرست می توانیم از آیکون های سایت Flat icons استفاده کنیم، نکته ای که وجود دارد این است که فایل ها png هستند و باید آنها را به svg تبدیل کنیم. برای این کار از سایت convertio.co استفاده میکنیم. ممکن است فایل های svg حاوی کد مخرب باشد، بنابراین می توانیم از افزونه safe SVG استفاده کنیم که در مخزن وجود دارد. به دسته بندی ها می توانیم تگ h2 بدهیم. اکنون می توانیم لینک دسته بندی های ایجاد شده در بالا را در فهرست دسته بندی استفاده کنیم.  بعد از اینکه طراحی به اتمام رسید اکنون می توانیم در برگه مد نظرمان المان قالب را انتخاب کنیم و در این المان، قالب ساخته شده را فراخوانی میکنیم. نکته: المان های عنوان نوشته، مسیر راهنما و … را هم می توانیم برای دسته بندی قالب در نظر بگیریم. اضافه کردن دسته بندی در منو سایت : نمایش / فهرست ها/ یک منو اضافه میکنیم/  به نام ((دسته بندی)) / و یک # هم میزاریم در قسمت نشانی اینترنتی / حالا در تنظیمات بالای صفحه / دسته بندی محصولات را فعال کنید/ اکنون در ((افزودن گزینه های فهرست)) / در قسمت دسته های محصولات /دیدن همه / میتوانیم انتخاب کنیم. بعد از انتخاب می توانیم آنها را در زیر منوی ((دسته بندی)) به صورت سلسله مراتبی اضافه کنیم.به دلیل اینکه منو سایت در جاهای مختلف استفاده میشود اضافه کردن فهرست دسته بندی در منو سایت از لحاظ سئو مفید است.
• قالب ویدیو با المنتور یک قالب محتوای دیگر می سازیم / بعد از طراحی در قسمت کاندیشن مشخص میکنیم که برای برچسب ویدیو در نظر گرفته بشود. در صورتی که کمتر از 10 ویدیو داشتیم از پلیر المنتور استفاده میکنیم ولی اگر بیشتر بود می توانیم از افزونه پارس پلیر استفاده کنیم. اگر قرار باشد نمایش ویدیو و صوت به صورت رایگان باشد میتوانیم لینک آن را از هاست دانلود کپی و در جایی که مد نظرمون هست استفاده کنیم برای این کار می توانیم از المان ها استفاده کنیم. اگر رایگان نباشد این لینک را در ووکامرس و در محصول مورد نظر قرار می دهیم. به دلیل نداشتن سازگاری مناسب پلیر وردپرس با هاست دانلود می توانیم از افزونه JW Player استفاده کنیم. این افزونه امکانات زیادی دارد از جمله سازگاری با مرورگرها و نمایش پوستر برای ویدیو. (در تنظیمات این افزونه نوع نوشته را post و page انتخاب میکنیم. موقعیت پخش کننده ویدیو را سفارشی و نوع پیوست پخش کننده را واکنش گرا انتخاب میکنیم البته تنظیمات دیگری هم دارد که می توانیم لحاظ کنیم. بعد از وارد کردن لینک ویدیو، شورت کد را کپی و در یک المان متنی قرار میدهیم. ( دقت کنید که شورت کدها را سعی کنید در بخش متنی المان متنی قرار بدید و در بخش دیداری وارد نکنید ). در قسمت نمایش جزئیات این پلیر می توانید در قسمت منابع بیشتر ویدیو را با کیفیت های متفاوت قرار بدید یا حتی برای آن پوستر هم در نظر بگیرید. از قسمت + هم میتوانید ویدیوهای بیشتری اضافه کنید. ویدیو ها باید با فرمت mp4 باشد. پخش صوتی: برای این قسمت هم می توانیم از افزونه Audioigniter pro استفاده میکنیم.

ساخت انواع برگه ها با المنتور

ایجاد برگه اصلی: ابتدا از پیشخوان وردپرس و در بخش برگه ها، یک برگه جدید ایجاد می کنیم و بعد می توانیم این برگه را با المنتور طراحی کنیم. اینکه در برگه اصلی از چه المان هایی می خواهید استفاده کنید کاملا بستگی به ذوق و سلیقه و کسب و کاری است که تصمیم دارید راه اندازی کنید. بعد از طراحی و انتشار برگه اصلی، اگر در ادامه سایت را مجدد لود کنیم چیزی نمی بینیم / باید در اینجا در قسمت پیشخوان/ تنظیمات/ خواندن / یک برگه یکتا را انتخاب کنیم / و در لیست کشویی صفحه نخست باید صفحه اصلی را انتخاب کنیم ( این برگه می تواند هر عنوانی داشته باشد)/ ذخیره تغییرات / اکنون می توانیم با لود کردن آدرس سایت صفحه اصلی را ببینیم. نکته: ما قسمت های تماس با ما، درباره ما، خدمات ما و…….. را در برگه ها انتشار می دهیم ولی مقاله ها را در نوشته ها.

• صفحه اصلی  domain.com\ home
• برگه سیاست حفظ حریم خصوصی   domain.com \privacy-policy
• برگه قوانین و مقررات domain.com \Terms and Conditions
•  تماس با ما domain.com\contact us
• درباره ما domain.com\about
• برگه وبلاگ domain.com\blog
• نظرات مشتریان domain.com \Testimonial
• برگه  محصول domain.com \Product
• ما می توانیم متناسب با نیاز خود برگه های مختلفی را بسازیم

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

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