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

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

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

افزونه صفحه ساز المنتور چیست

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

محیط المنتور

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

طراحی صفحه اصلی سایت با المنتور

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

1- بعد از وارد شدن به صفحه‌ای که قصد طراحی و یا ویرایش آن را دارید، بر روی دکمه ” ویرایش با المنتور ” یا ” Edit with Elementor ” کلیک کنید.

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

ویرایش با المنتور ” یا ” Edit with Elementor

2- در این مرحله در صفحه ویرایشگر Elementor دو بلوک را مشاهده می‌کنید که یادآور Customizer ( سفارشی سازی ) است. در تصویر پایین می‌توانید برگه‌های مربوط به Elements (1) و Global (2) را مشاهده کنید ، به این ترتیب می‌توانید تنظیمات اصلی صفحه دلخواه را تغییر دهید و ماژول‌های محتوا را برای افزودن و ویرایش انتخاب کنید.

صفحه ویرایشگر Elementor

صفحه ویرایشگر المنتور اصلی

 المان‌های پایه المنتور

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

برای ایجاد بخش یا سکشن در المنتور شما 2 راه دارید :

روش اول :

ابتدا روی آیکون مثبت در صفحه ایجاد شده کلیک کنید و سپس تعداد ستون های بخش خود را با کلیک بر روی آیکون “+” یک بخش ایجاد کنید.

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

+ افزودن ستون به صفحه سایت

حالا شما این امکان را دارید که ستون را انتخاب کنید. 1 تا 12 ستون برای شما موجود است. بر اساس طرح خود، می توانید ستون را برای بخش خود انتخاب کنید.

ایجاد بخش یا سکشن در المنتور

ساختار خود را ایجاد کنید

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

ستون در ویرایشگر المنتور

تنظیمات ستون در المنتور

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

تنظیمات ویرایش ستون در المنتور

تنظیمات ستون

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

می توانید برای ستون اول 50 درصد، برای ستون دوم 20 درصد و آخرین 30 را تنظیم کنید. این به طراحی شما بستگی دارد. همچنین می توانید عرض ستون های مختلف را برای دستگاه های مختلف اضافه کنید. یک آیکون دستگاه وجود دارد که در آن می توانید دستگاه‌های مختلف مانند دسکتاپ، تبلت یا موبایل را انتخاب کنید و عرض ستون را برای یک دستگاه خاص تنظیم کنید.

تغییر تنظیمات طرح بندی ستون المنتور

تنظیمات تعداد و عرض ستون ها در ویرایشگر

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

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

حرکت ستون

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

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

جا به جا کردن ستون ها در المنتور

نحوه حذف یک ستون

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

نحوه حذف یک ستون در المنتور

اگر چندین ستون در یک بخش داشته باشید و یک ستون را حذف کنید، ستون‌ های دیگر مقدار عرض را دوباره تنظیم می ‌کنند. فرض کنید دو ستون با عرض 50 درصد وجود دارد و یک ستون را حذف کنید. سپس ستون بعدی 100% عرض خواهد داشت.

نحوه ایجاد یک ستون در داخل یک ستون دیگر

برای افزودن یک ستون در داخل یک ستون دیگر باید از ابزارک بخش داخلی استفاده کنید. در یک ستون، می توانید از چندین ستون با استفاده از بخش داخلی استفاده کنید. برای افزودن یک بخش داخلی، روی آیکون (+) داخل ستون کلیک کنید و سپس از داشبورد سمت راست، ابزارک بخش داخلی را بکشید و آن را در ستون رها کنید. این کار یک ستون در داخل ستون شما ایجاد می کند.

نحوه ایجاد یک ستون در داخل یک ستون دیگر

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

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

المان بخش داخلی

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

گزینه ناوبر (navigator) را فعال کنید تا بتوانید ساختار را واضح تر ببینید.

گزینه ناوبر (navigator) در المنتور

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

نحوه انجام تنظیمات ریسپانسیو در المنتور

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

نحوه انجام تنظیمات ریسپانسیو در المنتور

همچنین می‌توانید از ابزارهای زیر برای انجام تنظیمات ریسپانسیو سایت خود استفاده کنید.

۱. ابزار Breakpoint

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

۲. گزینه Responsive Option

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

۳. گزینه Responsive Styling

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

۴. گزینه Hide/Show Element

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

تنظیمات پایین صفحه

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

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

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

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

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