المان ها مهمترین و اصلی ترین آیتم در طراحی سایت با صفحه ساز قدرتمند المنتور هستند. درواقع بدون اضافه کردن المان های مناسب، فقط یک صفحه خالی پیش روی ما است. بنابراین شناخت المان ها و به کار بردن صحیح آنها یک امر ضروری در طراحی سایت محسوب می شود. عدم اطلاعات و دانش کافی در استفاده از ابزارک ها (ابزارک و ویجت نام های دیگر المان های المنتور هستند که ممکن است در دنیای طراحی سایت با آنها بسیار مواجه شوید) باعث طراحی سایت غیرحرفه ای میشود که در آن هیچ آیتمی در جای درست خود قرار نگرفته و فقط صفحه را پر کرده است.
در این مقاله که برگرفته از آموزش ویدیویی است که در ابتدای همین صفحه مشاهده می کنید با ابزارک های مختلف آشنا خواهید شد و کاربرد هرکدام را برای طراحی خلاقانه درک خواهید کرد.
چگونه المان ها را به صفحه اضافه کنیم؟
راحت ترین روش اضافه کردن ابزراک های المنتور به صفحه ویرایش محتوا کلیک بر روی علامت (+) در ردیف یاستونی است که می خواهید المان را در آن قرار دهید. حالا از پنل سمت راست المان موردنظر خود را با ماوس انتخاب و آن را درون صفحه رها کنید (Drag&Drop). راه دیگر برای نمایش المان ها کلیک بر روی آیکون (:::) در نوار بالای پنل تنظیمات است. با این کار شما در همه صفحات و هر تنظیمی که باشید به دسته بندی ویجت ها هدایت میشوید.
انواع المان ها در المنتور
همانطور که می دانید پنل سمت راست ویرایشگر المنتور به تنظیمات، المان ها و پیکربندی هر کدام از آنها اختصاص دارد. المانها به 6 گروه اصلی تقسیم شده اند و آیتم های هرکدام به صورت آکاردئونی باز و بسته میشوند. در ادامه نسبت به این ابزارک ها شناخت کلی پیدا خواهید کرد. توجه داشته باشید که به دلیل تنوع المان ها آمورش همه آنها به صورت جزئی در اینجا امکان پذیر نیست. اما شما می توانید در طی مدت چند روز و با تمرین و پشتکار با نحوه ی کار تک به تک ویجت های منحصر به فرد المنتور و کاربردشان آشنا شوید.
المان های پایه
گروه المانهای پایه بنیاد و اساس ابزارک های المنتور هستند که البته استفاده از آنها در طراحی بخش های مختلف سایت ضرورت دارد.
- بخش داخلی
بخش داخلی یکی از پرکاربردترین المان های پایه است و برای ایجاد یک ردیف در ردیف اصلی و افزودن ستون های بیشتر در یکی از ستون های ردیف استفاده میشود.
- سربرگ
برای نمایش عنوان، تیتر یا متن برجسته در سایت خود از المان سربرگ استفاده کنید. پس از قرار دادن سربرگ در صفحه، متن مورد نظر آن را بنویسید. اندازه و چیدمان آن را نیز از تنظیمات سمت راست که حالا فقط مخصوص پیکربندی این المان است مشخص نمایید. یکی از ویژگی های جذاب ابزارک سربرگ، مشخص کردن تگ های HTML است که در سئو و بهبود رتبه سایت در گوگل تأثیر مثبت دارد. منوی استایل شامل تنظیمات بیشتری برای فونت، رنگ و حاشیه سربرگ نیز هست.
- تصویر
کمتر صفحه ای در سایت وجود دارد که از المان تصویر در آن بهره نبرید. درواقع صفحاتی که فقط از متن در آنها استفاده میشود جذابیتی برای کاربران ندارند و ممکن است باعث خستگی آنها شود. پس از افزودن المان تصویر به ویرایشگر زنده المنتور، از “کتابخانه پرونده های چندرسانه ای” وردپرس تصویر موردنظر خود را انتخاب کنید و سپس اندازه آن را تعیین کنید. در این قسمت میتوانید در صورت نیاز برای تصویر زیرنویس و پیوند نیز مشخص کنید تا در صورت اینکه کاربر بر روی آن کلیک کرد به صفحه هدف شما هدایت شود. در منوی استایل المان تصویر تنظیمات اختصاصی برای حداکثر عرض، شفافیت تصویر و انحنا و گردی مرزهای تصویر را مشخص کنید.
- ویرایشگر متن
بلوک متنی به شما این امکان را می دهد که یک متن چندخطی با پاراگراف های مختلف را به صفحه اضافه کنید. پس از نوشتن متن از بخش تایپوگرافی نوع فونت و اندازه آن را تعیین کنید.
- ویدیو
ویجت ویدیو از دیگر المان های پرکاربرد وب سایت است که باعث افزایش زمان ماندن کاربر در سایت می شود. پس از انتخاب این المان از جعبه بازشونده منبع، نوع منبعی که ویدیو باید از آنجا به نمایش گذاشته شود را انتخاب کنید. در این قسمت 4 روش یوتیوب، ویمئو، دیلی موشن و از هاست خودتان وجود دارد. بهخاطر داشته باشید بهترین روش برای آپلود ویدیو استفاده از هاست دانلود است و سپس قرار دادن آدرس لینک در جعبه لینک خارجی.
ما در دوره آموزش هاست دانلود به طور کامل درباره روش بارگذاری ویدیو در هاست دانلود و سپس فراخوانی و مزایای استفاده از آن توضیح داده ایم. پیشنهاد میکنیم حتماً این دوره که رایگان در سایت ابزار وردپرس قرار داده شده است را مشاهده کنید و از قابلیت های هاست دانلود در راستای طراحی حرفه ای و افزایش سرعت لود سایت بهره مند شوید.
منوی محتوا برای المان ویدیو شامل گزینه های فوق العاده برای تنظیم زمان پخش و دانلود ویدیو می باشد.
دکمه
با کمک این المان میتوانید دکمه های زیبا با استایل های مختلف اضافه کنید. متن دکمه را در جعبه مشخص شده برای آن بنویسید و پیوند دکمه در زمان کلیک را هم تعیین کنید. همچنین اندازه، چیدمان، رنگ و نوع کادر آن نیز قابل سفارشی شدن است.
- فاصله گذار
برای ایجاد فاصله بین المان های مختلف از ابزارک “فاصله گذار“ استفاده کنید. میزان فاصله مورد نظر را در جعبه مربوط به آن با واحد پیکسل وارد کنید. یک روش تخصصی برای افزودن فاصله بین المان های مختلف استفاده از مارجین و پدینگ است که در جلسات آینده با این ویژگی ها و روش استفاده و کاربرد آنها بیشتر آشنا خواهید شد.
- جداکننده
المان جداکننده همانند فاصله گذار برای ایجاد فاصله بین قسمت های مختلف به کار می رود با این تفاوت که به جای فضای خالی، از خطوط با شکل های مختلف در آن استفاده میشود. استایلهای مختلف و زیبایی برای خط جداکننده در المنتور در نظر گرفته شده است که در جعبه بازشونده استایل قابل مشاهده و انتخاب هستند.
- نقشه گوگل
نمایش موقعیت و مکان جغرافیایی کسب و کارها یکی از متداول ترین آیتم هایی است که در بیشتر سایت ها و در صفحات تماس با ما یا درباره ما وجود دارد و باعث اعتماد حداکثری بازدیدکنندگان و کاربران سایت خواهد شد. المان نقشه گوگل به راحتی این کار را برای شما انجام می دهد. با توجه به سیاست های گوگل استفاده از این المان برای کاربران ایرانی محدود شده است. ما در جلسات بعدی کار با یک نقشه ی جغرافیایی کارآمد را به شما آموزش خواهیم داد.
- آیکن
آیکن ها جزء ابزارهای گرافیکی جذابی هستند که توجه کاربران را به خود جلب میکنند. المان آیکن به کتابخانه سایت Font Awesome متصل است و امکان استفاده از آیکن ها را برای شما فراهم میکند.
المان های پرو
با نصب افزونه المنتور نسخه پرو امکانات و ویژگی های زیادی برای طراحی راحت تر و حرفه ای خواهید داشت که المان های پرو یکی از آنها ست. ویجت های پرو واقعاً شگفت انگیز هستند و استفاده از آنها زیبایی ظاهری سایت را چندین برابر میکند.
توصیه میکنیم اگر تاکنون از نسخه رایگان المنتور استفاده کردهاید، از طریق لینک زیر افزونه المنتور پرو را دانلود کنید و از دنیای المنتور بیشتر لذت ببرید.
دانلود نسخه اورجینال المنتور نسخه پریمیوم
- نوشته ها
این المان برای نمایش نوشته های سایت به صورت گرید و جدول مورد استفاده قرار میگیرد. بدون شک در سایت های مختلف این ویژگی را مشاهده کرده اید و برای پیدا کردن نوشته مورد نظر خود با استفاده از دکمه های چپ و راست روی گرید به آن مطلب رسیده اید. حالا نوبت ان رسیده تا از این قابلیت در سایت خودتان نیز بهره مند شوید.
- نمونه کارها
نمایش نمونه کارها برای سایت های شرکتی و فروشگاهی نقش مهمی در جذب مشتری دارد. “ابزارک نمونه کار” همان است که شما برای نمایش زیبا و جذاب نمونه کارها یا محصولات به آن نیاز دارید.
- گالری
این المان به شما کمک می کند یک گالری تصویر ایجاد کنید و تصاویر مختلف را در معرض دید کاربران قرار دهید. پس از افزودن المان گالری، از کتابخانه پرونده های چندرسانه ای تصاویر موردنظر را انتخاب کنید و سپس فاصله بین ستون ها، چیدمان و نحوه مرتب شدن انها را تنظیم کنید.
فرم
فرم ها نقش غیرقابل انکاری در وب سایت دارند. با استفاده از المان فرم، انواع فرم تماس یا پیشنهادات را ایجاد کنید. خوب است بدانید که فرم ساز محبوب گرویتی فرم از بهترین و پرطرفدارترین فرم سازهای وردپرسی است. توصیه میکنیم از این افزونه برای تولید فرمهای حرفه ای در سایت خود استفاده کنید.
آموزش کامل گرویتی فرم به صورت ویدیویی و رایگان
فیلدهای پیش فرض المان فرم شامل نام، آدرس ایمیل و پیام میشود. اما شما میتوانید آیتم های بیشتری را به فرم اضافه کنید و حتی الزامی بودن آنها را مشخص نمایید.
- ورود
این المان برای صفحه ورود به سایت کاربرد دارد و شامل دو فیلد “نام کاربری” و “پسورد” و یک دکمه ورود است. شما می توانید فرم ورود به سایت را مطابق سلیقه و هماهنگی با صفحات دیگر سفارشی کنید.
- اسلاید
افزودن اسلایدر نقطه قوت سایت محسوب میشود. این ویژگی به راحتی با ابزارک اسلاید امکان پذیر است و شما می توانید برای هر اسلایدر چندین اسلاید با طرح، متن و تصاویر متفاوت اضافه کنید.
- فهرست ناوبری
ضرورت وجود منو در هر وب سایت اینترنتی برای دسترسی راحت و سریع کاربران به صفحه ها و قسمت های مختلف بر کسی پوشیده نیست. با المان “فهرست ناوبری“، یک منو برای سایت خود ایجاد کنید. به یاد داشته باشید که ابتدا می بایست در پیشخوان وردپرس و منوی “نمایش > فهرست ها” یک فهرست جدید ایجاد و سپس آن را در المان ناوبری فراخوانی کنید تا یک منوی زیبا در سایت داشته باشید.
- عنوان متحرک
این ویجت یک عنوان انیمیشنی در سایت قرار میدهد. در این المان متن برجسته و عبارت قبل و بعد آن را مشخص میکنید. سپس شکل موردنظر خود برای متن برجسته را نیز تعیین کنید تا عنوان به زیباترین شکل نمایش داده شود. استفاده از عنوان متحرک برای جلب توجه کاربران به تیترهایی که برایتان اهمیت بیشتری دارد بسیار مفید است.
- Hotspot
المان هات اسپات برای نشانه گذاری بر روی تصویر به کار میرود. با این کار میتوانید بازدیدکنندگان سایت را متوجه نقطه خاصی در تصویر کنید. امکان افزودن چند Hotspot به یک تصویر نیز وجود دارد.
- لیست قیمت
المان “لیست قیمت” برای نمایش قیمت محصولات یا خدمات مختلف در سایت های فروشگاهی، شرکتی و خدماتی به کار میرود.
- جدول قیمت
برای ایجاد یک یا چند جدول قیمت از طرح ها و سرویس های مختلفی که در سایت ارائه می دهید کمک بگیرید. این المان جذابیت بیشتری نسبت به لیست قیمت دارد و نمونه هایی از آن را در وب سایت های فروش هاستینگ مشاهده کردهاید.
- باکس چرخشی
ویجت باکس چرخشی که به Flip box نیز شناخته میشود، امکان داشتن جعبه های چرخشی دو طرفه را به شما می دهد و می توانید در جلو و پشت این المان متن دلخواه، تصویر و آیکن های مختلف را قرار دهید. با قرار گرفتن ماوس روی آن، جعبه چرخش میکند و طرف دیگر آن نمایش داده میشود.
- کنترل کاروسل
شاید این طور به نظر برسد که کاروسل و اسلایدر کارایی تقریباً مشابهی دارند. اما واقعیت این است که عملکرد این دو المان با هم متفاوت است. ابزارک کاروسل به شما این امکان را میدهد که یک سری تصاویر در آن قرار دهید و آنها را به صورت چرخشی به نمایش بگذارید. این المان برای نمایش بعضی نمونه کارها، محصولات، مشتریان و همکاران مجموعه بسیار مناسب است.
- بازدیدها
این المان امکان درج نظرات و دیدگاهها را در سایت فراهم میکند. نظرات افراد مختلف به صورت اسلایدی نمایش داده میشوند. امکان درج آیکون شبکه های اجتماعی و تنظیمات بیشتر در ویجت بازدیدها وجود دارد.
- کاروسل نظرات مشتریان
المان کاروسل مشتریان تقریباً با المان بازیدها مشابه است. اما تفاوتهای جزئی در نحوه نمایش و کابرد آنها وجود دارد.
- شمارش معکوس
المان جالب شمارش معکوس برای نمایش زمان شروع یا پایان جشنواره ها یا رویدادها به کار می رود. با مشخص کردن تاریخ و زمان سررسید رویداد، شمارش معکوس آغاز میشود. در این المان میتوانید نمایش یا عدم نمایش روز، ساعت، دقیقه و ثانیه را مشخص نمایید.
- نقل قول
بیان گفته ای از زبان دیگران یا همان نقل قول به زیبایی با این المان امکان پذیر است. نام، متن و پوسته و حتی برچسب شبکه های اجتماعی در المان نقل قول قابل سفارشی شدن است.
- نمایش تصویر Lottie
این المان برای نمایش تصاویر گرافیکی و انیمیشنی با حرکات خاص در سایت کاربرد دارد. برای استفاده از این المان ابتدا منبع تصویر را مشخص کنید و سپس فایل Json آن را در جعبه مشخص شده قرار دهید.
- نمایش کد
وب سایت هایی که در زمینه آموزش برنامه نویسی فعالیت میکنند ناگزیر از نمایش کدهای زبان های برنامه نویسی هستند. برای این کار ابزارک نمایش کد بهترین انتخاب است.
المان های کلی
ویجت هایی که در زبانه کلی هستند مانند آیکن جعبه، کادر تصویر، نوار پیشرفت و زبانه ابزارک هایی هستند که به طور کلی در هر وب سایت مورد استفاده قرار میگیرند. هر کدام از این المانها را انتخاب کنید و با تغییر محتوا و استایل با نحوه کارشان بیشتر آشنا شوید.
المان های سایت
افزودن لوگو، عنوان سایت و صفحه، فرم جستجو و هرآنچه برای طراحی سایت است را در المان های گروه سایت پیدا خواهید کرد.
امیدواریم توانسته باشیم اطلاعات خوب و مفیدی از المان های المنتور در اختیار شما عزیزان قرار داده باشیم. برای کسب مهارت در طراحی سایت با المنتور تلاش و صبر را فراموش نکنید. سعی کنید با تست ابزارک ها به نحوه کارایی آنها دست پیدا کنید و تواناییهای خود را افزایش دهید.
از حضور شما ممنونیم، آموزش وردپرس و آموزش المنتور را به عزیزان خود معرفی نمایید.
33 دیدگاه. Leave new
سلام وقت بخیر. برای اموزش رایگان وردپرس 2 استاد می باشد؟
سلام وقت شما بخیر،
آموزش وردپرس و آموزش المنتور هر کدام مجزا تدریس شدند.
با تشکر.
با سلاام المان کنترل کاروسل را در المنتور خود ندارم لطفا بفرمائید از چه المانی برای ساختن چند اسلاید با پیوند مجزا استفاده کنم؟
سلام وقت شما بخیر،
این المان بصورت پیش فرض در المنتور پرو وجود دارد و ممکن است نام آن متفاوت باشد که پیشنهاد میشود این مورد را در نظر بگیرید.
با تشکر.
ممنون، اما به چه نامی؟
خواهش می کنم، این مورد ممکن است با توجه به نوع ترجمه متفاوت باشد اما می توانید زبان سایت را انگلیسی کرده و المان Media Carousel را در المانها سرچ کنید تا به این مورد دست یابید و سپس زبان را به حالت اصلی بازگردانید.
باتشکر
سلام سپاس از شما جناب جبین پور آموزش هاتون عالییییییه.انرژی خوبش برگرده بهتون .ب امید خدا با آموش های شما دارم طراحی رو شروع میکنم به نحو احسن.باشد که برکت عظیمی هم به شما هم به من و تک تک دانشجوهاتون نصیب بشه.سپاس از تیم ابزار وردپرس و پشتیبانی خوبشون.
امیدوارم این پیام رو ببینی برادر گلم آقای جبین پور.
سلام وقت شما بخیر،
از همراهی شما بسیار ممنونیم و بسیار خوشحالیم که در کنارمان هستید.
با تشکر.
سلام. من محصول ویدیو یی میخوام در یکی از برگه محصولاتم بزارم. به طوری که طبیعتا بعد از خرید کاربر این ویدیو ها برای کاربر که قفل بود فعال شود. میخواهم این ویدیو ها به صورت نواری باشند مثل خیلی از محصولات ویدیویی، ویدیو ها پشت سر هم باشند.
سوال من اینست که آیا افزونه ی المنتور یا یکی از افزونه های جانبی آن همچنین المانی را دارند یا باید برای این بروم یک افزونه جداگانه نصب کنم؟
با سلام و احترام
بنده در بخش المان های پایه ای ، بخش داخلی را ندارم
ممنون میشم راهنماییم کنید
سلام وقت شما بخیر،
به نظر میرسد شما حالت فلکس باکس را در المنتور فعال کردید که پیشنهاد میشود از آموزش زیر دیدن فرمائید
تخصص طراحی فلکس در قالب وودمارت ( کانتینر )
با تشکر.
سلام و وقت بخیر
من وقتی یه تصویری رو اضافه می کنم، تنظیمات انحنا یا ردیوس اون کار نمی کنه
هرچی عدد وارد می کنم هیچ تغییرش در اون ایجاد نمیشه
ممنون میشم راهنماییم کنید
سلام وقت شما بخیر،
المان تصویر دارای تنظیماتی برای مدیریت حاشیه است که می توانید از آن استفاده کنید و نیازی به استفاده از تنظیمات حاشیه در تب پیشرفته نمیباشد.
با تشکر.
بسیار ممنونم ازتون
مشکلم حل شد
بسیار عالی هستین و خیلی صدا و تدریس شرینی دارین من خواهش میکنم تا جایی که امکان داره توضیحات زیاد و کامل و با جزییات بدین استاد جان ، صد بار هر ویدیوتون رو نگاه میکنم و هر بار بیشتر لذت میبرم
سلام خسته نباشید یه سوال داشتم در مورد عکس ها ،اینکه وقتی میخوام عکسی رو تو سایت بزارم loadنمیشه مشکل از کجاست؟
باسلام خدمت شما
در این رابطه باید با پشتیابانی قالب و افزونه های خود در ارتباط باشید تا علت بررسی شود.
از حضور شما ممنونیم.
سلام وقت بخیر
ببخشید یک سوال داشتم در المان ویرایشگر متن تو بخش استایل در قسمت تایپوگرافی وزن متن چیه؟ استاد در ویدیو توضیح نمیدن
سلام و وقت بخیر.
تقریبا می توان گفت همان ضخامت فونت است.
با آرزوی موفقیت برای شما .
خیلی ممنونم از پاسخگوییتون
اینکه هر بخش به صورت جدا توضیح داده شده عالیه، من حتی نیازی به جزه نویسی ندارم و هر بخشی رو سوال داشتم سریع پیدا میکنم
سلام خدمت گروه مهربان و پر همت ابرازوردپرس
بک سوال دارم خدمتتون اگر ویجت یا المانی در بخش ابزرارک های المنتور نبود چکار باید بکنیم . مثلا من بخش داخلی رو در یک نسخه می بینم اما در نسخه فارسش نمی بینم
آیا تنظیمات خاصی نیاز داره .ممنون می شوم راهنمایی کنید
سلام بر شما ، وقت بخیر از حضور شما ممنونیم.
از المانی که بتوانید آن مورد را انجام دهید استفاده نمایید و با افزونه ای که این امکانی که می خواهید اضافه کند را نصب نمایید.
آرزوی موفقیت برای شما داریم.
سلام و وقت بخیر خدمت استاد جبین پور و تیم ابزار وردپرس
خواستم بابت همه ی تدریس ها تشکر کنم و بگم که این تدریس ها واقعا زندگی من رو تغییر دادن و راه جدیدی در زندگی من باز کردن
از خداوند می خوام که بهترین ها برای شما اتفاق بیافته و زندگیتون سرشار از الطاف الهی باشه
سلام و عرض ادب خانم نوبری
در خدمت شما هستیم و برای شما آرزوی موفقیت داریم.
با تشکر.
سلام و درود ممنون از توضیحات کامل، من یه سوال داشتم چرا المان های ووکامرس و سایت و پرو برای من علامت قفل زده و نمیتونم ازشون استفاده کنم، ممنون میشم اگه راهنمایی کنید چون خیلی درگیرم باهاش
وقت بخیر
در المنتور، اگر نسخه پرو نصب نباشد برخی المان ها قفل است . باید نسخه پرو نصب و فعال باشد.
سلام تشکر از آموزش های جذاب شما
در مورد کم کردن ارتفاع ردیف، استاد تونستن ارتفاع را تا حداقل کم کنند، ولی من هر جه سهی کردم ارتفاع از یک حداقلی کمتر نشد. این مورد رو درست شبیه استاد انجام دادم. ردیف رو در حالت کمترین ارتفاع قرار میدم منو رو به چپ میکشم ولی از یک مقدار کمتر نمیشه؟
سلام و عرض ادب
این یک اصول اصلی نیست که باید حتماً انجام شود.
بسته به نیاز شما ، اگر گزینه های دیگر هم از نظر شما مناسب است، همان را انتخاب نمایید.
موفق و پیروز باشید
سپاسگزارم از استاد بزرگ جبین پور عزیز
از اموزش های دقیق و توضیحات کاملتون ممنونم. عاشق تدریس شما هستم
سلام بر شما
از حضورتان ممنونیم و برای شما آرزوی موفقیت داریم.
با تشکر.