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

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

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

چگونه المان ­ها را به صفحه اضافه کنیم؟

راحت ­ترین روش اضافه کردن ابزراک ­های المنتور به صفحه ویرایش محتوا کلیک بر روی علامت (+) در ردیف یاستونی است که می خواهید المان را در آن قرار دهید. حالا از پنل سمت راست المان موردنظر خود را با ماوس انتخاب و آن را درون صفحه رها کنید (Drag&Drop). راه دیگر برای نمایش المان ها کلیک بر روی آیکون (:::) در نوار بالای پنل تنظیمات است. با این کار شما در همه صفحات و هر تنظیمی که باشید به دسته ­بندی ویجت ­ها هدایت می­شوید.

انواع المان ­ها در المنتور

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

المان ­های پایه

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

• بخش داخلی

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

• سربرگ

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

• تصویر

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

• ویرایشگر متن

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

• ویدیو

ویجت ویدیو از دیگر المان­ های پرکاربرد وب ­سایت است که باعث افزایش زمان ماندن کاربر در سایت می ­شود. پس از انتخاب این المان از جعبه بازشونده منبع، نوع منبعی که ویدیو باید از آنجا به نمایش گذاشته شود را انتخاب کنید. در این قسمت 4 روش یوتیوب، ویمئو، دیلی موشن و از هاست خودتان وجود دارد. به­خاطر داشته باشید بهترین روش برای آپلود ویدیو استفاده از هاست دانلود است و سپس قرار دادن آدرس لینک در جعبه لینک خارجی.

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

منوی محتوا برای المان ویدیو شامل گزینه­ های فوق­ العاده برای تنظیم زمان پخش و دانلود ویدیو می ­باشد.

• 

  دکمه

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

• فاصله­ گذار

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

• جداکننده

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

• نقشه گوگل

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

• آیکن

آیکن­ ها جزء ابزارهای گرافیکی جذابی هستند که توجه کاربران را به خود جلب می­کنند. المان آیکن به کتابخانه سایت Font Awesome متصل است و امکان استفاده از آیکن ­ها را برای شما فراهم می­کند.

المان ­های پرو

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

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

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

• نوشته ­ها

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

• نمونه کارها

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

• گالری

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

• 

  فرم

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

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

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

• ورود

این المان برای صفحه ورود به سایت کاربرد دارد و شامل دو فیلد “نام کاربری” و “پسورد” و یک دکمه ورود است. شما می ­توانید فرم ورود به سایت را مطابق سلیقه و هماهنگی با صفحات دیگر سفارشی کنید.

• اسلاید

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

• فهرست ناوبری

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

• عنوان متحرک

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

• Hotspot

المان هات ­اسپات برای نشانه­ گذاری بر روی تصویر به کار می­رود. با این کار می­توانید بازدیدکنندگان سایت را متوجه نقطه خاصی در تصویر کنید. امکان افزودن چند Hotspot به یک تصویر نیز وجود دارد.

• لیست قیمت

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

• جدول قیمت

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

• باکس چرخشی

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

• کنترل کاروسل

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

• بازدیدها

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

• کاروسل نظرات مشتریان

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

• شمارش معکوس

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

• نقل قول

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

• نمایش تصویر Lottie

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

• نمایش کد

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

المان­ های کلی

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

المان­ های سایت

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

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

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