همکاران ما برای کمک به شما آماده هستند.
یکی از مهمترین ویژگی طراحی سایت با قالب های وردپرس استفاده شده اند این است که اکثر قالب های وردپرس برپایه صفحه سازهای گرافیکی مانند ویژوال کامپوزر و المنتور هستند. این دو افزونه از قدرتمند ترین افزونه های صفحه ساز برای سیستم مدیریت محتوای وردپرس هستند.
در این آموزش المنتور قصد داریم تا شمارا با صفحه ساز المنتور آشنا کنیم.
المنتور که به جرات می توان به آن لقب برترین افزونه صفحه ساز ۲۰۲۰ وردپرس را داد افزونه ای با امکانات فراوان بوده که
نسبت به رقیب خود یعنی افزونه ویژوال کامپوزر برتری های بسیاری دارد.
قبل از هرچیز لازم است نگاهی به امکانات المنتور بیاندازیم. از جمله اصلی ترین این امکانات می توان به موارد زیر اشاره کرد :
برای نصب المنتور نسخه عادی کافیست در مخزن وردپرس عبارت Elementor را سرچ نمایید. و عبارت افزونه برگه ساز المنتور را نصب نمایید.
المنتور در نسخه عادی خود بسیاری از امکانات را قرار داده است اما اگر به امکانات بیشتری نیاز دارید می بایست المنتور پرو را خریداری کنید. با توجه به افزایش قیمت دلار و قابل اعتماد نبودن سورس های افزونه المنتور پرو، وبلینو را بر آن داشته تا نسخه غیررایگان و قابل خرید افزونه المنتور را در همین صفحه و در اختیار شما قرار دهد.
خوشحالی ما اینجا پایان نمی یابد ! زیرا المنتور علاوه بر نسخه Elementor Pro افزونه های گوناگونی تحت عنوان Elementor Extras دارد که هرکدام امکانات قابل توجهی را به این افزونه کاربردی اضافه می کنند. و طبیعتا آنها هم در همین پست و در دسترس وب مستران عزیز قرار گرفته است.
پس از نصب المنتور منوی تحت عنوان المنتور به پیشخوان وردپرسی سایت شما اضافه می شود. در این قسمت تنظیماتی وجود دارد که می بایست آن را تنظیم کنیم اما در ابتدای مقاله قصد نداریم تا شمارا درگیر تنظیمات المنتور کنیم. در این پلاگین تقریبا همه چیز آماده است تا بتوانید صفحات وردپرسی قدرتمند طراحی کنید.
پس از نصب و فعالسازی افزونه صفحه ساز المنتور وارد افزودن نوشته شوید. ابتدا عنوان نوشته خود را تعیین کنید.
در بالای ادیتور گوتنبرگ برروی گزینه ویرایش با المنتور کلیک کنید.
یک صفحه خام از قالب شما برایتان باز می شود که تعدادی از ابزارک های المنتور بسته به نسخه ای که برروی سایت شما فعال است در این صفحه وجود دارد. ساختار صفحه ای که درحال حاضر می بینید تا حد زیادی بسته به متغیر های قالب خود و تنظیماتی است که برروی آن اعمال شده است. در سمت راست صفحه ( در زبان فارسی ) و یا سمت چپ صفحه ( در زبان انگلیسی ) تعدادی المان وجود دارد که هرکدام از آنها کاربرد خاصی دارد.در ادامه با هر کدام از المان ها آشنا می شویم
هرکدام از المان ها که به نظرتان جالب می آید را بکشید و در صفحه قرار دهید.
در ابتدا دو گزینه به نام افزودن بخش جدید و افزودن قالب نمایش داده میشود. برای استفاده از قالبهای آماده افزونه کافی است از میان قالبهای موجود یکی را انتخاب و اقدام به ویرایش آن کنید. این بخش قابل ویرایش نیز می باشد و میتوانید ساختار خود را برای محتوایتان قرار دهید.
پس از انتخاب ساختار مورد نظر خود با کلیک بر روی گزینه المان بخش های متنوعی برای افزودن المان دلخواه خود به آن ساختار نمایان میشود که باید اجزای موردنیاز خود جهت استفاده در آن صفحه را از ابزارک سمت راست همین صفحه انتخاب کنید. به طور مثال ما در این بخش ابزار سربرگ را به صورت Drag & Drop به یکی از بخشهای مربوط به ساختار صفحه میکشیم و اطلاعات آن را وارد میکنیم.
حالا می توانیم یک صفحه وردپرسی را بسازیم.
هرکدام از ابزار های بالا را می توانید به سادگی Drag & Drop کرده و برروی ساختاری که در ابتدای طراحی صفحه خود انتخاب کرده قرار دهید.
هرکدام از ابزارها تعدادی تنظیم به صورت پیشفرض دارند که در ادامه این مقاله از وبسایت وبلینو آنهارا نیز مورد بررسی قرار می دهیم.
در این بخش متنی که می بایست نمایش داده شود را وارد می کنید.
اگر نیاز دارید تا یک لینک یا پیوند اینترنتی برای بخشی یا همه ی متن خود ایجاد کنید می توانید از این قسمت استفاده کنید.
این بخش مربوط به سایز متن مورد استفاده شما است. با استفاده از آن میتوانید سایز متن خود را مشخص کنید و آن در حالت کوچک، متوسط یا بزرگ قرار دهید.
اگر نیاز به نمایش محتویات متن خود در تگهای H دارید، کافی است نوع تگ H را از طریق این بخش وارد کنید.
سربرگ بعدی که مورد بررسی قرار می دهیم سربرگ استایل است. این سربرگ را در تمامی المان های المنتور خواهید دید. در این سربرگ می توانید استایل را شخصی سازی کنید.تعدادی از تنظیمات موجود در برگه استایل به شرح زیر هستند :
این بخش مربوط به رنگ متون برای نوشته های شماست
در این بخش می توانید فونت، رنگ،سایز و متون موردنظر خود را جهت نمایش در صفحه ایجاد شده انتخاب کنید.
با استفاده از این گزینه می توانید برای متون خود سایه بسازید.
در این قسمت بخش های پیشرفته تری مورد بررسی قرار می گیرد.با استفاده از تنظیمات سربرگ پیشرفته میتوانید تنظیمات بیشتری برای نحوه نمایش المان مورد نظر خود اعمال کنید. به عنوان مثال میتوانید فاصلهها را تغییر دهید، برای نمایش این المان انیمیشن بگذارید، یک پس زمینه برای حالت معمولی و هاور المان تعیین کنید و یا حتی تعیین کنید این المان در چه سایزهای صفحه نمایشی نشان داده شود. در نهایت کافی است بر روی دکمه انتشار کلیک کنید تا صفحه موردنظر در وردپرس موردنظر شما نمایش داده شود.
دقت داشته باشید هر المانی که اضافه میکنید، در سمت راست صفحه دارای 3 سربرگ است که تنظیمات آن المان را در بر دارد. شما میتوانید از بین 30 المان محتلف افزونه قدرتمند المنتور، صفحه دلخواه خود را با دست باز بسازید.
آموزش المنتور
برای شروع من ابتدا یک بخش را ایجاد کرده و در سمت راست صفحه المان های طرحبندی برای بخش موجود می باشد.
بخش کشیده اولین گزینه ی موجود برای هر بخشی است که باعث میشود عرض بخش شما تا انتهای عرض مانیتور کشیده شود. این گزینه به صورت پیش فرض غیر فعال است.
عرض محتوا هم به شما امکان اینکه محتوای خود را به صورت جعبه ای ( Container ) یا با حالت تمام عرض داشته باشید را می دهد. عرض محتوا و موارد مرتبط با آن در زمره موارد Responsive وبسایت قلمداد می شود اما این موارد به صورت پیش فرض در المنتور رعایت می شوند.
فاصله بین ستون ها در زمانی کاربرد دارد که چندین ستون را در کنار هم قرار داده اید و می خواهید این ستون ها فاصله دار با یکدیگر باشند.
ارتفاع و Vertical Align گزینه هایی هستند که موقعیت ۲ محتوا نسبت به هم در دو ستون مجاور را تعیین می کنند.
به عنوان مثال Vertical align در حالت وسط در وسط باعث می شود که موقعیت ۲ آیتم که در ۲ ستون مجاور هم هستند به صورت وسط قرار می گیرد.
در قسمت style که پیشتر آن را معرفی کرده بودیم می توانیم بخش مربوطه را با رنگ پس زمینه ای همانند پس زمینه مشکی تزیین کنیم برای اینکار کافیست با مراجعه به قسمت style و نوع پس زمینه که علامت قلم رنگ را دارد از گزینه پایینی آن رنگ را انتخاب و برای بخش خود رنگ پس زمینه قرار دهیم. برای بخش ها معمولا قسمت استایل تنظیم زیادی را ندارد.بنابراین وارد بخش پیشرفته می شویم.
در بخش پیشرفته فاصله از چپ و فاصله از راست به صورت auto تنظیم شده اما فاصله های بالا و پایین قابل تنظیم هستند.
شاید این سوال برای شما پیش بیاید که دلیل این امر چیست؟ طبیعی است که المنتور از ریسپانسیو پشتیبانی کاملی دارد لذا پارامتر های مربوط به چپ و راست را خودکار کنترل می کند زیرا صفحه ما معمولا از بالا و از پایین تغییر سایزی ندارد و واکنش گرایی برروی طول صفحات تاثیر گذار هستند.
همچنین بخش پدینگ برای ایجاد فاصله های داخلی برای محتواهای درون هرکدام از سلول ها هستند که در این مورد محدودیتی در مورد تغییر سایز هر کدام از المان ها وجود ندارد. همچنین می توانید با استفاده از گزینه زنجیر موجود در بخش پدینگ عددی که برای هرکدام از قسمت ها لحاظ می کنید را به تمامی طرفین ( بالا – پایین – چپ – راست ) اختصاص دهید.
بخش پیشرفته فقط محدود به این گزینه ها نیست اما همانطور که از اسم آن معلوم است این بخش پیشرفته است و الزاما تمامی ابزارهای آن برای شما نیست.
بعضی از ابزارها همانند آی دی و کلاس های اختصاصی زمانی کاربردی هستند که قصد طراحی یک قالب و ساختار اختصاصی برای خود دارید که طبیعتا در این زمان باید به مفاهیم CSS و فریمورک های طراحی صفحات آشنا باشید بنابراین بیش از این وقت خود را به بخش پیشرفته اختصاص ندهید. به سراغ المان های دیگر بروید تا صفحه خود را هرچه بیشتر غنی و زیبا کنید.
حال اولین المان یعنی المان سربرگ را انتخاب و به داخل ساختاری که تعریف کرده بودم می کشم.
المان سربرگ یک عنوان برای خود دارد که مطابق توضیحات بالا این عنوان را با عبارت ما وبلینو هستیم پر می کنم.
پیوند برای لینک دادن این عنوان به یک صفحه داخلی و یا خارجی است و در این مثال من آن را بدون تغییر نگه می دارم.
سایز امکان بزرگ یا کوچک کردن متن سربرگ من را می دهد. به سادگی می توانم یک سربرگ بزرگ یا سربرگ بسیار کوچک داشته باشم. اما با وجود بخش استایل در تنظیمات این المان شاید وجود این قسمت الان خیلی برایتان منطقی به نظر نرسد.
کمی صبر کنید تا گزینه بعدی را هم ببینیم : تگ html
در اینجا می توانیم ماهیت این المان سربرگ خود را تعیین کنیم. اگر برای سئو وبسایت خود کار می کنید قطعا نوع سربرگ و نوع تگ هایی که برای تیتر های خودتان به کار می برید امری مهم تلقی می شود. اینکه چه تیتری را برای متن خود انتخاب کنید.
و ترتیب تیتر ها از شماره ۱ الی ۶ موضوعاتی هستند که می بایست به آنها توجه کنید. ما برای مثال خود h2 را انتخاب می کنیم. به بخش style ها رفته و استایل های عنوان خود را ویرایش می کنیم.
گزینه اول رنگ متن بوده که در این مثال ما آن را قرمز در نظر می گیریم.
پس از آن برروی تایپوگرافی کلیک میکنیم.تایپوگرافی پنجره ای اختصاصی برای خود دارد که شامل این گزینه ها می باشد.
خانواده فونت برای تغییر فونت هر المانی در المنتور کاربرد دارد اما به خاطر داشته باشید که معمولا در زبان فارسی قالب های وبسایت شما از یک فونت واحد پیروی میکنند بنابراین اگر این قسمت را تغییر دهید احتمالا ( مگر اینکه قالب شما چندین فونت فارسی همراه خود داشته باشد ) عنوان خود را از فونت محروم می کنید.
سایز برای تعیین دقیق اندازه عنوان شماست.
با استفاده از بخش سایز می توانید ابعاد دقیقی برای المان سربرگ که انتخاب کرده اید ایجاد نمایید. این ابعاد براساس پیکسل و یا واحدهای دیگر اندازه گیری هستند و به نسبت تب قبلی ( تب محتوا ) که در آن می توانستید از میان پارامتر هایی مثل بزرگ ، بزرگتر ، کوچک ، کوچکتر و … پارامتری را انتخاب کنید دقیقتر بوده و اینبار تا ریز ترین اعداد را هم می توانید به المان المنتوری خود تخصیص دهید.
گزینه بعدی وزن فونت یا همان ذخامت فونت می باشد. برای زخیم کردن عنوان خود می توانید وزن آن را بالا ( در زخیم ترین حالت عدد ۹۰۰ ) قرار دهید.
گزینه دکوراسیون نیز که در پایین آن قرار گرفته ابزارهایی مانند اضافه کردن خط به زیر و یا روی عنوان هارا دارد.
ویژگی های دیگری که وجود دارند اما چندان برای زبان فارسی کاربردی نیستند و لذا بهتر است با تنظیمات پیشفرض آنهارا رها کنید.
ما در ادامه یک المان ویرایشگر متن را به صفحه خود اضافه کرده و تنظیمات آن را هم مطابق با توضیحاتی که در بالا ارائه دادیم انجام می دهیم.
در مرحله بعد به سراغ المان تصویر و المان دکمه رفته و مطابق با همین تنظیمات آنهارا نیز در صفحه درج می کنیم.
درحال حاضر ما یک صفحه ی نمایشی از چندین المان داریم.
می توان اظهار داشت که اصول المنتور را یاد گرفته ایم. المنتور ابزارهای زیادی دارد اما تمامی این ابزارها از همین الگو ها پیروی می کنند. در این روزها بازار المنتور و افزودنیهای المنتور به شدت داغ است و عمده کاربرانی که پیشتر از صفحه ساز ویژوال کامپوزر استفاده میکردند.
اکنون به این صفحه ساز حرفهای کوچ کردهاند. افزودنی المنتور المنت کیت یکی از قدرتمندترین و کاملترین افزودنیهای المنتور است که به شما امکان ساخت هدرهای حرفهای، فوترهای بی نظیر، مگامنوهای ساده و پیچیده را میدهد. افزودنی المنتور ElementKit با بیش از ۲۰ صفحه اصلی از پیش طراحی شده قابل درون ریزی، بیش از ۴۵۰ بخش بندی حرفهای آماده و بیش از ۵۰ عنصر حرفهای برای المنتور، طراحی صفحات حرفهای را بیش از پیش برای شما آسان و لذت بخش میکند.
همچنین افزودنی المنتور المنت کیت از تنظیمات پارالکس پیشرفته با کتابخانه های SVG برخوردار است. پس زمینه های پارالکس با انیمیشنهای شیبدار، تاثیراتی همراه با حرکت موس در صفحه، پارالکسهای اسکرولی و انمیشنهای css بخشی از ویژگیهای این افزودنی قدرتمند هستند.
افزودنی المنتور المنت پک مجموعهای از افزودنیها و عناصر کاربردی برای صفحه ساز المنتور را در اختیار شما میگذارد. شما به کمک افزونه المنت کیت میتوانید هر نوع سایتی را که خواستید طراحی کنید.
البته این ها تمامی قابلیت های این افزونه نبوده و این افزونه قدرت بسیار بیشتری در طراحی بخش های مختلف سایت با استفاده از افزونه صفحه ساز المنتور را دارد.
قصد داریم تا در ادامه آموزش جامع المنتور در تیم طراحی وب با وبلینو در این قسمت به شما توضیح دهیم که چگونه یک پاپ اپ زیبا برای وبسایت خود طراحی نمایید.
برای طراحی پاپ آپ در افزونه المنتور می بایست در ابتدا پاپ آپ را برای شما تعریف نماییم.
پنجره های پاپ آپ به عنوان عناصر کاربردی در نمایش محتوا جایگاه خاصی در میان طراحان سایت به دست آورده اند. هدف اصلی استفاده از پاپ آپ ها ارائه محتوای مهم و موردنیاز کاربران بدون تغییر در ساختار کلی وب سایت است و برای اطلاع رسانی موصوعات مختلفی استفاده می شوند.
استفاده از الگو های آماده پاپ آپ های بخش کتابخانه باعث تسریع روند طراحی پنجره های پاپ آپ میگردد همچنین شما میتوانید از میان ده ها قالب پیش ساخته حرفه ای زیبا انتخاب کنید و به توسعه صفحات وب سایت خود بپردازید.برای استفاده از قالب های آماده پاپ آپ کافیست از مسیر پیشخوان وردپرس > قالب ها > افزودن جدید پیش بروید . و نوع قالب خود را بر رو روی Popup انتخاب کنید تا وارد بخش کتابخانه شوید.
یکی از جنبه های خوب در آموزش المنتور وردپرس در وبلینو قرار گرفتن قالب های آماده المنتور است که توسط تیم طراحی سایت وبلینو آماده گردیده و به مرور به شکل فایلهای خروجی گرفته شده از طریق همین مقاله در اختیار شما قرار خواهد گرفت. شما می توانید این قالب هارا برروی سایت خود درون ریزی کرده تا از تمامی امکانات افزونه المنتور به راحتی استفاده نمایید
برای ورود به قسمت تنظیمات در ابزار پاپ آپ در افزونه المنتور کافیست برروی آیکون چرخ دنده کلیک کرده تا تنظیمات ابزارک پاپ آپ المنتور را مشاهده نمایید. دقت داشته باشید که ابزارک های این چنینی و آیتم هایی که از طریق بخش قالب های المنتور برروی صفحه بارگزاری می شوند شامل ترجمه المنتور پرو فارسی نبوده و به صورت انگلیسی نمایش داده می شوند.
این ابزار هم درست مانند دیگر ابزارهای موجود در لیست ابزارک های المنتور دارای سربرگ های Advanced و Style می باشد که کار کردن با آنها درست همانند قسمتهای ظاهر و پیشرفته در بقیه بخش های پلاگین المنتور می باشد. همانطور که پیشتر اشاره کردیم تنها تفاوت افزونه پاپ آپ المنتور عدم ترجمه تنظیمات آن به زبان فارسی بوده که شمارا ناچار به انجام تنظیمات آن با استفاده از گزینه های انگلیسی می کند.
شاید اسم افزونه بسیار قدرتمند جت پاپ اپ را شنیده باشید.افزونه JetPopup یک افزونه جانبی بسیار پر کاربرد در سیستم مدیریت محتوای وردپرس به حساب می آید که به عنوان یک افزونه جانبی برای صفحه ساز المنتور در سیستم محتوای وردپرس مورد استفاده قرار می گیرد و همچنین به کاربر این امکان را می دهد تا قالب های پاپ آپ را در انواع مختلفی با استفاده از این افزونه ایجاد نماید.
این افزونه کار شمارا برای طراحی پاپ آپ المنتور بسیار راحت خواهد کرد زیرا پاپ آپ های المنتوری در این افزودنی المنتور به صورت پیشفرض با امکاناتی بسیار بیشتر قرار گرفته اند. می توانید این پاپ آپ هارا برروی بخش های مختلف سایت خود قرار داده و به شکل های دلخواه خود آنهارا تغییر دهید.
افزونه جت پاپ آپ در مارکت های فارسی فروش پلاگین ها و قالب های وردپرس جهت فروش قرار گرفته است و شما می توانید به راحتی این افزونه را تهیه و برروی المنتور وبسایت وردپرسی خود نصب نمایید.
در بالا چکیده آموزش جامع کار با افزونه المنتور وردپرس را در قالب ۲ ویدیو از کارشناسان وبلینو مشاهده می کنید.
از اینکه مارا در این آموزش همراهی کردید از شما سپاسگذاریم و امیدواریم این آموزش بتواند تا حد زیادی به سوالات شما در رابطه با افزونه المنتور و کاربرد های آن پاسخ دهد.
در صورت نیاز به پشتیبانی می توانید با مجموعه طراحی وب با وبلینو در تماس باشید تا برای مشاوره طراحی سایت و خدمات مبتنی بر آن با شما تماس حاصل نماییم.