آموزش المنتور وردپرس به صورت کامل ۲۰۲۰

آموزش المنتور

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

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

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

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

قبل از هرچیز لازم است نگاهی به امکانات المنتور بیاندازیم. از جمله اصلی ترین این امکانات می توان به موارد زیر اشاره کرد :

آموزش المنتور – ویژگی های المنتور

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

آموزش المنتور – طریقه نصب المنتور برروی وبسایت

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

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

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

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

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

 در بالای ادیتور گوتنبرگ برروی گزینه ویرایش با المنتور کلیک کنید.

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

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

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

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

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

آموزش المنتور – المان های اصلی و پایه ی آموزش المنتور وردپرس

• بخش داخلی : ارائه ساختار های چندتایی واکنشگرا برای مطالب و متون
• سربرگ : ابزار ارائه سرتیتر های هر پاراگراف از مقاله شما
• تصویر: ابزار ارائه محتوای چندرسانه ای از نوع تصویر ها
• ویرایشگر متن : ابزار اضافه کردن یک بلوک ادیتور برای نوشتن متون ، این ابزار یک ادیتور از نوع کلاسیک وردپرس را با همان امکانات در اختیار شما قرار می دهد. امکان اضافه کردن لیست و ویرایش کد های html و کار با کدهای کوتاه وردپرس که در ادیتور کلاسیک وردپرس وجود داشتند در این حالت هم وجود دارند.
• ویدیو:‌ ابزار ویدیو همانند تصویر اما برای بارگذاری ویدیو در وبسایت شما می باشد.
• دکمه : با استفاده از این ابزار می توانید دکمه های کاربردی به وبسایت خود اضافه کنید.
• جداکننده و فاصله گذار : این ۲ ابزار جهت ایجاد فاصله های نامرئی یا مرئی در قالب انواع خط چین می باشد.
• نقشه گوگل : ابزار اضافه کردن انواع نقشه های گوگل
• آیکن : اضافه کردن انواع آیکون های زیبا برای زیباسازی صفحه شما

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

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

آموزش المنتور – عنوان

در این بخش متنی که می بایست نمایش داده شود را وارد می کنید.

آموزش المنتور – پیوند

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

سایز

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

آموزش المنتور – تگ html

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

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

آموزش المنتور – رنگ متن

 این بخش مربوط به رنگ متون برای نوشته های شماست

آموزش المنتور – تایپوگرافی

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

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

با استفاده از این گزینه می توانید برای متون خود سایه بسازید.

آموزش المنتور – سربرگ پیشرفته

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

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

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

آموزش المنتور

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

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

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

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

ارتفاع و Vertical Align گزینه هایی هستند که موقعیت ۲ محتوا نسبت به هم در دو ستون مجاور را تعیین می کنند.

به عنوان مثال Vertical align در حالت وسط در وسط باعث می شود که موقعیت ۲ آیتم که در ۲ ستون مجاور هم هستند به صورت وسط قرار می گیرد.

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

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

شاید این سوال برای شما پیش بیاید که دلیل این امر چیست؟ طبیعی است که المنتور از ریسپانسیو پشتیبانی کاملی دارد لذا پارامتر های مربوط به چپ و راست را خودکار کنترل می کند زیرا صفحه ما معمولا از بالا و از پایین تغییر سایزی ندارد و واکنش گرایی برروی طول صفحات تاثیر گذار هستند.

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

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

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

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

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

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

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

کمی صبر کنید تا گزینه بعدی را هم ببینیم : تگ html

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

و ترتیب تیتر ها از شماره ۱ الی ۶ موضوعاتی هستند که می بایست به آنها توجه کنید. ما برای مثال خود h2 را انتخاب می کنیم. به بخش style ها رفته و استایل های عنوان خود را ویرایش می کنیم.

گزینه اول رنگ متن بوده که در این مثال ما آن را قرمز در نظر می گیریم.

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

• خانواده فونت
• سایز
• وزن فونت
• تغییر شکل
• دکوراسیون
• ارتفاع خط
• فاصله حروف از هم
• خانواده فونت

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

سایز برای تعیین دقیق اندازه عنوان شماست.

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

گزینه بعدی وزن فونت یا همان ذخامت فونت می باشد. برای زخیم کردن عنوان خود می توانید وزن آن را بالا ( در زخیم ترین حالت عدد ۹۰۰ ) قرار دهید.

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

ویژگی های دیگری که وجود دارند اما چندان برای زبان فارسی کاربردی نیستند و لذا بهتر است با تنظیمات پیشفرض آنهارا رها کنید.

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

در مرحله بعد به سراغ المان تصویر و المان دکمه رفته و مطابق با همین تنظیمات آنهارا نیز در صفحه درج می کنیم.

درحال حاضر ما یک صفحه ی نمایشی از چندین المان داریم.

افزودنی های المنتور – آموزش المنتور پیشرفته

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

اکنون به این صفحه ساز حرفه‌ای کوچ کرده‌اند. افزودنی المنتور المنت کیت یکی از قدرتمندترین و کامل‌ترین افزودنی‌های المنتور است که به شما امکان ساخت هدرهای حرفه‌ای، فوترهای بی نظیر، مگامنوهای ساده و پیچیده را می‌دهد. افزودنی المنتور ElementKit با بیش از ۲۰ صفحه اصلی از پیش طراحی شده قابل درون ریزی، بیش از ۴۵۰ بخش بندی حرفه‌ای آماده و بیش از ۵۰ عنصر حرفه‌ای برای المنتور، طراحی صفحات حرفه‌ای را بیش از پیش برای شما آسان و لذت بخش می‌کند.

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

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

• آکاردئون
• آکاردئون پیشرفته
• تب
• تب پیشرفته
• بلاگ
• لوگو مشتری

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

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

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

آموزش المنتور – قسمت اول

آموزش المنتور – قسمت دوم