آموزش افزونه المنتور – Elementor

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

چرا باید حتما یک منو در سایت داشته باشیم؟

یک سوال بسیار مهم این هست که ما چرا باید یک منو در  سایت داشته باشیم؟ و برای ما فایده ای خواهد بود. دقت داشته باشید که داشتن یک منو در سایت خود هیچ کمکی به ما نمی کند! اما این یک تجربه بسیار خوب برای کاربر خواهد بود تا بتواند به تمامی بخش های  سایت با یک منو دسترسی داشته باشد. یعنی کاربر با استفاده از این منو می‌تواند به تمامی دسته‌بندی‌های نوشته ها و یا محصولات فقط در یک بخش دسترسی داشته باشد که این از لحاظ تجربه کاربری بسیار کار پسندیده و از لحاظ سئو بسیار بسیار تاثیر دارد. پس توصیه می کنیم در هر سایتی که طراحی میکنید یک منو در هدر سایت قرار دهید.

آموزش ساخت منو با المنتور

و حالا نوبت به این می‌رسد که ما شروع کنیم و یک منو در المنتور ایجاد کنیم. برای ساخت منو در المنتور ما تمامی مراحل را به صورت شماره بندی شده انجام می دهیم تا شما هم براحتی هیچ مشکلی در ایجاد منو نداشته باشید.

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

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

1 – ساخت بخش سربرگ در المنتور

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

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

2 – ساخت فهرست در وردپرس

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

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

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

3 – قرار دادن منو در هدر سایت

در سومین مرحله ما باید منو یا فهرستی که ساختیم را در سایت نمایش دهیم، برای این منظور باز هم به ویرایشگر المنتور یعنی همان سربرگی که با ویرایشگر المنتور برا ما باز شد، بروید. در این بخش می‌توانید از هر ابزارک یا المان المنتور استفاده کنید.

ما به صورت پیشفرض یک ردیف 2 ستونه ایجاد می کنیم و در سمت راست لوگوی سایت را قرار می دهیم و در سمت چپ منوی خود را ایجاد می کنیم.

حالا شما ستونی را که می خواهید منو در این ستون نمایش داده شود را انتخاب کنید و از بخش ابزارک های المنتور ابزارک فهرست ناوبری را بکشید و در ستون مورد نظر رها کنید.

سپس در بخش ابزارک ها یک بخش تنظیمات برای شما باز میشود که تنظیمات این بخش را همانند تصویر زیر انجام دهید.

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

جمع بندی

منو یا فهرست یک بخش مهم و اساسی در هر سایت و اپلیکیشن های موبایل هست و با این کار کاربر می‌تواند به تمامی بخش ها یا دسته بندی های مختلف فقط در یک بخش دسترسی داشته باشند که این می تواند یک تجربه بسیار خوب برای کاربر ایجاد کند تا به تمامی بخش ها فقط در عرض چند کلیک دسترسی داشته باشد.

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

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

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

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

آموزش ساخت صفحه وبلاگ در المنتور

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

مرحله اول : ساخت برگه وبلاگ

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

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

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

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

مرحله دوم : طراحی صفحه وبلاگ با المنتور

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

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

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

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

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

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

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

چرا باید فونت فارسی برای المنتور اضافه کنیم؟

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

آموزش افزودن فونت به المنتور

در این آموزش همراه ما باشید تا فونت های فارسی با انواع وزن ها را به المنتور اضافه کنیم.

مرحله اول : دانلود فونت های فارسی برای المنتور

در اولین مرحله ما فونت های فارسی برای شما آماده کردیم که می‌توانید در زیر به این فونت های فارسی دسترسی داشته باشید و این فونت ها را دانلود کنید. در اینجا ما فونت وزیر را با انواع وزن ها در زیر قرار داده ایم که شما به راحتی می توانید روی دکمه زیر کلیک کنید و دانلود نمایید.

[su_button url=”http://dl.aylinweb.com/extras/Farsi-font-aylinweb.zip” target=”blank” style=”flat” background=”#5eff3b” color=”#000″ size=”8″ center=”yes” radius=”5″ icon=”icon: download” icon_color=”#3c2222″ text_shadow=”0px 0px 0px “]دنلود فونت های فارسی برای المنتور[/su_button]

بعد از اینکه فونت ها را دانلود کردید، این فایل زیپ را درون پوشه قرار دهید و از حالت فشرده خارج کنید.

مرحله دوم : نصب فونت ها در المنتور

در مرحله دوم ما باید فونت های دانلود شده را در المنتور قرار بدهیم. برای این کار در پیشخوان وردپرس بعد از اینکه شما افزونه های المنتور را نصب کردید به منوی المنتور » فونت های سفارشی یا Custom Fonts کلیک کنید.

در صفحه ای که برای شما باز می شود بر روی دکمه افزودن جدید کلیک کنید.

سپس بعد از اینکه یک نام در بالا برای فونت خود انتخاب کردید بر روی دکمه افزودن فونت متغیر کلیک کنید. (این نام همان نامی هست که شما در ویرایشگر المنتور در بخش تایپوگرافی در بین فونت های نصب شده خواهید دید. پس حتماً یک نام با معنی قرار بدهید تا بتوانید در بین فونت ها به این فونت دسترسی داشته باشید)

بعد از اینکه روی دکمه کلیک کردید، در بخش وزن شما باید یک وزن برای فونت خود انتخاب کنید چون ما می خواهیم که چهار نوع وزن را به این بخش اضافه کنیم می توانیم روی 100، 300، 600 و 900 تنظیم کنیم. یعنی اگر کاربر روی 100 کلیک کرد ضخامت فونت بسیار نازک تر شود و بر روی  300 کلیک کرد یکم ضخیم شود و الی آخر. پس ما اول فونت خیلی نازک را روی 100 قرار می دهیم.

سپس در زمینه های فایل WOFF و همچنین فایل TTF فونت مورد نظر خود را آپلود کنید.

نکته مهم : به این نکته توجه داشته باشید، فونتی که برای دانلود قرار داده ایم دارای چهار وزن است که در زیر این وزن‌ها را توضیح دادیم.

• Vazir-Thin-FD : وزن بسیار نازک
• Vazir-Medium : وزن نرمال
• Vazir-Light-FD :وزن نازک
• Vazir-FD : وزن معمولی
• Vazir-Bold-FD : وزن ذخیم

حالا ما برای فونت خیلی نازک باید از “Vazir-Thin-FD” استفاده کنیم و الی آخر …

بعد از اینکه فونت خیلی نازک انتخاب کردید باز هم بر روی دکمه افزودن فونت متغیر کلیک کنید.(برای اضافه کردن وزن فونت های دیگر یعنی شما برای هر وزن باید یک بار برای این دکمه کلیک کنید).

خب، حالا ما چهار وزن فونت را انتخاب کردیم و بعد از انتخاب باید بر روی دکمه انتشار در سمت چپ کلیک کنید تا تنظیمات ذخیره شوند. باید همانند تصویر بالا یک پیش نمایش از وزن فونت ها به شما بدهد و در تصویر بالا وزن خیلی نازک با وزن 100 و نازک 300، نرمال 600 و Bold هم ذخیم هست. و اگر شما هر فونتی را انتخاب کنید اینجا باید پیش نمایش فونت برای شما نمایش داده شود.

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

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

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

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

در افزونه المنتور یک ابزارکی هست با نام بخش داخلی یا inner section که شما با این بخش داخلی می توانید ستون ها و سکشن های در صفحه قرار بدهید و این بخش‌ها را به چندین ستون تقسیم کنید. اما این در حالتی هست که شما حتماً باید دو بار از این بخش داخلی استفاده کنید و بیش از ۲ بار در المنتور وجود ندارد یعنی شما میتوانید یک سکشن دو ستون ایجاد کنید و داخل هر ستون یک بخش داخلی قرار بدهید و بیشتر از این امکان ندارد و باید حتماً ادامه مقاله همراه ما باشید.

مرحله اول : نصب افزونه های مورد نیاز

در این مرحله ما به یک افزودنی برای المنتور نیاز داریم که نام این افزودنی “Unlimited Elementor Inner Sections By TaspriStudio” هست و شما حتماً باید این افزودنی را در داخل وردپرس نصب کنید. برای این کار می‌توانید روی نام افزونه در زیر کلیک کنید و این افزونه را از مخزن وردپرس نصب کنید.

• افزونه Unlimited Elementor Inner Sections By TaspriStudio

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

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

در مرحله دوم شما یک صفحه را با ویرایشگر المنتور باز کنید که این می توانند صفحه اصلی شما باشد یا یکی از صفحات سایت و حتی می‌تواند یکی از نوشته ها باشد. سپس در صفحه ویرایشگر المنتور بر روی آیکون علامت مثبت کلیک کنید و یک ردیف دو ستونه ایجاد کنید.

سپس داخل هر کدام از ستونها یک المان یا ابزارک بخش داخلی را قرار بدهید، یعنی باید همانند تصویر زیر 2 ستون که داخل هر ستون یک ابزارک بخش داخلی هست، وجود داشته باشد.

سپس روی یکی از ابزارک های بخش داخلی (ستون های ابزارک) کلیک راست کنید، و یک منوی جدیدی با عنوان “Add Nested Section” اضافه شده که روی این منو کلیک کنید.

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

همانطور که در تصویر بالا مشاهده می کنید ما پنج بخش داخلی تودرتو در المنتور ایجاد کردیم.

 فیلم آموزشی

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

وقتی شما برای اولین بار طراحی سایت با المنتور را شروع می کنید در حالت اولیه سایت خود را می توانید در سه حالت تبلت موبایل و دسکتاپ طراحی کنید و بنابر انتخاب شما، سایت یا صفحه در انواع دستگاه ها به صورت رسپانسیو نمایش داده می شود. اما یک مشکل این است که وقتی شما سایت را در حالت دسکتاپ طراحی می کنید این سایت و صفحه در دسکتاپی (سیستمی) که شما طراحی می کنید بر اساس این رزولوشن طراحی میشه و اگر شما در حالت مانیتور و رزولوشن ۱۹۲۰ در ۱۰۸۰ طراحی کنید، سایت شما در مانیتورهای ۱۳۶۶ در ۷۶۸ با کمی مشکل و فاصله ها نمایش داده می شود. پس حتما باید سایت در انواع مانیتور ها و موبایل ها به خوبی نمایش داده شود.

آموزش ساخت رزولوشن و اندازه دلخواه برای صفحات نمایش در المنتور (روش اول)

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

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

رایانه های رومیزی و لپ تاپ ها:

• مانیتورهای (4K) یا (4 کی) : 3840 × 2160
• مانیتورهای FullHD یا فول اچ دی : 1920 × 1080
• مانیتورهای پیش ساخته : 1366×768، 1440×900، 1680×1050
• مدل های قدیمی: 1280×720

تبلت ها و تلفن های هوشمند:

• آیپد پرو و تبلت های حرفه ای اندرویدی : حداکثر 1066 × 1366
• iPad و تبلت های قدیمی اندروید : 768×1024
• تلفن های برتر آیفون و اندروید : حداکثر 420×800
• گوشی های میان رده آیفون و اندروید: 360×640 تا 375×800
• تلفن های قدیمی آیفون و اندروید : به 320 × 500 رسیده است

تا اینجا ما با تمامی رزولوشن های استاندارد آشنا شدیم و در مرحله بعدی می پردازیم به اینکه ما این اندازه ها و رزولوشن هایی که در المنتور وجود ندارند را به المنتور اضافه کنیم پس حتما در ادامه همراه ما باشید.

مرحله اول : نصب افزونه های مورد نیاز

در اولین مرحله ما حتماً باید افزونه های مورد نیاز خود را نصب کنیم، همه این افزونه ها به صورت رایگان در سایت آیلین وب موجود هستند و می توانید به راحتی روی هر افزونه کلیک و دانلود کنید. (برای دانلود رایگان روی افزونه ها کلیک کنید).

• افزونه المنتور پرو
• افزونه Custom Mobile Breakpoints Pro for Elementor Pro

مرحله دوم : ایجاد رزولوشن و اندازه های دلخواه

بعد از اینکه افزونه های مورد نیاز خود را نصب کردیم باید بپردازیم به اینکه اندازه های خود را به صورت دستی وارد کنیم. وقتی شما افزونه‌ها را نصب کردید، در پیشخوان وردپرس منوی جدیدی به عنوان “Breakpoint ” اضافه می‌شود که شما روی این منو کلیک کنید.

در صفحه ای که برای شما باز می شود می توانید به راحتی اندازه های خود را وارد کنید. در این بخش می توانید در سمت راست انواع اندازه هایی که به صورت پیش فرض برای افزونه فعال یا غیر فعال کنید. وقتی شما افزونه رو نصب می کنید به صورت پیشفرض ۱۸ اندازه به صورت استاندارد برای شما ظاهر می شود که می توانید هر کدام را خواستید غیرفعال کنید.

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

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

بعد از اینکه اندازهای خود را وارد کردید در آخر باید روی دکمه به روز رسانی کلیک کنید تا تنظیمات شما ذخیره شوند.

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

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

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

آموزش ساخت رزولوشن و اندازه دلخواه برای صفحات نمایش در المنتور (روش دوم و پیشنهادی)

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

چرا از 2 روش استفاده شده؟

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

در روش دوم که روش پیشنهادی ما هم هست شما می‌توانید بعد از اینکه رزولوشن ها و اندازه های دلخواه خود را وارد کردید تنظیمات فاضل ها و اندازه ها را برای هر رزولوشن در تنظیمات المنتور انجام دهید و فعلاً بهترین روش برای تنظیم واکنش گرایی در المنتور هست.

مرحله اول : نصب افزونه های مورد نیاز

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

• افزونه المنتور پرو
• افزونه Master Addons for Elementor
• افزونه Custom Breakpoints for Elementor

همه افزونه به صورت رایگان هستند و می توانید روی هر کدام از آنها کلیک کنید.

مرحله دوم : ایجاد و وارد کردن اندازه ها و رزولوشن های دلخواه

بعد از اینکه افزونه ها را نصب کردید در پیشخوان وردپرس منوی ظاهر می شود که عنوان منو هست “Master Addons“، موس را بیاورید روی این منو و “Breakpoints” را انتخاب کنید.

در صفحه ای که برای شما ظاهر می شود بر روی دکمه “Add Brekpoint”  کلیک کنید و یک بخشی با 3 فیلد برای شما باز می شود در بخش اول همانند تصویر زیر یک نام برای صفحه نمایش خود انتخاب کنید و در بخش بعدی باید اندازه یا طول صفحه نمایش را وارد کنید و در آخر روی  “Save Brekpoints” کلیک کنید.

در این بخش می توانید اندازه های دلخواه خود را وارد کنید و محدودیتی هم در این اندازه ها ندارید و می توانید به تعداد خیلی زیادی اندازه های صفحه نمایش برای این بخش وارد کنید.

مرحله سوم : استفاده از اندازه ها در المنتور

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

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

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

 

فیلم آموزشی

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

چرا منوی سایت باید واکنش گرا باشد؟

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

آموزش ساخت منوی واکنش گرا مخصوص موبایل در المنتور

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

پیشنیاز های آموزش

1. افزونه المنتور رایگان
2. افزونه المنتور پرو

مرحله اول : ساخت بخش سربرگ سایت

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

در پیشخوان وردپرس در منو ها روی قالب ها بیاید و روی افزودن جدید کلیک کنید.

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

مرحله دوم : نمایش حالت موبایل

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

سپس در بین ابزارک های المنتور ابزارک آیکون را در جای مورد نظر که می خواهید آیکون منو نمایش داده بشه قرار بدهید.

سپس در بخش محتوای آیکون به بخش آیکون ها بیاید و آیکون 3 خط را انتخاب کنید که می توانید در بخش جستجوی آیکون ها، عبارت “Bar” را سرچ کنید و همانند تصویر زیر آیکون مورد نظر برای منو را انتخاب کنید.

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

در آخر تا این مرحله شما باید شکلی همانند تصویر زیر داشته باشید.

پس اگر تا این مرحله را درست پیش رفتید به مرحله سوم بروید.

مرحله سوم : ساخت منوی سفارشی

در این مرحله ما باید بپردازیم به طراحی المان‌های منویی که می‌خواهیم برای کاربر نمایش داده شود.

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

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

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

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

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

مرحله چهارم : طراحی المان های منو

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

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

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

مرحله پنجم : افزونه پنل منو به آیکون منو

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

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

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

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

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

 

فیلم آموزشی