راهنمای جامع المنتور: شروع آسان در وردپرس
توی این مقاله یاد می‌گیریم که چطور افزونه سایت‌ساز المنتور برای وردپرس، ساخت وب‌سایت رو فقط با چند عنصر اصلی، حسابی ساده کرده.
ویرایشگر المنتور، محبوب‌ترین افزونه صفحه‌ساز وردپرس در دنیاست. در حال حاضر ۱۷ درصد از سهم بازار رو در اختیار داره و روی ۱۲ درصد از کل وب‌سایت‌های جهان استفاده می‌شه.
این ابزار با استفاده از چهار جزء اصلی، ساخت وب‌سایت رو خیلی راحت‌تر می‌کنه: قالب‌ها برای طرح‌بندی کلی، بلوک‌ها برای بخش‌های مختلف صفحه، ویجت‌ها برای عناصر مجزا و کدهای سفارشی.
کاربرها می‌تونن بدون هیچ دانش کدنویسی، وب‌سایت‌های جذابی بسازن و در عین حال، توسعه‌دهنده‌ها هم این انعطاف رو دارن که کدهای جاوا اسکریپت و CSS سفارشی خودشون رو اضافه کنن.
ویرایشگر المنتور چیه؟
اگرچه معمولاً به کل این ابزار المنتور می‌گن، اما در واقع اسم شرکت «المنتور» هست و «ویرایشگر» یکی از محصولاتشه.
ویرایشگر المنتور یک افزونه صفحه‌ساز وردپرس با رابط کاربری ساده و مبتنی بر «کشیدن و رها کردن» (drag-and-drop) هست که به هر کسی اجازه می‌ده بدون نیاز به حتی یک خط کد، وب‌سایت‌های زیبایی بسازه.
رابط کاربری جذابش به کاربرها این امکان رو می‌ده که با کشیدن ویجت‌ها – مثل عکس، دکمه یا متن – و انداختن اون‌ها در بخش‌های مختلف صفحه، صفحات وب رو طراحی کنن.
برای توسعه‌دهنده‌ها هم، ویرایشگر المنتور از CSS سفارشی پشتیبانی می‌کنه تا بتونن طرح‌های خاص‌تر و منحصربه‌فردتری خلق کنن.
با این حال، دانش کدنویسی اصلاً الزامی نیست، چون المنتور گزینه‌های سفارشی‌سازی خیلی گسترده‌ای ارائه می‌ده که به کاربرها اجازه می‌ده چیدمان‌های واقعاً خاصی برای وب‌سایتشون بسازن.
طراحی سایت با ویرایشگر المنتور چطور کار می‌کنه؟
ساختن یک وب‌سایت با ویرایشگر المنتور حول چهار عنصر اصلی می‌چرخه:
۱. قالب‌ها (Templates)
قالب‌ها به عنوان یک نقطه شروع برای طراحی صفحات با چیدمان‌های از پیش تعریف‌شده، سرعت ساخت صفحات و وب‌سایت‌ها رو بالا می‌برن.
قالب‌ها ساختار کلی یک صفحه یا عناصر سراسری سایت مثل هدر و فوتر رو که در تمام صفحات تکرار می‌شن، مشخص می‌کنن.
۲. بلوک‌ها (Blocks)
بلوک‌ها بخش‌های از پیش طراحی‌شده‌ای از یک صفحه وب هستن که می‌شه اون‌ها رو با کشیدن و رها کردن توی چیدمان صفحه قرار داد.
این بلوک‌ها قسمت‌های مختلف یک صفحه، مثل بخش اصلی (Hero Section) یا بخش نظرات مشتریان رو نشون می‌دن و بر اساس چیدمان یا هدف طراحی‌شون مشخص می‌شن.
۳. ویجت‌ها (Widgets)
ویجت‌ها عناصر طراحی مجزایی هستن که محتوا یا قابلیت خاصی رو ارائه می‌دن، مثل تصاویر، متن یا فرم‌ها.
ویجت‌ها با هم ترکیب می‌شن تا بلوک‌ها رو بسازن و این بلوک‌ها هم در چیدمان کلی که توسط قالب تعریف شده، قرار می‌گیرن.
۴. کد سفارشی (Custom Code)
ویژگی «کد سفارشی» به کاربرهای حرفه‌ای این امکان رو می‌ده که با استفاده از CSS و جاوا اسکریپت، تغییرات ظاهری مثل فونت‌های سفارشی، انیمیشن‌ها و تنظیمات فاصله‌بندی رو اضافه کنن تا ساختار صفحه رو تغییر بدن، رویدادها رو فعال کنن و رفتارهای پویایی فراتر از گزینه‌های پیش‌فرض ویرایشگر المنتور ایجاد کنن.
نمایی از بخش کد سفارشی در ویرایشگر المنتور
عناصر طراحی صفحه در المنتور چطور با هم کار می‌کنن؟
سه عنصر اصلی برای ساخت وب‌سایت با المنتور یک سلسله‌مراتب مشخص دارن: قالب‌ها > بلوک‌ها > ویجت‌ها.
- قالب‌ها: قالب‌ها چیدمان کلی یک صفحه یا عناصر سراسری سایت مثل هدر و فوتر رو که در تمام صفحات تکرار می‌شن، مشخص می‌کنن. قالب‌ها از بلوک‌ها ساخته شدن که همون بخش‌های از پیش طراحی‌شده در چیدمان هستن.
- بلوک‌ها: بلوک‌ها بخش‌های از پیش طراحی‌شده یک صفحه وب هستن، مثل بخش اصلی (Hero) یا بخش نظرات مشتریان. این‌ها بر اساس چیدمان یا هدف طراحی‌شون مشخص می‌شن و از ویجت‌ها تشکیل شدن که می‌تونن به روش‌های مختلفی برای ساخت انواع خاصی از بلوک‌ها ترکیب بشن.
- ویجت‌ها: ویجت‌ها عناصر مجزایی هستن که محتوا یا عملکرد خاصی رو ارائه می‌دن، مثل تصاویر، دکمه‌ها یا فرم‌ها. این ویجت‌ها داخل بلوک‌ها استفاده می‌شن که به نوبه خودشون در چیدمانی که توسط قالب تعریف شده، قرار می‌گیرن.
نمایی از بخش پوسته‌ساز (Theme Builder) در المنتور
۱. قالب‌ها (Templates)
قالب‌ها کلی‌ترین سطح طراحی در المنتور هستن و چیدمان‌های تمام‌صفحه از پیش طراحی‌شده یا عناصر سراسری سایت مثل هدر و فوتر رو ارائه می‌دن.
اون‌ها طراحی کلی صفحات وب رو کنترل می‌کنن و می‌شه با استفاده از بلوک‌ها و ویجت‌ها، اون‌ها رو برای نیازهای خاص سفارشی‌سازی کرد.
قالب‌ها نمایانگر چیدمان کلی یک صفحه هستن، در حالی که بلوک‌ها بخش‌های از پیش طراحی‌شده محتوا (مثل نظرات مشتریان یا جدول قیمت‌ها) هستن که می‌شه اون‌ها رو به چیدمان اضافه کرد.
وقتی کارتون رو با یک قالب شروع می‌کنین، اغلب چندین بلوک به عنوان بخشی از طراحی اون وجود داره. کاربرها می‌تونن بلوک‌های اضافی رو به داخل قالب بکشن و رها کنن تا چیدمان رو سفارشی کرده و عملکردش رو بهبود ببخشن.
قالب‌ها چطور در روند کاری ویرایشگر المنتور قرار می‌گیرن؟
قالب‌ها با فراهم کردن یک نقطه شروع برای ساخت صفحات، در روند کاری طراحی وب‌سایت با المنتور قرار می‌گیرن.
کاربرها می‌تونن یک قالب از پیش طراحی‌شده رو که با نیازشون مطابقت داره انتخاب کنن و بعد با جابجایی، جایگزینی یا ویرایش بلوک‌های داخل اون، سفارشی‌سازیش کنن.
قالب‌ها به کاربرها اجازه می‌دن در زمان صرفه‌جویی کنن و در عین حال، هماهنگی و یکپارچگی رو در سراسر وب‌سایت حفظ کنن، چون ساختار و طراحی صفحات مجزا یا عناصر سراسری مثل هدر و فوتر رو تعریف می‌کنن.
نمایی از کتابخانه قالب‌های لندینگ پیج در المنتور
۲. بلوک‌ها (Blocks)
یک بلوک، ترکیبی از پیش طراحی‌شده از ویجت‌هاست؛ مثلاً ترکیب یک ویجت رسانه (Media Widget) با یک ویجت متن (Text Widget).
چیدمان بلوک مشخص می‌کنه که ویجت‌ها چطور قرار بگیرن، از جمله اینکه چطور با هم تراز بشن، هر کدوم چقدر فضا اشغال کنن و فاصله‌های بینشون چقدر باشه.
این جزئیات تضمین می‌کنه که طراحی بلوک هم کاربردی باشه و هم از نظر بصری جذاب.
بلوک‌ها بخشی از روند کاری طراحی یک صفحه وب هستن. برای مثال، اگه به یک فرم تماس در بخش خاصی از یک قالب نیاز داشته باشین، می‌تونین یک بلوک فرم تماس از پیش طراحی‌شده رو بکشین و در اونجا قرار بدین.
خودِ بلوک فرم تماس از ویجت‌ها ساخته شده. با جایگزین کردن بلوک‌های مشابه، تغییر دادن اون‌ها یا اضافه کردن بلوک‌های کاملاً جدید، یک قالب سفارشی ساخته می‌شه تا قابلیت‌های جدیدی به یک صفحه وب اضافه بشه.
المنتور طیف گسترده‌ای از بلوک‌های از پیش طراحی‌شده رو برای نیازهای مختلف طراحی ارائه می‌ده، مثل:
- درباره ما
- دعوت به اقدام (Call to Action)
- مشتریان/همکاران
- تماس
- شمارش معکوس
- سوالات متداول
- ویژگی‌ها
- فوتر
- فرم‌ها
- هدر
- نمونه کار/گالری
- قیمت
- نوار پیشرفت
- خدمات
- اشتراک
- تیم
- نظرات مشتریان
بلوک‌ها چطور در روند کاری المنتور قرار می‌گیرن؟
بلوک‌ها با عمل کردن به عنوان بخش‌های آماده‌ای که قسمت‌های خاصی از یک صفحه رو ساختار می‌دن، در روند کاری طراحی یک صفحه وب در المنتور قرار می‌گیرن.
هر بلوک از ویجت‌هایی تشکیل شده که محتوا و عملکرد اون رو تعریف می‌کنن.
کاربرها می‌تونن یک قالب رو با جایگزین کردن بلوک‌های مشابه، تغییر محتوای اون‌ها، یا اضافه کردن بلوک‌های کاملاً جدید برای بهبود عملکرد یک صفحه وب، سفارشی کنن.
۳. سیستم صفحه‌سازی با ویجت‌ها (Widgets)
در المنتور، قالب‌ها از بلوک‌ها تشکیل شدن و بلوک‌ها از ویجت‌ها ساخته می‌شن.
ویجت‌ها کوچک‌ترین عناصر طراحی در ویرایشگر المنتور هستن که عملکردهای خاصی (مثل دکمه‌ها و فرم‌ها) یا انواع محتوا (مثل تصاویر، تیترها و متن) رو ارائه می‌دن.
ویجت‌ها معادل اجزای مجزای یک صفحه وب هستن و ساختار صفحه و عملکردش رو تعریف می‌کنن.
برای مثال، یک بخش تماس ممکنه شامل یک ویجت تیتر، یک ویجت متن و یک ویجت فرم تماس باشه.
ویجت‌ها چطور در روند کاری المنتور قرار می‌گیرن؟
ویجت‌ها به عنوان کوچک‌ترین بخش‌های بلوک‌های از پیش طراحی‌شده یا سفارشی، در روند کاری قرار می‌گیرن.
کاربرها می‌تونن ویجت‌های داخل یک بلوک رو تغییر بدن یا اون‌ها رو با هم ترکیب کنن تا بلوک‌های سفارشی کاملاً جدیدی بسازن. این بلوک‌های سفارشی هم به نوبه خودشون می‌تونن برای تشکیل یک قالب سفارشی کنار هم چیده بشن.
۴. کد سفارشی (Custom Code)
کد سفارشی به کاربرها این امکان رو می‌ده که استایل‌ها و عناصر تعاملی رو فراتر از ابزارهای داخلی ویرایشگر المنتور اعمال کنن.
برخلاف قالب‌ها، بلوک‌ها و ویجت‌ها که ساختارهای از پیش تعریف‌شده‌ای ارائه می‌دن، کد سفارشی کنترل مستقیمی بر طراحی و عملکرد فراهم می‌کنه.
CSS امکان تنظیم دقیق چیدمان‌ها، تایپوگرافی و انیمیشن‌ها رو می‌ده. جاوا اسکریپت افکت‌های پویا مثل انیمیشن‌های اسکرول یا تعاملات مبتنی بر هاور (hover) رو اضافه می‌کنه. HTML هم ابزارهای شخص ثالث، مثل فرم‌های خارجی یا اسکریپت‌های ردیابی رو در صفحه ادغام می‌کنه.
کد سفارشی زمانی مفیده که تنظیمات داخلی ویرایشگر المنتور کافی نیست و انعطاف‌پذیری بیشتری برای اصلاح طرح‌ها جهت دستیابی به ویژگی‌ها، پیچیدگی و کنترل بیشتر بر طراحی و عملکردها ارائه می‌ده.
کاربرها همچنین می‌تونن کدی رو به بخش head وب‌سایت اضافه کنن تا استایل‌شیت‌ها، اسکریپت‌ها یا کدهای ردیابی رو در کل سایت بارگذاری کنن.
کد سفارشی چطور در روند کاری ویرایشگر المنتور قرار می‌گیره؟
کد سفارشی با این امکان که به کاربرها اجازه می‌ده استایل‌ها رو اصلاح کنن، تعامل‌پذیری اضافه کنن و پیچیدگی‌هایی رو که از طریق قالب‌ها، بلوک‌ها و ویجت‌های استاندارد در دسترس نیست، ایجاد کنن، در روند کاری ویرایشگر المنتور قرار می‌گیره.
کاربرها می‌تونن از طریق ویژگی «کد سفارشی» ویرایشگر المنتور، CSS رو برای اعمال تنظیمات استایل در کل سایت بدون تغییر تک‌تک عناصر، به کار ببرن.
جاوا اسکریپت می‌تونه رفتارهای پویا مثل منوی چسبان یا انیمیشن‌های فعال‌شونده با هاور رو اضافه کنه. HTML هم محتوای خارجی مثل فرم‌های سفارشی یا اسکریپت‌های ردیابی رو جاسازی می‌کنه.
برای تغییرات در سطح کل سایت، المنتور پرو امکان اعمال کد سفارشی سراسری رو فراهم می‌کنه و تضمین می‌کنه که تغییرات در صفحات مختلف یکسان باقی بمونن.
کاربرها همچنین می‌تونن کدی رو به بخش head اضافه کنن تا استایل‌شیت‌ها و اسکریپت‌ها قبل از محتوای صفحه بارگذاری بشن.
کد سفارشی در جایی که بلوک‌ها و ویجت‌ها انعطاف کافی ندارن، این امکان رو فراهم می‌کنه که کاربرها طرح‌هاشون رو به دقت تنظیم کنن و در عین حال، روند کاری رو ساختاریافته نگه دارن.
هوش مصنوعی ویرایشگر المنتور (Elementor Editor AI)
هوش مصنوعی ویرایشگر المنتور به کاربرها این امکان رو می‌ده که متن رو مستقیماً در ویجت متن تولید و اصلاح کنن.
کاربرها می‌تونن با کلیک روی یک لینک صورتی‌رنگ به اسم «Write with AI» (نوشتن با هوش مصنوعی) به این ابزار دسترسی پیدا کنن.
محتوای تولیدشده توسط هوش مصنوعی بر اساس زمینه پیشنهاد می‌شه و می‌شه اون رو با ساده‌سازی، گسترش، کوتاه‌سازی یا اصلاح گرامری، تغییر داد.
کاربرها همچنین می‌تونن لحن متن رو تغییر بدن یا اون رو به چندین زبان ترجمه کنن.
اضافه کردن کد سفارشی با هوش مصنوعی المنتور
ویژگی کد سفارشی ویرایشگر المنتور، از هوش مصنوعی هم بهره می‌بره تا کاربرها بتونن بدون نوشتن دستی کدهای CSS، جاوا اسکریپت یا HTML، کد سفارشی تولید و اعمال کنن.
برای استایل‌دهی به عناصر خاص، هوش مصنوعی المنتور می‌تونه CSS سفارشی برای افکت‌هایی مثل انیمیشن‌های هاور، هدرهای چسبان یا تغییرات متنی تولید کنه. کد تولیدشده توسط هوش مصنوعی شامل توضیحی درباره عملکردش هم هست که به کاربرها کمک می‌کنه قبل از اعمال، تأثیرش رو درک کنن.
با اینکه هوش مصنوعی ویرایشگر المنتور روند کدنویسی رو ساده می‌کنه، اما این کاربرها هستن که مسئولیت دارن کد تولیدشده رو بررسی کنن تا مطمئن بشن که مطابق انتظار عمل می‌کنه.
هزینه‌اش چقدره؟
ویرایشگر المنتور یک نسخه رایگان داره که به خودی خود خیلی کاربردیه، اما با ارتقا به پلن‌های پولی، طیف وسیع‌تری از گزینه‌های طراحی در اختیارتون قرار می‌گیره.
با توجه به ارزشی که این ویرایشگر ارائه می‌ده و قابلیت‌های گسترده‌اش، قیمت اون به طرز شگفت‌آوری مقرون‌به‌صرفه است.
پلن پایه که به درستی «Essential» نام‌گذاری شده، سالانه کمتر از ۶۰ دلار هزینه داره. پلن بعدی به نام «Advanced Solo»، سالانه کمتر از ۸۰ دلار قیمت داره. هر دو پلن برای استفاده روی یک وب‌سایت مجوز می‌دن.
تفاوت اصلی بین این دو پلن اینه که نسخه پیشرفته‌تر، ویژگی‌های فروشگاهی (ecommerce)، قابلیت اضافه کردن کد سفارشی و امکان استفاده به صورت تیمی با ویژگی یادداشت‌های تیمی (Collaborative Notes) رو ارائه می‌ده.
پلن‌های بالاتر همون قابلیت‌ها رو دارن، اما با مجوزهایی که اجازه استفاده روی وب‌سایت‌های بیشتری رو می‌دن.
ویرایشگر المنتور طراحی سایت حرفه‌ای رو برای همه ممکن می‌کنه
ویرایشگر المنتور یک صفحه‌ساز وردپرسی همه‌کاره است که به کاربرها کمک می‌کنه با استفاده از سه عنصر ساده و قابل فهم، وب‌سایت طراحی کنن: قالب‌ها، بلوک‌ها و ویجت‌ها.
قالب‌ها چیدمان کلی یک صفحه رو کنترل می‌کنن، بلوک‌ها بخش‌های از پیش طراحی‌شده‌ای از چیدمان قالب هستن و ویجت‌ها عناصر طراحی جزئی‌تری هستن که داخل بلوک‌ها قرار می‌گیرن و به انواع محتوای خاص (مثل متن و تصویر) و عملکردها (مثل فرم و دکمه) مربوط می‌شن.
این عناصر در کنار هم، اساس یک روند کاری ساده و قابل درک رو تشکیل می‌دن که طراحی وب رو در دسترس همه قرار می‌ده و به کاربرها اجازه می‌ده مثل یک حرفه‌ای، وب‌سایت‌های جذابی بسازن.
پاسخی بگذارید