آموزش افزونه المنتور | افزونه وب سایت ساز Elementor Website Builder

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

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

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

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

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

در این آموزش افزونه Elementor Page Builder را بررسی کرده و نحوه کار با آن را توضیح خواهیم داد.

آموزش افزونه Elementor Page Builder و نحوه ساخت یک صفحه در وردپرس

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

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

همچنین صفحه خوش آمدگویی افزونه به شما نشان داده می شود.

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

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

مشاهده می کنید که در صفحه ویرایش نوشته دکمه ای با عنوان “ویرایش با المنتور” اضافه شده است که در ویرایشگر گونتبرگ وردپرس به شکل زیر ظاهر می شود.

با کلیک بر روی این دکمه، رابط کاربری اصلی افزونه المنتور را مشابه شکل زیر مشاهده خواهید کرد.

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

1. محل قرار گرفتن بلوک های محتوا و تنظیم آنها
2. عناصر محتوایی که در دسترس هستند در این قسمت نشان داده می شود.
3. محل دسترسی به تنظیمات کلی صفحه (رنگ ها، فونت ها، اصلاحیه ها و …)
4. با کلیک بر روی این تب می توانید یک ابزارک را به صورت عمومی ذخیره کنید. این ویژگی تنها در نسخه Pro این افزونه قابل استفاده است.
5. ابزار سوئیچ کردن (دسکتاپ، تبلت، موبایل).
6. تنظیمات. با کلیک بر روی آیکون تنظیمات می توانید تنظیمات عمومی صفحه شامل عنوان صفحه، وضعیت نمایش آن، انتخاب تصویر شاخص برای صفحه و نمایش یا عدم نمایش عنوان را پیکربندی کنید.

برای ساخت یک صفحه با وب سایت ساز المنتور ابتدا باید در مورد سلسله مراتب ساختار صفحه که این افزونه از آن استفاده می نماید، اطلاعاتی داشته باشید. در ادامه آموزش افزونه Elementor Page Builder در مورد ساختار صفحه صحبت خواهیم کرد.

نحوه ساخت صفحه

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

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

صفحه ← بخش ← ستون ← محتوا ← استایل دهی

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

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

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

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

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

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

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

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

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

حال در ادامه آموزش افزونه Elementor Page Builder به شما نشان خواهیم داد که چگونه با یک قالب خالی صفحه موردنظر خود را بسازید.

طرح بندی اصلی افزونه Elementor از سه بلوک ساختمانی تشکیل شده است: بخش ها (Sections)، ستون ها (Columns) و ابزارک ها (Widgets).

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

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

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

در ادامه آموزش یک قالب خالی ایجاد کرده و عناصر محتوا را با استفاده از افزونه Elementor Page Builder به آن اضافه می کنیم. بنابراین بر روی آیکون + کلیک کرده و یک بخش دو ستونی را انتخاب می کنیم.

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

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

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

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

هنگامی که یک بلوک محتوا را در جای خود قرار دادید می توانید برای تنظیم دقیق تر جزئیاتی که در داخل آن قرار دارد، بر روی آن کلیک کنید.

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

• محتوا
• استایل
• پیشرفته

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

با قرار دادن موس بر روی هر بخش (سکشن)، ستون و ابزارک، آیکون های مربوط به ویرایش و کنترل ظاهر می شوند که می توانید از طریق این آیکون ها که به آنها هندل (handle) می گوییم بخش، ستون و ابزارک مورد نظر خود را ویرایش کنید.

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

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

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

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

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

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

سپس روی ذخیره پیش نویس کلیک کنید.

تنظیمات واکنش گرایی افزونه المنتور برای موبایل، تبلت و دسکتاپ

بسیاری از ویژگی های قابل ویرایش دارای تنظیمات موبایل، تبلت و دسکتاپ هستند. متداول ترین کاربردها شامل اندازه متن، مارجین و پدینگ المان ها و … هستند.

برای اعمال تنظیمات برای موبایل، تبلت و دسکتاپ به ترتیب زیر عمل کنید:

روی آیکون حالت واکنش گرا کلیک کنید.

سپس روی آیکون های ابزارهای مختلف سوئیچ کرده و تنظیمات آنها را پیکربندی نمایید.

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

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

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

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

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

یکی دیگر از قابلیت های افزونه Elementor نمایش دادن یا پنهان کردن بخش هایی از محتوا در ابزارهای مختلف است. برای این کار به مسیر تنظیمات بخش » پیشرفته رفته و در بخش واکنش گرا، نمایش/عدم نمایش بخش مورد نظر خود تنظیم کنید.

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

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

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

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

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

دانلود افزونه